Index_box : affichage cassé pour plusieurs catégories

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Index_box : affichage cassé pour plusieurs catégories

Message par Yunie16 Jeu 14 Mar 2024 - 21:27

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 ♥
Yunie16

Yunie16
***

Messages : 163
Inscrit(e) le : 22/08/2023

https://second-chances.forumactif.com/
Yunie16 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Index_box : affichage cassé pour plusieurs catégories

Message par MlleAlys Jeu 14 Mar 2024 - 22:38

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>


MlleAlys

MlleAlys
Membre actif

Messages : 5856
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Index_box : affichage cassé pour plusieurs catégories

Message par Yunie16 Ven 15 Mar 2024 - 13:11

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 **
Yunie16

Yunie16
***

Messages : 163
Inscrit(e) le : 22/08/2023

https://second-chances.forumactif.com/
Yunie16 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum