Mes catégories dépassent de leur conteneur

[KlytsianWay]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Opera, Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 12/09
Lien du forum : https://nox-parabellum.forumactif.com

Description du problème

Bonjour !

J'ai essayé d'installer sur mon forum un code me permettant d'organiser mes catégories en onglets cliquables sous ma PA.
Pour se faire, chaque catégorie est sensée tenir dans un "conteneur" prévu à cet effet dans le code. Et c'est effectivement le cas en ce qui concerne la première. Mais dès que je clique sur n'importe laquelle des trois autres, elle se retrouve en-dessous du conteneur, laissant un espace vide où elle devrait être en réalité, comme montré sur mon screenshot.

J'ai modifié mon CSS et mon index_box. Voici le contenu de chacun :

index_box:

CSS:

Je dois avouer ne pas avoir créé ça moi-même mais avoir repris un code trouvé sur un autre forum, d'où le fait que je n'ai aucune idée de ce qui cloche :/

Merci par avance pour votre aide !

[Toryudo]

Bonjour,

Ce qui pose problème, c'est l'ordre de la fermeture des </div> à cause des <!-- END tablefoot --> et autres <!-- END catrow --> qui se sont emmêlés dans votre template. Du coup, seule la première catégorie se retrouve dans le conteneur... les autres se retrouvent à l'extérieur, juste derrière.

Code:

$('#conteneur_categories').css('min-height', $('.categorie:eq(' + index + ')').outerHeight());

Le code JavaScript suivant indique que le conteneur doit changer de taille en fonction de la catégorie qu'il affiche... Du coup, la première catégorie étant bien dans ce conteneur, elle fonctionne, mais dès qu'il faut afficher les autres, il commence par afficher le conteneur vide avec la taille dr la catégorie désormais visible (2ème ou 3ème), puis la catégorie elle-même qui ne se trouve pas dans le conteneur à cause de la gestion des div fermants.

Voici le template corrigé, ça devrait fonctionner avec ça :

Code:

<div class="boutons_categories">
      <!-- BEGIN switch_user_logged_in -->
      <a id="nouveauxmess" href="{U_SEARCH_NEW}">
                    {L_SEARCH_NEW}
        </a>
 
        <a id="mesmessages" href="{U_SEARCH_SELF}">
                    {L_SEARCH_SELF}
        </a>
    <!-- END switch_user_logged_in -->
 
    <a id="sansrep" href="{U_SEARCH_UNANSWERED}">
            {L_SEARCH_UNANSWERED}
    </a>
</div>
 
<script type="text/javascript">document.getElementById('nouveauxmess').innerHTML=document.getElementById('nouveauxmess').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Nouveaux messages");</script>
<script type="text/javascript">document.getElementById('mesmessages').innerHTML=document.getElementById('mesmessages').innerHTML.replace(/Voir ses messages/,"Mes messages");</script>
<script type="text/javascript">document.getElementById('sansrep').innerHTML=document.getElementById('sansrep').innerHTML.replace(/Voir les messages sans réponses/,"Sans réponse");</script>

<div id="categories">
   <div id="conteneur_onglets">
      <div class="ongleto">
         <img src="https://i.imgur.com/g5jZLSk.png" alt="Département de l'immigration HP" />
      </div>
      <div class="ongleto">
         <img src="https://i.imgur.com/P9OygMx.png" alt="Poudlard HP" />
      </div>
      <div class="ongleto">
         <img src="https://i.imgur.com/GCdSWxT.png" alt="Monde des sorciers HP" />
      </div>
      <div class="ongleto">
         <img src="https://i.imgur.com/zZQz2G7.png" alt="Chaudron baveur HP" />
      </div>
   </div>

   <div id="conteneur_categories">
   <!-- BEGIN catrow -->
           <!-- BEGIN tablehead -->
      <div class="categorie">
         <div class="secondarytitle"><br />{catrow.tablehead.L_FORUM}</div>
      <!-- END tablehead -->
           
         <!-- BEGIN forumrow -->
         <div class="forum">
            <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            <img class="statut_forum" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            <div class="bloc_forum_dernier"></div>
            <div class="forum_dernier">
               <!-- BEGIN avatar -->
               <div class="avatar_dernier">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
               <!-- END avatar -->
               {catrow.forumrow.LAST_POST}
            </div>
            <div class="forum_desc">{catrow.forumrow.FORUM_DESC}</div> 
            <div class="sous_forum"> 
               <span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
               <script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
            </div>
            <div class="clear"></div>
            <div class="sujets_messages">{catrow.forumrow.POSTS} messages &amp; {catrow.forumrow.TOPICS} sujets</div>
         </div>
         <!-- END forumrow -->
                 
      <!-- BEGIN tablefoot -->
      </div>
      <!-- END tablefoot -->
   <!-- END catrow -->
   </div>
</div>


Je n'ai pas pu tester à fond, mais sur mon forum test, toutes les catégories se retrouvent bien dans le conteneur avec ça, plus de raison que le script pète un câble !

[KlytsianWay]

Ca a l'air de parfaitement fonctionner ! Merci beaucoup pour cette intervention rapide !

Je vais de ce pas fermer le sujet, tout me semble résolu ^^