avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 1174
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 ><
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 1174
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 ><'
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 1174
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 ^^
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 2362
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 : 1174
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 >< !
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2362
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
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 2362
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
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
Coucou :)

D'accord, merci ♥️
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 4548
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;


👀     🐸     👀     🐸     👀     🐸     👀

Une activité risquée que j'adore : donner mon avis.

👀     🐸     👀     🐸     👀     🐸     👀
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 4548
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 ?


👀     🐸     👀     🐸     👀     🐸     👀

Une activité risquée que j'adore : donner mon avis.

👀     🐸     👀     🐸     👀     🐸     👀
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 6162
Chasseuse de bonbons
Voir le profil de l'utilisateur
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 : 3214
Designer
Voir le profil de l'utilisateur
Super je déplace !





la plus belle c'est aed & la plus glamour c'est eskimo
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum