Liens des sous-forums qui se chevauchent.

[Maija.]

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

Description du problème

Bonjour bonjour !

J'ai un petit problème avec l'affichage de mes sous-forums. Comme vous pouvez le voir, ça fait un gros tas illisible. Au début, ça marchait correctement, ils étaient bien l'un à la suite de l'autre, et puis j'ai bidouillé d'autres trucs et ça donne ça. J'ai bien essayé de revenir en arrière (autant que ma mémoire me permettait de me rappeler ce à quoi j'avais touché) mais le problème reste le même.

Je vous laisse mon template modifié et le bout de CSS correspondant.




Merci d'avance et bonne fin de journée à tous !

[MlleAlys]

Bonjour,
Je poste pour voir vos codes.

EDIT :

La structure n'est pas optimale, et le code causant principalement votre problème est celui-ci :

Code:

.fora {
  margin-top: -30px;
  margin-left: 5px;
}

Pour le contrer dans l'affichage des osus-forums, ajoutez le code suivant à votre feuille de style :

Code:

.sousforum .fora {
  margin: 0;
}

Pour améliorer le codage de la partie des sous-forums et ainsi éviter des problèmes d'affichage, remplacez votre template par celui-là (j'ai réindenté le code et juste modifier la simplifié de la partie des sous-forums) :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
       
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
       
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>

<!-- BEGIN catrow -->

<!-- BEGIN tablehead -->
<table class="haut_cate">
  <tr valign="center">
      <td>
        <div class="categotitre"> {catrow.tablehead.L_FORUM}</div>
      </td>
  </tr>
</table>
<div class="milieu_cate">
  <table class="forumline" width="770px" border="0" cellspacing="1" cellpadding="0" align="center"
      <!-- END tablehead -->

      <!-- BEGIN cathead -->
      <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.cathead.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
        <!-- END inc -->
        <td class="{catrow.cathead.CLASS_CAT} index_cate" colspan="{catrow.cathead.INC_SPAN}" width="20%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
              <span class="cattitle">
                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
              </span>
            </h{catrow.cathead.LEVEL}>
        </td>
        <td class="{catrow.cathead.CLASS_ROWPIC} index_cate" colspan="3" align="right">&nbsp;</td><td width="5%"></td>
      </tr>
      <!-- END cathead -->

      <!-- BEGIN forumrow -->
      <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.forumrow.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
        <!-- END inc -->
        <td></td>
        <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN} index_cate" valign="top" width="75%" height="50">
            <div id="testtesthaut"></div>
            <div id="testtestmilieu">
              <table width="100%">
                  <tr>
                    <td>
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                          <span class="forumlink">
                              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                          </span>
                        </h{catrow.forumrow.LEVEL}>
                    </td>
                    <td style="padding-left: 40px; text-align: right;">
                        <div class="parchemins gensmall">{catrow.forumrow.POSTS} parchemin(s) dans {catrow.forumrow.TOPICS} grimoire(s).</div>
                    </td>
                  </tr>
              </table>
              <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
            </div>
            <div id="testtestbas"></div>
        </td>
        <td>
            <div class="sousforums-bg">
              <div class="sousforum gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            </div>
        </td>
        <td class="row3 over" align="center" valign="middle" height="75">
            <div id="derniermesshaut"></div>
            <div id="derniermessmilieu">
              <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              <br/>
              <!-- BEGIN avatar -->
              <div style="width: 200px;"></div>
              <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
              <!-- END avatar -->
              <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
            </div>
            <div id="derniermessbas"></div>
        </td>
      </tr>
      <!-- END forumrow -->

      <!-- BEGIN catfoot -->
      <tr>
        <!-- BEGIN inc -->
        <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" 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>
</div>
<table class="bas_cate">
  <tr valign="center">
      <td></td>
  </tr>
</table>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->

<!-- END catrow -->

Puis dans votre feuille de style ajoutez le code css suivant :

Code:

.sousforums-bg {
  width: 80px;
  height: 98px;
  overflow: hidden;
  background-image: url(http://i68.tinypic.com/oazuvq.png);
  margin-top: 5px;
  position: relative;
}

Et remplacez le code

Code:

.sousforum {
  width: 80px;
  height: 98px;
  background-color: #EFEAE7;
  opacity: 0;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
}

Par

Code:

.sousforum {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 2px;
  background-color: #EFEAE7;
  font-family: georgia;
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

[Maija.]

Ca marche super ! Merci beaucoup !
Est-ce que vous sauriez juste comment faire pour éviter que tout revienne à la ligne (IMAGE) ? Ca tient du détail mais bon...
Quoi qu'il en soit, encore merci MlleAlys !

[MlleAlys]

C'est parce que vous avez une div dans le titre de vos forums.
Pour annuler l'effet bloc de la div dans les sous-forums, ajoutez le code suivant dans votre feuille de style css :

Code:

.sousforum div {
  display: inline;
}

[Maija.]

C'est absolument parfait ! Merci merci merci !