Gros problème avec les catégories

[Teurancher]

Détails techniques

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

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://imaeke.tropfun.net/

Description du problème

Bonsoir,
Le problème est bien visible sur l'image; toutes les catégories se superposent au lieu de simplement se placer avant les sous-forums de chaque catégorie.

INDEX_BOX:

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 --> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

        <!-- END tablehead -->
        <!-- BEGIN cathead -->
        <tr><br/><span class="cattitle">
          <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}"><div class="testouille2">{catrow.cathead.CAT_TITLE}</div></a>
        </span>
        <!-- BEGIN inc -->
        <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
       
        </h{catrow.cathead.LEVEL}>
        </td>
        <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
        </tr>
        <!-- END cathead -->
        <!-- BEGIN forumrow -->
        <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
        <!-- END inc -->
        <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
          <div class="pouhein"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
        </td>
        <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
          <span class="forumlink">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="foreum2">{catrow.forumrow.FORUM_NAME}</div></a><br/>
          </span>
        <h{catrow.forumrow.LEVEL} class="hierarchy">
          <div class="numb">{catrow.forumrow.POSTS} messages <br/>{catrow.forumrow.TOPICS} sujets</div>
        </h{catrow.forumrow.LEVEL}>
          <span class="genmed"><div class="descri">{catrow.forumrow.FORUM_DESC}</div></span>
        <span class="gensmall">
        <!-- BEGIN switch_moderators_links -->
        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
        <!-- END switch_moderators_links -->
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
        </td>
               
        <td class="row3 over" align="center" valign="middle" height="50">
       
          <br/><br/><span class="gensmall"><div class="tede">{catrow.forumrow.LAST_POST}</div></span>
        </td>
        </tr>
        <!-- END forumrow -->
        <!-- BEGIN catfoot -->
        <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
        </tr>
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

D'avance merci.

[MlleAlys]

Bonjour,
Il y a quelques erreurs dans le template, des balises <td> manquantes ou ce genre de chose, attention à bien concerver la structure du tableau pour que l'affichage se fasse correctement !

Note : les balises <h{catrow.cathead.LEVEL} ...> ... </h{catrow.cathead.LEVEL}> correspondent aux titres importants de la page web :
h1 est le titre principal de la page
h2 deuxième titre principal,
h3 sous-titre,
etc...
Cela permet par exemple aux navigateurs de mieux repérer la hiérarchie de la page.
Ici la variable {catrow.cathead.LEVEL} est remplacée par le numéro qu'il faut.
Donc mieux vaut laisser ces balises autour des titres des catégories et des forums

Essayez avec le template suivant :

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 -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
           <td class="{catrow.cathead.inc.INC_CLASS}" width="46">
         <img src="{SPACER}" height="0" width="46" />
      </td>
      <!-- END inc -->

      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <br/>
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">
                  <div class="testouille2">
                     {catrow.cathead.CAT_TITLE}
                  </div>
               </a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>

      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">
         &nbsp;
      </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46">
         <img src="{SPACER}" height="0" width="46" alt="." />
      </td>
      <!-- END inc -->

      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <div class="pouhein">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
         </div>
      </td>

      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                  <div class="foreum2">
                     {catrow.forumrow.FORUM_NAME}
                  </div>
               </a>
               <br/>
            </span>
         </h{catrow.forumrow.LEVEL}>
         <div class="numb">
            {catrow.forumrow.POSTS} messages
            <br/>{catrow.forumrow.TOPICS} sujets
         </div>
         <span class="genmed">
            <div class="descri">
               {catrow.forumrow.FORUM_DESC}
            </div>
         </span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>

      <td class="row3 over" align="center" valign="middle" height="50">
         <br/>
         <br/>
         <span class="gensmall">
            <div class="tede">
               {catrow.forumrow.LAST_POST}
            </div>
         </span>
      </td>

        </tr>
        <!-- END forumrow -->

        <!-- BEGIN catfoot -->
        <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46">
         <img src="{SPACER}" height="0" width="46" />
      </td>
      <!-- END inc -->

      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1">
         <img src="{SPACER}" alt="" height="1" width="1" />
      </td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->
<!-- END catrow -->

[Teurancher]

Bonsoir,
Merci pour votre aide. J'ai réussi à corriger tout ça, mais j'aimerais savoir si vous y voyez encore des erreurs ?;

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 --> <table class="forumline" width="100%" border="0"

cellspacing="1" cellpadding="0">

        <!-- END tablehead -->
        <!-- BEGIN cathead -->
        <tr><br/>
        <!-- BEGIN inc -->
        <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
        <span class="cattitle">
          <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}"><div

