avatar
Invité
Invité
Coucou :3

J'ai remarqué quelque chose d'étrange sur la pension, au niveau du codage des catégories mais c'est peut-être normal hein, je ne sais pas en fait.

Voici le formulaire ::


Quelle structure est concernée par votre problème ? Le codage des catégories.
Quelle est l'adresse du forum concerné (sous hide si cela vous dérange) ? http://pensionmakeitcount.forumactif.com
Un screen du problème : Et hop !
Expliquez précisément votre problème : Eh bien, je me demande pourquoi la partie où se situe le dernier sujet posté n'est pas comme les autres. Elle n'est plus "cachée" :/ Je ne sais juste pas si c'est normal ou bel et bien étrange ^^'
Les codes : (Voir ci-dessous)
Template (je le mets en entier)
Code:
<br /><table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
 <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
 <div class="fond-forum">
    
    
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titrecat">{catrow.tablehead.L_FORUM}</div>

<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
    <div class="lastpost">      <div class="statsFRM">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</div>
      {catrow.forumrow.LAST_POST}</div>
<div class="entourcate">
  <div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>
<div class="autour">
<div class="fondcate">
<div class="bordureleft"></div>
{catrow.forumrow.FORUM_DESC}

<div class="ethop"><div class="hoversousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
  
</div>
    

</div><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
<!-- END forumrow -->
<!-- END catrow -->
</div>
CSS concerné (normalement, je ne me suis pas trompée mais on n'a pas précisé le début et la fin de ce code :P)
Code:
.jmoldau {
  margin:0 auto;
  width:500px;
  background:var(--main-color);
  position:relative;
  border-collapse:collapse;
  line-height:100%;
  border:0.5px solid #ddd;
}
.jmoldaurp {
  background:#f7f7f7;
  position:relative;
  margin-right:130px;
  padding:50px;
  font-family:Open Sans;
  font-weight:500;
  font-size:10px;
  line-height:15px;
  color:#444;
  text-align:justify;
}
.jmoldaurp b {
  color:var(--main-color);
  font-family:Poppins;
  font-weight:600;
}
.jmoldauh {
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), var(--big-img);
  height:150px;
  filter:grayscale(100%);
  background-size:cover;
  background-position:center center;
  position:relative;
}
.jmoldaulyr {
  position:absolute;
  left:0; top:70px;
  width:500px;
  font-family:Poppins;
  font-weight:600;
  font-size:11px;
  letter-spacing:5px;
  text-transform:uppercase;
  text-align:center;
  line-height:100%;
  color:#fff;
}
.jmoldaul {
  width:50px;
  height:2px;
  background:var(--main-color);
  position:absolute;
  top:95px; left:225px;
  line-height:100%;
}
.jmoldautag {
  width:100px;
  line-height:100%;
  position:absolute;
  bottom:15px; right:15px;
  color:#fff;
  font-family:Poppins;
  font-size:8px;
  font-weight:600;
  text-align:right;
  text-transform:uppercase;
}
.jmoldautag a {
  color:#fff;
  font-family:Poppins;
  font-size:8px;
  font-weight:600;
  text-transform:uppercase;
  text-decoration:none;
  display:block;
}
.jmoldaucred {
  text-align:center;
  letter-spacing:2px;
  line-height:100%;
  margin:0 auto;
}
.jmoldaucred a {
  color:#ccc;
  font-family:Arial;
  font-size:6px;
  text-align:center;
  text-decoration:none;
 }


