Déplacer les sous forum sous la description des forums

[BiKinou]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 20/07/2020
Lien du forum : https://bikinoutest.forumactif.com/

Description du problème

Actuellement, je teste différents systèmes pour les catégories et les forums. Je fais des mix de différents codes.
Pour le moment, je suis dans la présentation des forums et sous forum


Mon sous forum est sous forme coulissant ou onglet, mon problème c'est qu'il ne se met pas sous la description de mon forum. J'ai beau le déplacer ou modifier les tailles et les marges, il refuse d'aller en-dessous.
Voici mon template

Code:

    <link href='http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|Indie+Flower|Nunito' rel='stylesheet' type='text/css' />
    <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 -->
    <div class="categorie">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
<div class="forum_bloc">
    <div class="forum_title">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
        {catrow.forumrow.FORUM_NAME}
      </a>
    </div>
    <div class="forum_old_new_lock_img">
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </div>
    <div class="forum_desc">
      {catrow.forumrow.FORUM_DESC}
    </div>
    <div class="forum_lastmess_stats">
      <div class="forum_stats">
        {catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages
      </div>
      <div class="forum_lastmess"> 
        {catrow.forumrow.LAST_POST}
      </div>
    </div>
    <div style="clear: both;">
    </div>
    <div class="sous_forum">
    <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
    <span class="ouverture_sousforum">Voir les sous-forum</span>
  </div>
  </div>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->

Mon CSS

Code:

    /**************************************************  DÉBUT DES CATÉGORIES **************************************************/


    /*Bloc de catégorie*/
    .categorie {
      position: relative;
      width: 850px;
      margin: auto;
      background-color: #767352;
      border-top-left-radius: 427px 112px;
      border-top-right-radius: 427px 112px;
      padding-bottom: 0px;
      overflow: hidden;
      margin-bottom: 20px;
      border: 3px solid #3d3a24;
      font-size: 12px;
      font-family: georgia;
      color: #2b291a;
    }
    .categorie a {
      color: #000000;
    }
    .categorie a:hover {
      color: #554c32;
    }


    /*Bloc du titre de catégorie*/
    .cate_title {
      height: 150px;
      width: 850px;
      margin-bottom: 40px;
      background-image: url('');
      border-bottom: 3px solid #3d3a24;
      border-top-left-radius: 425px 110px;
      border-top-right-radius: 425px 110px;
    }
    /*Titre de catégorie*/
    .cate_title h2 {
      display: block;
      width: 850px;
      margin: 0px;
      padding: 0px;
      padding-top: 70px;
      text-align: center;
      text-shadow: 1px 1px 2px #554c32;
      color: #000000;
      font-family: monotype corsiva;
      font-weight: normal;
      font-size: 50px;
    }
    /*Met le titre de catégorie dessus son image*/
    .cate_title span {
      position: relative;
      z-index: 2;
    }
    /*Image du titre de catégorie*/
    .cate_title img {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 150px;
      width: 850px;
      z-index: 1;
      border-top-left-radius: 425px 110px;
      border-top-right-radius: 425px 110px;
    }


    /*Bloc de forum*/
    .forum_bloc {
      margin: auto;
      width: 800px;
      height: 160px;
      box-shadow: 0 0 10px #000000;
      background-color: #a8a287;
      margin-bottom: 30px;
    }


    /*Bloc du titre de forum*/
    .forum_title {
      height: 35px;
      line-height: 35px;
      margin-left: 170px;
      display: block;
    }
    /*Titre de forum*/
    a.forumlink {
      font-family: 'Lobster', cursive;
      font-size: 20px;
      letter-spacing: 0px;
      font-weight: normal;
      color: #000000!important;
      transition: 0.5s;
      -webkit-transition: 0.5s;
    }
    /*Titre de forums survolé*/
    a.forumlink:hover {
      color: #554c32!important;
      letter-spacing: 2px;
      text-decoration: none!important
    }


    /*Bloc image Old New Lock*/
    .forum_old_new_lock_img {
      float: left;
      height: 80px;
      width: 85px;
      margin-left: 30px;
    }
    .forum_old_new_lock_img img {
      height: 80px;
      width: 85px;
    }


    /*Bloc de la description de forum*/
    .forum_desc {
      position: relative;
      float: left;
      width: 377px;
      height: 76px;
      border: 2px solid #747253;
      margin-left: 46px;
      margin-right: 46px;
      overflow: hidden;
    }
    /*Description de forum*/
    .forum_desc_desc {
      position: absolute;
      width: 373px;
      height: 72px;
      background-color: #000000;
      color: #a3a3a3;
      opacity: 0;
      overflow: auto;
      padding: 2px;
      overflow: auto;
      text-align: justify;
      top: 0px;
      left: 0px;
      transition: 0.5s;
    }
    /*Apparition de la description de forum*/
    .forum_desc:hover .forum_desc_desc {
      opacity: 0.8;
    }
    /*Image de la description de forum*/
    .forum_desc_img {
      position: absolute;
      width: 377px;
      height: 76px;
      top: 0px;
      left: 0px;
    }


    /*Bloc du dernier message et statistiques*/
    .forum_lastmess_stats {
      float: left;
      width: 180px;
      height: 78px;
      border: 1px dotted #6e6555;
      text-align: center;
    }
    /*Statistiques*/
    .forum_stats {
      font-size: 10px;
      font-family: verdana;
      margin: auto;
      width: 160px;
      padding-top: 8px;
      padding-bottom: 2px;
      border-bottom: 1px dotted #6e6555;
    }
    /*Dernier message*/
    .forum_lastmess {
      margin: auto;
      margin-top: 8px;
      width: 170px;
    }

.sforum
{
  position: relative;
  z-index: 3;
  display: block;
  height: 0;
    background: #191817;
  color: #b5b5b5;
  overflow: hidden;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.ouverture_sousforum
{
  position: relative;
  z-index: 3;
  display: block;
  float: right;
  width: 120px;
  margin-right: 20px;
  background: #191817;
  color: #b5b5b5;
  font-size: 11px;
  text-align: center;
  padding: 4px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
  height: 50px;
  background: #191817;
  color: #b5b5b5;
  padding: 4px;
  overflow: auto;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sous_forum a
{
  color: #b5b5b5 !important;
  text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
  color: #ffffff !important;
}
    /*Cache les images qui ne doivent pas apparaître*/
    a.forumlink img, a.nav img {
      display: none;
    }


    /************************************************** FIN DES CATÉGORIES **************************************************/

Merci de votre aide

[BiKinou]

Après plusieurs essais,
j'ai réussi à replacer mon code au bon endroit mais maintenant mon problème qui se pose c'est que ma partie sous-forum est trop haute pas de beaucoup. J'ai mis une marge-top de -1px mais elle ne bouge pas. De plus,là où c'est marqué sous forum, j'aimerai qu'il soit en-dessous de mes messages/sujet

Dernière problème de marge, j'aimerai que l'image dans la description forum face quasiment toute la longueur

Code:

/* OSSATURE */   
/* CATÉGORIES */
/*Cadrage*/
.cadrecaté {
background: #ffffff;
border: 4px solid #c3ec50;
margin-bottom: 15px;
padding: 2px;
padding-left: 4px;
padding-right: 4px;
}
.caté{
background: #fefdb1;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
text-align: center;
}
/*Titre de catégorie*/
.titrecaté h2 {
display: inline-block;
background: #d5e978;
border-radius: 15px;
box-shadow: 2px 2px 1px #ffffff;
margin: 0px;
margin-right: 5%;
padding: 10px;
padding-left: 180px;
padding-right: 180px;
color: #006600;
font-family: Lobster, cursive;
font-size: 28px;
text-shadow: 0 2px 2px #fefdb1;
text-align: center;
text-transform: uppercase;
transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transition: 1s;
-webkit-transition: 1s;
}
/*Titre de catégorie au survol*/
.titrecaté h2:hover {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
 /* FIN DES CATÉGORIES */ 
/*FORUM*/
/*Cadrage1*/
.forum{
margin-top: 50px;
margin-bottom: 30px;
}
.forumgauche {
position: relative;
background: #f2e485;
border-radius: 15px;
box-shadow: 0px 0px 5px 2px #a87f4c;
padding: 10px;
    }
/* Messages et sujets*/
.forummess {
display: inline-block;
background: url(https://2img.net/r/hpimg11/pics/362902Pattern1.png) repeat #0d5938;
border-radius: 15px 15px 0 0;
box-shadow: 0px 0px 5px 2px #a87f4c;
margin-right: 30px;
margin-bottom: -1px;
padding: 20px;
padding-top: 2px;
padding-bottom: 6px;
color: #402203;
font-family: Papyrus;
font-size: 13px;
}
/*Image NewOldLock*/
.iconeforum img {
width: 90px;
height: 120px;
margin-right: 15px;
}
/*Titre de forum*/
span.forumlink {
display: block;
text-align: left;
}
a.forumlink {
color: #006600!important;
font-family: parisienne;
font-size: 24px;
text-shadow: 2px 2px 1px #fefeea;
text-decoration: none!important;
letter-spacing: 0px;
transition: 0.5s;
-webkit-transition: 0.5s;
}
a.forumlink:hover {
color: #003a00!important;
letter-spacing: 5px;
    }

/*Description des forums*/
.descforum {
position: relative;
float: left;
width:400px;
height:85px;
border: 2px solid #747253;
margin-left: 20px;
margin-right:80px;
overflow: hidden;
}
.forum_desc_desc {
position: absolute;
width: 396px;
height: 84px;
background-color: #000000;
color: #a3a3a3;
opacity: 0;
overflow: auto;
 padding: 2px;
overflow: auto;
text-align: justify;
top: 0px;
left: 0px;
transition: 0.5s;
}
/*Apparition de la description de forum*/
.descforum:hover .forum_desc_desc {
 opacity: 0.8;
}
/*Image de la description*/
.descforum_img {
position: absolute;
width: 400px;
height:85px;
top: 0px;
left: 0px;
}
/*Dernier message*/
.dermess {
 width  : 0;
  height : 0;
border-left: 100px solid transparent;
border-right:100px solid transparent;
border-bottom: 70px solid #769c8d;
position : relative;
top : -35px;
left : 15px;
}
.dermess:before{
content:'';
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 70px solid #769c8d;
width:0;
height:0;
position: absolute;
top:69px;
left:-100px;
}
/*Contenu du dernier message*/
.policedermess {
width: 100px;
height: 100px;
top:23px;
left:-44px; 
color: #312516;
font-family: Papyrus;
font-size: 12px;
text-align: center;
position: relative;
}
/*Mise en forme des liens du dernier message*/
.policedermess a:hover {
color: #006600;
font-family: Papyrus;
font-size: 15px;
}
.sforum
{
  position: relative;
  z-index: 3;
  display: block;
  height: 0;
margin-top: -1px;
background: #ffffff;
color: #b5b5b5;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.ouverture_sousforum {
  position: relative;
  z-index: 3;
  display: block;
  float: right;
  width: 120px;
  margin-right: 20px;
  background: #ffffff;
  color: #b5b5b5;
  font-size: 11px;
  text-align: center;
  padding:1px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sous_forum:hover .sforum
{
  height: 50px;
  background: #ffffff;
  color: #b5b5b5;
  padding:1px;
 margin-top: -1px; 
overflow: auto;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.sous_forum a
{
color: #b5b5b5 !important;
text-shadow: 1px 1px 0px #000000;
}
.sous_forum a:hover
{
  color: #ffffff !important;
}
/*Cache les images qui ne doivent pas apparaître*/
a.forumlink img, a.nav img {
      display: none;
}

[kheino]

Bonjour,

Le template fourni contient des erreurs de fermeture de balise :
quand c'est rouge à un niveau des fermetures (ou autres), c'est qu'il faut corriger, ça peut générer des apparences tronquées (bien que ce ne soit pas forcément le problème vu que certains navigateurs s'y font, d'autres sont plus rigoureux)...
Lignes 80 à 82 :

Code:

<!-- END catrow -->END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>

Il me semble que le tableau a été fermé plus haut, lignes 32 à 34

Code:

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>

Autre problème : un commentaire n'est pas correctement balisé, ligne 78 (en orange c'est la balise d'ouverture manquante):

<!-- END catrow --><!-- END switch_user_logged_in -->

Dernier point et non des moindres, juste en-dessous ligne 79, une balise-lien est hors de toute balise alors qu'à l'origine elle se trouve dans une 'td' justement avant la '/td' en rouge

Code:

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>

Petit conseil, respecter et garder les balises commentaires permet de s'y retrouver dans la hiérarchisation de la structure avec le template par défaut, en ça les templates-FA sont très bien faits.

Si le problème persiste :
Avant de modifier mon template, celui fourni plus haut est-il le nouveau ? si ce n'est pas le cas, ce serait bien de le redonner.
Je vais essayer à partir de là de voir ce qui cloche...

[BiKinou]

bonjour, merci pour ta réponse. Du coup, je comprends mieux d'où venez tous mes problèmes. J'ai modifié tout mon template et je pense que là, je suis bien.
Je te passe mon template si tu veux le voir. Merci de ton aide

Code:

    <link href='http://fonts.googleapis.com/css?family=Parisienne|Shadows+Into+Light' rel='stylesheet' type='text/css' />
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
    <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 -->
    <div class="cadrecaté">
    <div class="caté">
      <div class="titrecaté">
        <span>
          {catrow.tablehead.L_FORUM}
        </span>
      </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
      <table class="forum" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="right" valign="middle">
            <span class="forummess">
              <span class="forummess_in">
                {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
              </span>
            </span>
          </td><td></td>
        </tr>
        <tr>
          <td width="99%"><div class="forumgauche">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td rowspan="2" class="iconeforum" align="center" valign="middle">
                  <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                </td>
                <td align="left" valign="middle">
                  <span class="forumlink">
                    <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                      {catrow.forumrow.FORUM_NAME}
                    </a>
                  </span>
                </td>
              </tr>
              <tr>
                <td valign="middle">
                  <div class="descforum">
                    {catrow.forumrow.FORUM_DESC}
                  </div>
                </td>
              </tr>
            </table>
          </div>
          </td>
          <td></td>
          <td align="center" valign="middle">
            <div class="dermess">
              <div class="policedermess">
                {catrow.forumrow.LAST_POST}
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td align="left" valign="middle">
            <div class="sous_forum">
    <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
    <span class="ouverture_sousforum">Voir les sous-forum</span>
  </div>
          </td>
          <td></td>
        </tr>
      </table>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->

[kheino]

Je ne trouve pas d'erreur dans le html et après essai, le rendu est chouette,
good job !

As-tu vérifié avec d'autres navigateurs ?
Sur Chromium rien du tout ce jouli design, hélas.
Tes membres peuvent avoir un autre navigateur que toit et moi (FF)...
Le CSS doit être adapté pour que les navigateurs lisent la même chose, je ne pourrai voir ça que demain et encore, si j'en ai le temps, sinon, peut-être qu'une autre personne viendra t'aider.

[BiKinou]

Merci de ton aide. Honnêtement, pour que tous les opérateurs le lisent, après 4ans d'absence, je ne me rappelle plus des codes. J'en ai mis à certains , ceux dont je me souviens de tête après j'ai encore du mal