Liens de nav non cliquables quand il y a un sous-forum

[Yunie16]

Détails techniques

Version du forum : phpBB2
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

Bonjour !

Je viens vous voir pour un petit bug que je ne comprends pas trop sur le forum sur lequel je bosse actuellement.
En effet, quand il y a des sous-forums, les liens de navigations et les boutons new/rep sont impossibles à cliquer (entre la catégorie et les sujets, ceux en bas de page fonctionnent bien). Ils fonctionnent par contre très bien dans les catégories sans sous-forums (même si là aussi le premier lien de navigation est un peu chelou et pas aligné...)

Je vous mets les templates qui je pense pourront aider :
Index_box (pour les catégories) :

Code:

<table width="73%" border="0" cellspacing="0" cellpadding="0" class="boardIndex">
   <tr>
     <td class="BTNBas">
         <!-- BEGIN switch_user_logged_in -->
            <div class="bttbyYU"><a class="gensmall" href="{U_SEARCH_NEW}" title="{L_SEARCH_NEW}">Voir les nouveaux messages</a></div>
            <div class="bttbyYU"><a class="gensmall" href="{U_SEARCH_SELF}" title="{L_SEARCH_SELF}">Voir ses messages</a></div>
         <!-- END switch_user_logged_in -->
            <div class="bttbyYU"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></div>
          </td>
   </tr>
</table>


  <!-- BEGIN catrow --><!-- BEGIN tablehead -->
  <div class="catebyYU">  <div class="titres">{catrow.tablehead.L_FORUM}</div>
 
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <!-- END cathead -->
  <!-- BEGIN forumrow -->

 
  <div class="mdlCAT">
    <div class="blokg">
      <div class="descFRM" style="padding:10px;"><div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div><div class="descFRMtxt"><span>{catrow.forumrow.FORUM_DESC}</span></div>
        <br /><div class="linksFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
      <div class="lastmsg"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
      <div class="lastpost"><span>{catrow.forumrow.LAST_POST}</span></div>
    </div>
    <div class="ava-dernier">
    <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
      </div>
      <div class="statsFRM">
        <div>{catrow.forumrow.TOPICS} sujets</div><br />
        <div>{catrow.forumrow.POSTS} posts</div>
    </div>

  </div>
 
  <!-- END forumrow -->
  <!-- END catrow -->
 
</div>
   