.entourcate {
    margin: 0px auto 50px auto;
    position: relative;
    width: 820px;
}
.titreFRM a {
      -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(#f6b7e7,#c39bfc);
    color: transparent;
    font-family: times new roman;
    font-size: 22px;
    text-align: left;
    text-transform: uppercase;
    transition: all 1.5s;
    position: relative;
    margin: 20px;
    font-weight: 800;
      top: 10px;
    left: 5px;
}
.imgFRM {
    margin-top: -120px;
    margin-right: -96px;
    float: right;
}
.lastpost {
    background: #D8ECFC;
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    float: left;
    font-family: times new roman;
    font-size: 12px;
    height: 50px;
    margin-left: -36px;
    margin-top: 33px;
    padding: 20px;
    position: absolute;
    text-align: center;
    transition: all 800ms;
    width: 150px;
    color: white;
    text-transform: lowercase;
}
.lastpost a {
  text-transform:uppercase;
  color:#f5bbe2;
  font-style:italic;
  font-size:15px;
}
.lastpost:hover {
  transition:all 800ms;
  margin-left:-180px;
}
.statsFRM {
color: #fff;
    font-family: times new roman;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: -5px;
}
.autour {
  background-color: #b2e2fa;
  padding:20px;
  width:790px;
  margin:0 auto;
  z-index:99;
}
.titrecat {
    margin-bottom: -20px;
    margin-top: 44px;
    height: 85px;
}
.titrecat h2{
    font-family: times new roman;
    font-size: 35px;
    line-height: 60px;
    text-align: center;
    text-transform: uppercase;
    transition: all 1.5s;
    background-image: -webkit-linear-gradient(left, #f6b7e7, #c39bfc, #fff);
    background-image: -moz-linear-gradient(left, #E0F8F7, #585858, #fff);
    background-image: -ms-linear-gradient(left, #E0F8F7, #585858, #fff);
    background-image: -o-linear-gradient(left, #E0F8F7, #585858, #fff);
    background-image: linear-gradient(#f6b7e7, #c39bfc, #fff);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.titrecat h2::first-letter {
  font-size:40px;
}
.titrecat h2:hover {
  transition:all 1.5s;
  text-shadow:0px 0px 2px #fff;
}
  .fondcate {
    background: #eaeaea;
    height: 100px;
    margin: 0px auto 20px auto;
    padding: 10px;
    width: 780px;
  }
  .hovercat {
    width:740px;
    padding:10px;
    color:black;
    font-family:times new roman;
    font-size:12px;
    height:80px;
    background:rgba(250, 250, 250, 0.5);
    margin:0 auto;
    position:relative;
    opacity:0;
    transition:all 1s;
      text-align: justify;
    overflow: auto;
  }
  .fondcate:hover .hovercat {
    opacity:1;
    transition:all 1s;
  }
.imageuh img {
    position: absolute;
    z-index: 3;
    left: 20px;
    width: 300px;
    height: 150px;
    top: 20px;
}
.description {
    background-repeat: no-repeat;
    background-position: right;
}
  .bordureleft {
    height: 20px;
    width: 330px;
    margin-top: -10px;
    margin-left:-10px;
    border-top: 120px solid #d8ecfc;
    border-right: 200px solid transparent;
    position:absolute;
  }
  .ethop {
    background: #f5bbe2;
    border-radius: 100%;
    height: 50px;
    position: relative;
    width: 50px;
    margin-top: -16px;
      z-index: 9;
  }
  .hoversousfo {
    opacity:0;
    transition:all 800ms;
  color:white;
  }
  .hoversousfo:hover {
    opacity:1;
    transition:all 800ms;
  }
  .ethop:hover .hoversousfo {
    opacity:1;
    transition:all 800ms;
    width:760px;
    height:30px;
    background:#f5bbe2;
    border-radius:30px 30px 30px 30px;
    padding:10px;
  }
.hoversousfo a {
    color: white;
    font-family: times new roman;
    font-size: 9px;
    text-transform: uppercase;
}

Dans la foulée, est-ce qu'on peut me dire à quoi correspond cette partie de mon CSS, s'il vous plaît ? L'image ne me dit absolument rien, elle n'apparaît nulle part donc bon... XD
Code:
#charname {
  --main-color:#DAA520;
   --big-img:url(https://i.imgur.com/f4kTbzH.jpg);
 }
#charname .jmoldaulyr:before {
  content:"Etudier en Australie";
}

Merci pour votre future aide  

Bonne fin d'après-midi, bisous ♥️
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1425
Designer
Voir le profil de l'utilisateurhttp://dark-and-cold.forumactif.com/
Alooors ♥️ !
Non ça n'est pas étrange, c'est juste mon code qui est moche /PAN
Pour éviter que ça change d'un "lastpost" à un autre, il faut simplement remplacer par
Code:

.entourcate {
    margin: 0 auto 50px;
    position: relative;
}

Ca règlera déjà le souci du "lastpost" qui se décalle que sur le premier ><


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Invité
Invité
Coucou toi ♥️

HAN pourquoi tu en fais des moches ? :3

C'est bon, cette fois, ça le fait pour tous ^^

Sinon c'est quoi le truc que j'ai repéré dans mon CSS ?

Bisous !
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1425
Designer
Voir le profil de l'utilisateurhttp://dark-and-cold.forumactif.com/
C'était une petite largeur de fond de catégories qui était embêtante, dans le sens qu'elle décallait le premier "lastpost" uniquement XD !
Cay moche parce que j'ai du mal avec les catégories
Pour le reste par contre, j'avoue ne pas réussi à comprendre comment bouger le bloc qui pose souci ><'


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Invité
Invité
Je l'ai laissé #charmane truc, tu es sûr que ça vient de toi ?

Sinon d'accord :3

Ce n'est pas moche de toute façon, il y avait juste ce détail qui tue :P
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1425
Designer
Voir le profil de l'utilisateurhttp://dark-and-cold.forumactif.com/
Mmh non ça ne vient pas de moi ça par contre xD !
Je pense qu'à mon avis c'est un mauvais placement de la valeur template du "lastpost", au mieux faudrait faire quelques essais ^^


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Invité
Invité
Hum... je crois que c'était là avant ce morceau de CSS.

Je n'ai pas d'espèce de grande maison en guise d'image pour mes catégories, donc je vais le retirer pour voir ce que ça fait :3 (Et là, tout va être déglingué XD)

Petite édition : Bah ça ne fait rien de plus ou de moins finalement ^^'
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2575
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
Coucou :3

Est-ce qu'il reste encore un souci ?

Dans le CSS que tu as mis il y a toute la première partie qui n'a rien à voir avec tes catégories. C'est surement un vieux code que tu as oublié de retirer.

Code:
.jmoldau {
  margin:0 auto;
  width:500px;
  background:var(--main-color);
  position:relative;
  border-collapse:collapse;
  line-height:100%;
  border:0.5px solid #ddd;
}
.jmoldaurp {
  background:#f7f7f7;
  position:relative;
  margin-right:130px;
  padding:50px;
  font-family:Open Sans;
  font-weight:500;
  font-size:10px;
  line-height:15px;
  color:#444;
  text-align:justify;
}
.jmoldaurp b {
  color:var(--main-color);
  font-family:Poppins;
  font-weight:600;
}
.jmoldauh {
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), var(--big-img);
  height:150px;
  filter:grayscale(100%);
  background-size:cover;
  background-position:center center;
  position:relative;
}
.jmoldaulyr {
  position:absolute;
  left:0; top:70px;
  width:500px;
  font-family:Poppins;
  font-weight:600;
  font-size:11px;
  letter-spacing:5px;
  text-transform:uppercase;
  text-align:center;
  line-height:100%;
  color:#fff;
}
.jmoldaul {
  width:50px;
  height:2px;
  background:var(--main-color);
  position:absolute;
  top:95px; left:225px;
  line-height:100%;
}
.jmoldautag {
  width:100px;
  line-height:100%;
  position:absolute;
  bottom:15px; right:15px;
  color:#fff;
  font-family:Poppins;
  font-size:8px;
  font-weight:600;
  text-align:right;
  text-transform:uppercase;
}
.jmoldautag a {
  color:#fff;
  font-family:Poppins;
  font-size:8px;
  font-weight:600;
  text-transform:uppercase;
  text-decoration:none;
  display:block;
}
.jmoldaucred {
  text-align:center;
  letter-spacing:2px;
  line-height:100%;
  margin:0 auto;
}
.jmoldaucred a {
  color:#ccc;
  font-family:Arial;
  font-size:6px;
  text-align:center;
  text-decoration:none;
 }

Au pire tu peux vider ta feuille CSS et remettre les CSS de tes commandes un à un pour être sûr qu'il n'y a pas de vieux bouts de code ici et là.


avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1425
Designer
Voir le profil de l'utilisateurhttp://dark-and-cold.forumactif.com/
Non en fait le souci c'est que le petit truc qui bouge et qui indique le dernier posteur, je pense l'avoir mal placé ><' ! Il est censé être collé au fond bleu forum et s'ouvrir au passage de la souris, mais je n'arrive pas à le déplacer >< !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2575
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
@Myrddin

Ah d'accord. Le problème est au fait au niveau du template. Tu as une div non fermée (entourcat), donc il manque /div avant l'image. Aussi tu dois définir une référence pour positionner ton bloc. Tu as le bloc parent fond-forum qui ne sert à rien là où il est placé, de plus il n'y a aucun CSS lié à cette class. A déplacer donc à l'intérieur de la boucle forumrow, et ça sera notre bloc de référence positionné en relatif.

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>

<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<div class="titrecat">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->

<!-- BEGIN forumrow -->
<div class="fond-forum">
 <div class="lastpost">
 <div class="statsFRM">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</div>
 {catrow.forumrow.LAST_POST}</div>
 <div class="entourcate">
 <div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>
 <div class="autour">
 <div class="fondcate">
 <div class="bordureleft"></div>
 {catrow.forumrow.FORUM_DESC}

 <div class="ethop">
 <div class="hoversousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
 </div>
 </div>
 </div>
 </div>

 <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
</div>
<!-- END forumrow -->

<!-- BEGIN tablefoot -->
<!-- END tablefoot -->

<!-- END catrow -->

C'est un détail mais j'ai enlevé le br et le lien de la police Dancing script qui n'est même pas utilisée dans le CSS. J'ai aussi ajouté la boucle tablefoot. Il y a souvent des bugs si on la met pas, loi bizarre de FA.

Donc pour le CSS tu seras en mesure de cacher le bloc lastpost avec left, vu qu'il est en absolu.

Code:
.fond-forum {
    position: relative;
}

.lastpost {
    left: 230px;
}

La valeur 230px est à titre indicatif, à ajuster donc.


avatar
Invité
Invité
Coucou ♥️

HAN pardon, j'ai mis en résolu parce que je pensais que c'était bon éè

@Reine des Ténèbres donc je remplace ce bout de code dans le Template ? Et je modifie le CSS concerné ?

Je ne sais pas d'où vient ce bout de CSS avec tous ces "jmoldaucred" éè Je vais retirer tout ça en tout cas pour commencer :3

Merci à tous les deux ♥️
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2575
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
Au fait le reste du CSS sera à ajuster donc je te conseille d'attendre Myrddin avant de remplacer quoique ce soit.



avatar
Invité
Invité
Coucou :)

D'accord, merci ♥️
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 4688
Admin Designeuse & Briseuse de nuques
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
Coucou

Essaye d'enlever ceci dans la class autour

Code:
width:750px;



J'aime les activités à risque, comme donner mon avis par exemple.

avatar
Invité
Invité
Coucou Cheshire ♥️

J'oublie donc le CSS et le HTML que Reine a corrigé ? ^^'

Je vais essayer ça après le déjeuner, je te remercie ♥️

Petite édition : ça a l'air de fonctionner :)
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 4688
Admin Designeuse & Briseuse de nuques
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
Justement on avait vu ça avec elle hier soir :)

Après y'a juste le pseudo qui dépasse mais c'est pas problématique !

Du coup j'archive ?



J'aime les activités à risque, comme donner mon avis par exemple.

avatar
Invité
Invité
Ah, d'accord ♥️

Je ne touche pas au reste, c'est sûr ? :3

Oui, c'est bon. Je vais mettre en terminée :p

Je vous remercie les filles ♥️
avatar
Sexe : Féminin
Date d'inscription : 26/12/2013
Messages : 3324
Designer
Voir le profil de l'utilisateur
Super je déplace !


amour hyyh
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum