Index_box : affichage cassé pour plusieurs catégories

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonsoir,

J'étais fière de mes jolies catégories... jusqu'à ce que j'en crée une deuxième et que je voie avec horreur que l'affichage de la deuxième est totalement foireux, comme démontré sur la capture d'écran ;;

J'ai évidemment tenté de chipoter à mon code pour réparer, en comparant avec les codes de mes deux autres forums pour voir si j'ai pas supprimé une balise mais rien ne m'a sauté aux yeux. Et je ne pense pas avoir oublié de fermer une div quelque part ^^'

J'ai pensé aussi que c'était ma passion des margins négatifs qui me jouait un mauvais tour donc j'ai modifié le code pour mettre tout dans un tableau mais c'est pas mieux ;; Du coup je fais appel à vous pour voir si vous auriez une idée.

Voici mon template du coup, avec le CSS tout en bas :

Code:

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="YUcat">
                  <div class="cattitre" data-id="{catrow.tablehead.ID}"><h2>{catrow.tablehead.L_FORUM}</h2>
                  </div>
         <div class="cat">
   <!-- END tablehead -->
<!-- BEGIN cathead -->
    <!-- END cathead -->
   <!-- BEGIN forumrow -->
                          <div class="catname" id="{catrow.forumrow.FORUM_NAME}"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
                      <table width="100%"><tr><td>    <!-- BEGIN avatar -->
                          <div class="catava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                        <!-- END avatar --></td>
                          <td><div class="catlast">
                            <!-- BEGIN switch_topic_title -->
                            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}" style="text-transform:uppercase;">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
                            <!-- END switch_topic_title -->
                            <br />{catrow.forumrow.USER_LAST_POST}
                            </div></td>
                          <td><div class="catdesc"><p>{catrow.forumrow.FORUM_DESC}</p>
                            </div></td>
                          <td><div class="cathover"><div class="catimg">{catrow.forumrow.FORUM_DESC}<div class="catsfrm"><div class="retvirg">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                            </div>
                            </div>
                          </div></td></tr></table>
                          <div class="catnew"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/></div>
   <!-- END forumrow -->
<!-- BEGIN catfoot -->
    <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
                  </div>   
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<script type="text/javascript">$('.retvirg').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /><br /> "));});</script>

<style>.boardIndex {    margin-left: auto;    margin-right: auto;}
.YUcat{width:900px;margin:auto;}
.cattitre{width:100%;height:35px;background-color: var(--couleur_trois);font-size:10px;color:var(--white)!important;border-radius:10px;letter-spacing:3px;font-weight:300;text-align:center;padding-top:5px;margin-top:7px;text-transform:uppercase;}
.cattitre h2{color:white;font-family: "Julius Sans One", sans-serif;}
.cattitre:hover{letter-spacing:5px;}
.cat{width:98%;height:150px;background:var(--fond-cat);border-radius:10px;display:block;border:3px solid var(--white);margin-top:10px;margin-left:10px;}
.catname{position:absolute;width:20px;height:130px;border-radius:10px;background:var(--couleur_trois);writing-mode: vertical-lr;text-orientation:mixed;text-align:center;margin-top:7px;margin-left:-10px;}
.catname a{color:white;}
.catname a:hover {color:var(--white);letter-spacing:1px;}
.catava{width:110px;height110px;}
.catava img{width:110px;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--couleur_trois);padding:5px;margin-left:30px;margin-top:-20px}
.catlast{width:140px;height:80px;text-align:center;color:var(--couleur_texte);margin-left:50px;}
.catlast a{color:var(--couleur-texte);}
.catdesc{width:410px;height:160px;overflow:visible;}
.catdesc p{width:410px;height:130px;background:var(--less-white);color:var(--couleur_texte);font-size:11px;border-radius:5px;margin-left:20px;margin-top:5px;padding:10px;overflow:auto;text-align:justify;}
.catdesc p::before {content:'informations';font-family: "Marck Script", cursive;font-size:15px;font-weight:300;background:var(--degrade1);border-radius:5px;padding-left:10px;padding-right:10px;margin-right:5px;color:white;line-height:10px;}
.catdesc img {display:none;}
.cathover{width:50%;position:relative;}
.catimg {font-size:0px!important;}
.cathover:hover .catsfrm {opacity:1;}
.cathover:hover .catimg img {opacity:0}
.catimg img {height:150px;width:130px;border-radius:0px 10px 10px 0px;object-fit:cover;margin-left:32px;margin-top:-25px;}
.catsfrm {position:absolute;opacity:0; text-align: justify;width:120px;   background: var(--fond-cat);font-size: 12px; line-height:10px;text-transform: uppercase;font-weight: 300;margin-top:-15px;margin-left:32px;overflow:auto;}
.catsfrm a{color:var(--couleur_texte);margin-top:5px;}
.catsfrm a:hover {color:var(--couleur_deux);letter-spacing:2px;}
.catnew{height:20px;width:20px;position:absolute;margin-top:-200px;margin-left:160px;}
.catnew img{height:20px;width:20px;border-radius:30px;object-fit:cover;}
</style>

(pour des questions d'esthétique et continuer à coder tranquillement mon forum, j'ai supprimé les catégories foireuses en mode Yunie-autruche donc ne les cherchez pas sur le forum /sort)

Merci d'avance

[MlleAlys]

Bonjour,
Vous avez imposé une hauteur de 150px au bloc ".cat", alors que ce bloc contient selon votre template tous les forums de la catégorie... Le premier forum est bien dedans, mais tous les suivants débordent et donc s'empilent en dessous des 150px.
Je suppose que puisque vous avez indiqué 150px, ce bloc est sensé contenir non pas l'ensemble de la catégorie mais bien être répété pour chaque forum de celle-ci.
En corrigeant le template en ce sens en déplaçant le bloc ".cat" dans "forumrow" plutôt que dans "tablehead", ça devrait mieux fonctionner (j'ai également renommé ce bloc "catforum", et corrigé un code css de redimensionnement des images dans les sous-forums) :

Code:

<!-- BEGIN catrow -->
 
<!-- BEGIN tablehead -->
<div class="YUcat">
  <div class="cattitre" data-id="{catrow.tablehead.ID}">
    {catrow.tablehead.L_FORUM}
  </div>
 
  <!-- END tablehead -->
   
  <!-- BEGIN forumrow -->
  <div class="catforum">
    <div class="catname" id="{catrow.forumrow.FORUM_NAME}">
      <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>

    <table width="100%">
      <tr>
        <td>
          <!-- BEGIN avatar -->
          <div class="catava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
          <!-- END avatar -->
        </td>
        <td>
          <div class="catlast">
            <!-- BEGIN switch_topic_title -->
            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}" style="text-transform:uppercase;">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
            <!-- END switch_topic_title -->
            <br />{catrow.forumrow.USER_LAST_POST}
          </div>
        </td>
        <td>
          <div class="catdesc">
            <p>{catrow.forumrow.FORUM_DESC}</p>
          </div>
        </td>
        <td>
          <div class="cathover">
            <div class="catimg">{catrow.forumrow.FORUM_DESC}
              <div class="catsfrm">
                <div class="retvirg">
                  {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <div class="catnew">
      <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
    </div>
  </div>
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
</div>
<!-- END tablefoot -->

<!-- END catrow -->
 

<script type="text/javascript">$('.retvirg').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /><br /> "));});</script>
 
<style>.boardIndex {    margin-left: auto;    margin-right: auto;}
.YUcat{width:900px;margin:auto;}
.cattitre{width:100%;height:35px;background-color: var(--couleur_trois);font-size:10px;color:var(--white)!important;border-radius:10px;letter-spacing:3px;font-weight:300;text-align:center;padding-top:5px;margin-top:7px;text-transform:uppercase;}
.cattitre h2{color:white;font-family: "Julius Sans One", sans-serif;}
.cattitre:hover{letter-spacing:5px;}
.catforum{width:98%;height:150px;background:var(--fond-cat);border-radius:10px;display:block;border:3px solid var(--white);margin-top:10px;margin-left:10px;}
.catname{position:absolute;width:20px;height:130px;border-radius:10px;background:var(--couleur_trois);writing-mode: vertical-lr;text-orientation:mixed;text-align:center;margin-top:7px;margin-left:-10px;}
.catname a{color:white;}
.catname a:hover {color:var(--white);letter-spacing:1px;}
.catava{width:110px;height110px;}
.catava img{width:110px;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--couleur_trois);padding:5px;margin-left:30px;margin-top:-20px}
.catlast{width:140px;height:80px;text-align:center;color:var(--couleur_texte);margin-left:50px;}
.catlast a{color:var(--couleur-texte);}
.catdesc{width:410px;height:160px;overflow:visible;}
.catdesc p{width:410px;height:130px;background:var(--less-white);color:var(--couleur_texte);font-size:11px;border-radius:5px;margin-left:20px;margin-top:5px;padding:10px;overflow:auto;text-align:justify;}
.catdesc p::before {content:'informations';font-family: "Marck Script", cursive;font-size:15px;font-weight:300;background:var(--degrade1);border-radius:5px;padding-left:10px;padding-right:10px;margin-right:5px;color:white;line-height:10px;}
.catdesc img {display:none;}
.cathover{width:50%;position:relative;}
.catimg {font-size:0px!important;}
.cathover:hover .catsfrm {opacity:1;}
.cathover:hover .catimg>img {opacity:0}
.catimg>img {height:150px;width:130px;border-radius:0px 10px 10px 0px;object-fit:cover;margin-left:32px;margin-top:-25px;}
.catsfrm {position:absolute;opacity:0; text-align: justify;width:120px;  background: var(--fond-cat);font-size: 12px; line-height:10px;text-transform: uppercase;font-weight: 300;margin-top:-15px;margin-left:32px;overflow:auto;}
.catsfrm a{color:var(--couleur_texte);margin-top:5px;}
.catsfrm a:hover {color:var(--couleur_deux);letter-spacing:2px;}
.catnew{height:20px;width:20px;position:absolute;margin-top:-200px;margin-left:160px;}
.catnew img{height:20px;width:20px;border-radius:30px;object-fit:cover;}
  :root {
  --fond-cat : white;
  --less-white : lightgrey;
  --couleur_trois : orange;
  }
</style>

[Yunie16]

Bonjour !

Oh super merci ! Cette erreur de débutante ;; Merci pour les explications et la correction, ça m'aidera à m'améliorer pour les prochaines fois **