<style> .boardIndex {    margin-left: auto;    margin-right: auto;}
.BTNBas {  display : flex;  justify-content: space-around;}
.bttbyYU {width:auto!important;height:18px;background:var(--degrade);font-size:12px;padding:3px;padding-left:20px;padding-right:20px;border-radius:5px;margin-top:15px;margin-bottom:15px;}
.bttbyYU a {color:var(--white);}
.bttbyYU a:hover {color:var(--white);letter-spacing:1px;}
.statsFRM {text-align: center;width: 118px;height:40px;padding-top:15px;background:var(--dark);float:right;border-radius:5px;margin-right:-118px;margin-top:124px;}
.statsFRM > div {color: var(--yellow);display: inline-block;font-family: 'Overpass Mono', monospace;font-size: 10px;font-weight: 300;font-style:italic;text-transform:uppercase;text-align: center;}
.catebyYU {width:900px;background: transparent;border-radius:10px;margin-left:auto;margin-right:auto;}
.titres {background-image:url('https://www.zupimages.net/up/23/52/9yro.png');padding:5px;margin-top:0px;margin-bottom:20px;border-radius:6px;}
.titres h2 {font-family: 'Overpass Mono', monospace;color: var(--white);font-size: 14px;font-weight:300;text-transform: uppercase;padding-left:10px;}
.titreFRM {padding:20px;margin-top:0px;margin-left:-100px;}
.titreFRM a {font-family: 'Overpass Mono', monospace;color: var(--grey);font-size: 15px;font-weight:100;letter-spacing: 1px;margin-left: 130px;text-decoration: none;text-transform: uppercase;}
.mdlCAT {padding:5px;margin-bottom:-100px;width:900px;transform:translateY(-20px);background:transparent;border-radius:10px;}
.lastmsg {height: 150px;position: absolute;width: 150px;}
.lastmsg img {height:72px;width:150px;border-radius:5px;object-fit:cover;margin-left:475px;margin-top:-170px;}
.blokg {display: inline-block;left: 150px;position: relative;vertical-align: top;width: 250px;}
.lastpost {background: var(--dark);color: var(--white);font-size: 10px;height: 70px;border-radius:5px;text-align: center;width: 150px;position:relative;margin-left:475px;top:-90px;padding-top:20px;}
.lastpost span {margin-top:10px;}
.lastpost span img {height:12px;width:auto;}
.lastpost a {font-family: 'Overpass Mono', monospace;color:var(--white);font-weight:300;text-transform:uppercase;padding-top:10px;}
.descFRM {background:var(--dark);color: var(--white);font-family: calibri;font-size: 12px;height: 150px;width:605px;text-align: justify;margin-top:10px;margin-left:-155px;overflow: auto;border-radius:5px;}
.descFRMtxt {font-family: 'Quicksand', sans-serif;margin-left:30px;margin-right:30px;overflow:auto;padding-right:5px;height:60px;padding-top:10px;margin-top:-10px;}
.descFRMtxt:before {line-height:20px;content:"Informations"; font-family: 'Dancing Script', cursive;font-size:11px;background:var(--degrade);padding:3px;border-radius:5px;color:var(--white);letter-spacing:1px;}
.descFRMtxt span {margin-left:5px;}
.linksFRM {margin-top:-5px;}
.linksFRM a {color: var(--white);display: in-line;font-weight: 300;font-family: Raleway;font-size: 10px;overflow: auto;text-align: justify;text-transform: lowercase;width: 190px;height:30px;margin-top:-5px;}
.linksFRM a:hover {transition:all 800ms;color:var(--yellow);letter-spacing:2px;font-weight:bold;}
.ava-dernier {display: inline-block;height: 150px;width: 150px;float:right;border-radius:5px;margin-right:-30px;margin-top:10px;}
.ava-dernier img {border-radius:6px;}
    </style>

Topics_list_box (pour le listing des sujets du coup) :

Code:

<!-- BEGIN topics_list_box -->
   <!-- BEGIN row -->
      <!-- BEGIN header_table -->
         <!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
         <!-- END multi_selection -->
<!--BEGIN bouttons -->
 
 
<!-- BEGIN pagination -->
   <span class="gensmall">
             {PAGINATION}
     </span>
<!-- END pagination -->
                 <ul style="list-style:none;"><li style="background-color:var(--degrade);"><dt style="font-family: 'Overpass Mono', monospace!important;background-color:var(--degrade)!important;  text-transform: uppercase !important;  font-weight: 300 !important;  color: #fff !important;    border-radius: 10px;">
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  Liste des sujets
                                          </dt></li></ul>