class="testouille2">{catrow.cathead.CAT_TITLE}</div></a>
          </span><br/>
        </h{catrow.cathead.LEVEL}>
          </td><br/>
        <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
        </tr>
        <!-- END cathead -->
        <!-- BEGIN forumrow -->
        <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="."

/></td>
        <!-- END inc -->
        <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
          <div class="pouhein"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}"

src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
        </td>
        <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
        <span class="forumlink">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}"><div class="foreum2">

{catrow.forumrow.FORUM_NAME}</div></a><br/>
          </span> <div class="numb">{catrow.forumrow.POSTS} messages <br/>{catrow.forumrow.TOPICS} sujets</div>
        </h{catrow.forumrow.LEVEL}>
          <span class="genmed"><div class="descri">{catrow.forumrow.FORUM_DESC}</div></span>
        <span class="gensmall">
        <!-- BEGIN switch_moderators_links -->
        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
        <!-- END switch_moderators_links -->
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
        </td>
               
        <td class="row3 over" align="center" valign="middle" height="50">
       
          <br/><br/><span class="gensmall"><div class="tede">{catrow.forumrow.LAST_POST}</div></span>
        </td>
        </tr>
        <!-- END forumrow -->
        <!-- BEGIN catfoot -->
        <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1"

width="1" /></td>
        </tr>
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

[MlleAlys]

Code:

<!-- BEGIN cathead -->
        <tr><br/>
        <!-- BEGIN inc -->
        <td

Un saut de ligne n'a rien à faire entre le début d'une ligne <tr> et le début le la première cellule <td>, tous les contenus du tableau doivent être dans une cellule
pareil ici :

Code:


        </td>
        <br/>
        <td

ici le saut de ligne est entre deux cellule... soit un peu dans un monde parallèle, il ne fait pas partie du contenu du tableau, et donc le navigateur ne sait pas trop où l'afficher.... (il peut du coup par exemple l'afficher avant le début du tableau, et après on se retrouve avec un grand espace vide au dessus du tableau alors que ce n'était pas prévu xD)

garder la mise en forme du code avec les décalages en début de ligne permet aussi de mieux repérer si une balise manque ^^

Pour le reste je n'ai pas tout décortiqué, mais en regardant rapidement je n'ai pas vu d'autre erreur... j'espère ne rien avoir manqué d'embêtant ! ^^"

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 -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
   <!-- BEGIN inc -->
    <td class="{catrow.cathead.inc.INC_CLASS}" width="46">
      <img src="{SPACER}" height="0" width="46"/>
    </td>
    <!-- END inc -->
    <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
      <h{catrow.cathead.level} class="hierarchy">
        <span class="cattitle">
          <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">
            <div class="testouille2">
              {catrow.cathead.CAT_TITLE}
            </div>
          </a>
        </span>
        <br/>
      </h{catrow.cathead.level}>
    </td>
    <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">
      &nbsp;
    </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
   <!-- BEGIN inc -->
    <td class="{catrow.forumrow.inc.INC_CLASS}" width="46">
      <img src="{SPACER}" height="0" width="46" alt="."/>
    </td>
    <!-- END inc -->
    <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
      <div class="pouhein">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"/>
      </div>
    </td>
    <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
      <h{catrow.forumrow.level} class="hierarchy">
        <span class="forumlink">
          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
            <div class="foreum2">
              {catrow.forumrow.FORUM_NAME}
            </div>
          </a>
          <br/>
        </span>
        <div class="numb">
          {catrow.forumrow.POSTS} messages
          <br/>
          {catrow.forumrow.TOPICS} sujets
        </div>
      </h{catrow.forumrow.level}>
      <span class="genmed">
        <div class="descri">
          {catrow.forumrow.FORUM_DESC}
        </div>
      </span>
      <span class="gensmall">
        <!-- BEGIN switch_moderators_links -->
        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
        <!-- END switch_moderators_links -->
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
    </td>
    <td class="row3 over" align="center" valign="middle" height="50">
      <br/>
      <br/>
      <span class="gensmall">
        <div class="tede">
          {catrow.forumrow.LAST_POST}
        </div>
      </span>
    </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
   <!-- BEGIN inc -->
    <td class="{catrow.catfoot.inc.INC_CLASS}" width="46">
      <img src="{SPACER}" height="0" width="46"/>
    </td>
    <!-- END inc -->
    <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1">
      <img src="{SPACER}" alt="" height="1" width="1"/>
    </td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table>
<img src="{SPACER}" alt="" height="5" width="1"/>
<!-- END tablefoot -->
<!-- END catrow -->

[Teurancher]

Ça m'a enlevé pas mal d'espaces en effet :B Merci beaucoup, résolu !