<!-- END header_table -->
        <!-- BEGIN header_row -->
        <!-- END header_row -->
 <table class="forumline" border="0" cellspacing="1" cellpadding="0" style="margin:auto;"><tr><td>
      <!-- BEGIN topic -->
        {topics_list_box.row.END_TABLE_STICKY}
 
      <div class="liste_sujets">                 
                     <!-- BEGIN avatar -->
                  <div class="sujet-ava">
                             {topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
                     </div>
                  <!-- END avatar -->
                 
                     <div class="sujet-titre">
                    <div class="titre"><div class="tititre"><a class="liste_sujets_topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                                {topics_list_box.row.TOPIC_TITLE}
                      </a></div>
                      <br /><div class="pagination-sujet">
    {topics_list_box.row.GOTO_PAGE_NEW}
    </div>
                      <div class="sujet-float">{topics_list_box.row.TOPIC_AUTHOR}<br /><span style="font-family: 'Overpass Mono', monospace;font-size:10px;font-weight:300px;text-transform:uppercase;color:var(--yellow);font-style:italic;">{topics_list_box.row.REPLIES} Réponses</span></div>
                    </div>
                  </div>
                  <div class="liste-infos">
                    <span style="font-size:10px;">{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span><br />
                    {topics_list_box.row.LAST_POST_TIME}</div>
                  <img class="new-old" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
                     </div>
 
      <!-- END topic -->
 
        <!-- BEGIN no_topics -->
      <div class="liste_sujet_pas_message">
                     {topics_list_box.row.L_NO_TOPICS}
        </div>
      <!-- END no_topics -->
 
        <!-- BEGIN bottom -->
      <!-- END bottom -->
 
        <!-- BEGIN footer_table -->
      <!-- END footer_table -->
 
        <!-- BEGIN spacer -->
        <!-- END spacer -->
     <!-- END row -->
  <!-- END topics_list_box -->
  </td></tr></table>
  <style>.bttNYU {margin-left:785px;width:140px;height:25px;font-weight:300;text-transform:uppercase;background:var(--degrade);font-size:12px;padding-top:10px;padding-left:20px;padding-right:20px;border-radius:5px;}
.bttNYU a {color:var(--white);}
.bttNYU a:hover {color:var(--white);}
.liste_sujets{width:900px;margin:auto;background:transparent;}
.sujet-titre {width:620px;height:45px;background:var(--dark);color:var(--white);border-radius:10px;padding-top:15px;margin-left:0px;}
.titre {height:30px;margin-left:30px;}
.tititre {width:375px!important;overflow:hidden;height:15px;}
.titre a {font-family: 'Overpass Mono', monospace;color:var(--white);font-size:12px;}
.sujet-ava img {width: 60px;height: 60px;object-fit: cover;float: right;margin: 0 2% 0 0;margin-right:215px;border-radius:6px;}
.liste-infos {font-family: 'Overpass Mono', monospace;height:45px;width:150px;padding-top:15px;background:var(--dark);color:var(--white);text-align:center;border-radius:10px;font-size:9px;float:right;margin-top:-60px;margin-right:60px;}
.liste-infos img {margin-top:0;width:12px;height:auto;}
.new-old {height:60px;width:60px;border-radius:10px;float:right;margin-right:-5px;margin-top:-60px;} 
.pagination-sujet{font-family: 'Overpass Mono', monospace;font-weight: 700;  color: var(--yellow);  font-size: 9px;    border-radius: 10px;margin-top:-15px;}
.pagination-sujet a {color:var(--yellow);}
.sujet-float {margin-left:450px;color:var(--white);text-align:center;margin-top:-35px;height:30px;font-style:normal;}
.sujet-float span {}
.liste_sujet_pas_message {margin-bottom:10px;background: var(--dark);box-sizing: border-box;font-size: 12px;text-transform:uppercase;font-family: 'Overpass Mono', monospace;margin: auto;padding: 2%;border-radius:10px;width: 900px;}
  </style>

Merci d'avance

[MlleAlys]

Bonjour,
Le problème vient a priori de la marge négative que vous avez posée sur l'élément .mdlCAT : les liens et boutons se retrouvent en dessous de cet élément, qui bien que transparent, empêche donc de les cliquer.
Vous avez d'ailleurs le même souci sur l'index pour les boutons "sujets actifs du jour", connexion rapide, etc.

Mieux vaudrait retravailler le codage des catégories et la position des différents éléments, notamment les positions relatives et marges négatives trop importantes, pour éviter d'avoir cet espace en premier lieu.

Pourriez-vous partager votre css s'il vous plait ? (edit : pardon, je n'avais pas vu qu'il était dans le template)
(l'image de la barre de bateau correspond bien à l'image nouveau / pas de nouveau message, et l'avatar du dernier posteur doit se positionner à sa gauche au dessus du bloc dernier message, c'est bien ça ?)


EDIT : Vous pouvez tester ce template, qui devrait avoir l'affichage voulu, avec cependant sans doutes quelques petits réglages possibles à faire. J'ai retiré toutes les marges négatives et positions relatives, et je suis passée par un positionnement flex.
J'ai également corrigé une erreur dans le template, et modifié quelques blocs et classes pour plus de cohérence.

Code:

<table width="73%" border="0" cellspacing="0" cellpadding="0" class="boardIndex">
  <tr>
    <td class="BTNBas">
        <!-- BEGIN switch_user_logged_in -->
            <div class="bttbyYU"><a class="gensmall" href="{U_SEARCH_NEW}" title="{L_SEARCH_NEW}">Voir les nouveaux messages</a></div>
            <div class="bttbyYU"><a class="gensmall" href="{U_SEARCH_SELF}" title="{L_SEARCH_SELF}">Voir ses messages</a></div>
        <!-- END switch_user_logged_in -->
            <div class="bttbyYU"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></div>
          </td>
  </tr>
</table>


<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="catebyYU">
  <div class="titres">{catrow.tablehead.L_FORUM}</div>
  <div class="mdlCAT">
    <!-- END tablehead -->
   
    <!-- BEGIN cathead -->
    <!-- END cathead -->
   
   
    <!-- BEGIN forumrow -->
    <div class="blocFRM">
     
      <div class="descFRM" style="padding:10px;">
        <div class="titreFRM">
          <a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a>
        </div>
        <div class="descFRMtxt">
          <span>{catrow.forumrow.FORUM_DESC}</span>
        </div>
        <br />
        <div class="linksFRM">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
      </div>
     
      <div class="ava-dernier">
        <!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar -->
      </div>
     
      <div class="lastpost">
        <span>{catrow.forumrow.LAST_POST}</span>
      </div>
     
      <div class="newimg">
        <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
      </div>
     
      <div class="statsFRM">
        <div>{catrow.forumrow.TOPICS} sujets</div>
        <div>{catrow.forumrow.POSTS} posts</div>
      </div>
   
   
    </div>
    <!-- END forumrow -->
   
   
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
   
    <!-- BEGIN tablefoot -->
  </div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
 
 
<style> .boardIndex {    margin-left: auto;    margin-right: auto;}
.BTNBas {  display : flex;  justify-content: space-around;}
.bttbyYU {width:auto!important;height:18px;background:var(--degrade);font-size:12px;padding:3px;padding-left:20px;padding-right:20px;border-radius:5px;margin-top:15px;margin-bottom:15px;}
.bttbyYU a {color:var(--white);}
.bttbyYU a:hover {color:var(--white);letter-spacing:1px;}
.catebyYU { width: 900px;}
.blocFRM { display: flex; flex-direction: column; flex-wrap: wrap; align-content: stretch; justify-content: flex-end; align-items: stretch; height: 170px; margin: 10px 0; gap: 5px;}
.statsFRM {text-align: center;width: 118px;height:40px;padding-top:15px;background:var(--dark);border-radius:5px;}
.statsFRM > div {color: var(--yellow);font-family: 'Overpass Mono', monospace;font-size: 10px;font-weight: 300;font-style:italic;text-transform:uppercase;text-align: center;}
.titres {background-image:url('https://www.zupimages.net/up/23/52/9yro.png'); border-radius:6px; padding: 5px;}
.titres h2 {font-family: 'Overpass Mono', monospace;color: var(--white);font-size: 14px;font-weight:300;text-transform: uppercase;padding-left:10px;}
.titreFRM {padding:20px;}
.titreFRM a {font-family: 'Overpass Mono', monospace;color: var(--grey);font-size: 15px;font-weight:100;letter-spacing: 1px;margin-left:30px;text-decoration: none;text-transform: uppercase;}
.ava-dernier {width: 150px; height:75px;}
.ava-dernier img {height:100%;width:100%;border-radius:5px;object-fit:cover;}
.lastpost {background: var(--dark);color: var(--white);font-size: 10px;height: 70px;border-radius:5px;text-align: center;width: 150px;padding-top:20px;}
.lastpost span img {height:12px;}
.lastpost a {font-family: 'Overpass Mono', monospace;color:var(--white);font-weight:300;text-transform:uppercase;padding-top:10px;}
.descFRM {background:var(--dark);color: var(--white);font-family: calibri;font-size: 12px;height: 150px;width:605px;text-align: justify; overflow: auto;border-radius:5px;}
.descFRMtxt {font-family: 'Quicksand', sans-serif;margin-left:30px;margin-right:30px;overflow:auto;padding-right:5px;height:60px;padding-top:10px;margin-top:-10px;}
.descFRMtxt:before {line-height:20px;content:"Informations"; font-family: 'Dancing Script', cursive;font-size:11px;background:var(--degrade);padding:3px;border-radius:5px;color:var(--white);letter-spacing:1px;}
.descFRMtxt span {margin-left:5px;}
.linksFRM {margin-top:-5px;}
.linksFRM a {color: var(--white);display: in-line;font-weight: 300;font-family: Raleway;font-size: 10px;overflow: auto;text-align: justify;text-transform: lowercase;width: 190px;height:30px;margin-top:-5px;}
.linksFRM a:hover {transition:all 800ms;color:var(--yellow);letter-spacing:2px;font-weight:bold;}
.newimg img { width: 100%; height: 100%; object-fit: contain;}
    </style>


[Yunie16]

Bonjour !

Merci pour la réponse **
(ça se voit que c'est la première fois que je fais des gros codes ? ^^')

Du coup j'ai modifié le template et les liens sont de nouveau cliquables, mais toute la zone des sous-forums est décalée du coup :

Spoiler:

Fin je sais même pas ce qui devrait bouger, j'ai l'impression que la catégorie est trop à gauche, la navigation trop à droite, le bouton nouveau sujet aussi (cette ligne là l'était déjà par contre) et du coup j'ose plus trop toucher /sort

Et pour la navigation je ne sais pas trop ce qui causerait le décalage entre le premier niveau et la suite ? Sachant que c'est le même code qu'en bas de page et que là il n'y a pas de problème

[MlleAlys]

C'est en essayant qu'on apprend !  
(de façon générale, vous pouvez garder en tête que les marges négatives ne sont PAS vos amies !   )

Concernant le décalage des liens du fil d'Ariane, c'est parce que les liens suivants sont encadré d'une balise titre h1, qui du coup leur applique une marge.
Pour retirer cette marge, vous pouvez ajouter le code css suivant :

Code:

.nav-liens-top h1 {
  display: inline;
  margin: 0;
}

Pour ce qui est de la liste des sujets, il y a de gros problèmes de structure à corriger (des balises spécifiques aux tableaux sans tableau, mélangées à des listes, des balises fermées non ouvertes, etc...)

Remplacez votre template par celui-ci :

Code:

<!-- BEGIN topics_list_box -->
   <!-- BEGIN row -->
      <!-- BEGIN header_table -->
         <!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
  <!-- END multi_selection -->
  
  
  
  
  <div style="font-family:'Overpass Mono',monospace; background:var(--degrade); text-transform:uppercase; font-weight: 300; color: #fff; border-radius: 10px;">
    Liste des sujets
  </div>
  
  
  <!-- BEGIN pagination -->
  <span class="gensmall">
    {PAGINATION}
  </span>
  <!-- END pagination -->
  
  <!-- BEGIN multi_selection -->
  <div class="SUJETS-multiselection">
    <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
  </div>
  <!-- END multi_selection -->
  
  
  <div class="liste_sujets">
    
    <!-- END header_table -->
    
    <!-- BEGIN header_row -->
    <!-- END header_row -->
    
    
    
    
    <!-- BEGIN topic -->
    <div id="SUJETS-sticky">
      <table style="width:100%">
        {topics_list_box.row.END_TABLE_STICKY}
      </table>
    </div>
    <div class="sujet-bloc">
     
      <!-- BEGIN single_selection -->
      <div class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">
        <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
      </div>
      <!-- END single_selection -->
      
      
      <div class="sujet-titre">
        <div class="titre">
          <div class="tititre">
            <a class="liste_sujets_topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
              {topics_list_box.row.TOPIC_TITLE}
            </a>
          </div>
          <br />
          <div class="pagination-sujet">
            {topics_list_box.row.GOTO_PAGE_NEW}
          </div>
          <div class="sujet-float">
            {topics_list_box.row.TOPIC_AUTHOR}
            <br/>
            <span style="font-family: 'Overpass Mono', monospace;font-size:10px;font-weight:300px;text-transform:uppercase;color:var(--yellow);font-style:italic;">
              {topics_list_box.row.REPLIES} Réponses
            </span>
          </div>
        </div>
      </div>
      
      <!-- BEGIN avatar -->
      <div class="sujet-ava">
        {topics_list_box.row.topic.avatar.LAST_POST_AVATAR}
      </div>
      <!-- END avatar -->
      
      <div class="liste-infos">
        <span style="font-size:10px;">
          {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
        </span>
        <br />
        {topics_list_box.row.LAST_POST_TIME}
      </div>
      
      <img class="new-old" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
    
    
    </div>
    <!-- END topic -->
    
    
    <!-- BEGIN no_topics -->
    <div class="liste_sujet_pas_message">
      {topics_list_box.row.L_NO_TOPICS}
    </div>
    <!-- END no_topics -->
    
    
    <!-- BEGIN bottom -->
    <!-- END bottom -->
    
    <!-- BEGIN footer_table -->
  </div>
  <!-- END footer_table -->
  
  <!-- BEGIN spacer -->
  <!-- END spacer -->
  <!-- END row -->
  <!-- END topics_list_box -->
  
  
  
  <style>
 .bttNYU {margin-left:785px;width:140px;height:25px;font-weight:300;text-transform:uppercase;background:var(--degrade);font-size:12px;padding-top:10px;padding-left:20px;padding-right:20px;border-radius:5px;}
.bttNYU a {color:var(--white);}
.bttNYU a:hover {color:var(--white);}
.liste_sujets{width:900px;margin:auto;}
.sujet-bloc { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; margin: 5px 0; }
.sujet-titre {width:620px;height:45px;background:var(--dark);color:var(--white);border-radius:10px;padding-top:15px;}
.titre {height:30px;margin-left:30px;}
.tititre {width:375px!important;overflow:hidden;height:15px;}
.titre a {font-family: 'Overpass Mono', monospace;color:var(--white);font-size:12px;}
.sujet-ava img {width: 60px;height: 60px;object-fit: cover;border-radius:6px;}
.liste-infos {font-family: 'Overpass Mono', monospace;height:45px;width:150px;padding-top:15px;background:var(--dark);color:var(--white);text-align:center;border-radius:10px;font-size:9px;}
.liste-infos img {margin-top:0;width:12px;height:auto;}
.new-old {height:60px;width:60px;border-radius:10px;}
.pagination-sujet{font-family: 'Overpass Mono', monospace;font-weight: 700;  color: var(--yellow);  font-size: 9px;    border-radius: 10px;margin-top:-15px;}
.pagination-sujet a {color:var(--yellow);}
.sujet-float {margin-left:450px;color:var(--white);text-align:center;margin-top:-35px;height:30px;font-style:normal;}
.sujet-float span {}
.liste_sujet_pas_message {margin-bottom:10px;background: var(--dark);box-sizing: border-box;font-size: 12px;text-transform:uppercase;font-family: 'Overpass Mono', monospace;margin: auto;padding: 2%;border-radius:10px;}
  </style>

Il y aura sans doute quelques réglages à faire, mais au moins la structure est corrigée.

Si le décalage entre les catégories et les sujets est toujours présent, pourriez-vous laissez ces deux nouveaux templates en place sur votre forum pour que je puisse inspecter ? Il n'y en a pas chez moi.

[Yunie16]

Bonsoir !

Désolée pour le délai de réponse, j'ai été très prise au travail, je me replonge seulement dans cette problématique...
Pour le fait que vous ne voyiez pas le décalage, c'est ma faute, je n'avais pas validé le template TT Maintenant vous devriez le voir !
Pour le fil d'Ariane, ça m'a l'air tout bon avec le bout de css merci !

[MlleAlys]

Ah oui pardon, j'ai oublié la propriété margin: auto; à ajouter au css de l'élément .catebyYU !
Les catégories seront alors centrées, comme la liste des sujets ^^

[Yunie16]

C'est tout parfait maintenant ! Merci pour le temps que vous avez consacré à ma demande