Catégories.
Les sous-forums apparaissent au survol.
Le cadre rouge que l'on voit sur les photos est remplacé par l'image new/no new/lock de catégorie qui apparaissent en fond (à la place de la couleur rouge) si le fond est plus grand que le cadre de taille 120 * 140.

Cliquez pour voir l'image en taille réelle.

HTML:

 

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 catego" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th colspan="5" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</th>
 </tr>
 <!-- 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 -->
          <!-- DEBUT NOM DE LA CATEGORIE -->
 <td class="{catrow.cathead.CLASS_CAT}" colspan="5" width="100%">
 <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>
          <!-- FIN NOM DE LA CATEGORIE -->
 </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 -->
           <!-- DEBUT DESCRIPTION ET LIENS SOUS FORUMS -->
 <td class="row1 desclinks" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                  <!-- DEBUT DE LA DESCRIPTION DU SOUS-FORUM -->
                  <div class="ssforumdesc">
                    <div class="fodesc">
                      <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <span class="forumlink">
                          <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                        </span>
                      </h{catrow.forumrow.LEVEL}>
                      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
                    </div>
                  <!-- FIN DE LA DESCRIPTION DU SOUS-FORUM -->
                  <!-- DEBUT DIV DES SOUS FORUMS ET MODERATEURS -->
                    <div class="ssforums">
                      <span class="ssfosurvol gensmall">Survolez pour voir les sous-forums <br /></span>
                      <span class="gensmall ssforumlink">
                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                        <!-- BEGIN switch_moderators_links -->
                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                      </span>
                    </div>
                  </div>
                  <!-- FIN DIV DES SOUS FORUMS ET MODERATEURS -->
 </td>
          <!-- FIN DESCRIPTION ET LIENS SOUS FORUMS -->
          <!-- DEBUT CASE SUJETS ET MESSAGES -->
 <td class="row3 sujmes" align="center" valign="middle" height="50">
                  <span class="gensmall suj">{catrow.forumrow.TOPICS}</span>
                  <span class="gensmall mes">{catrow.forumrow.POSTS}</span>
 </td>
          <!-- FIN CASE SUJETS ET MESSAGES -->
 <td class="row2 lpa" align="center" valign="middle" height="50">
                  <span class="lastpost-avatar">
          <!-- BEGIN avatar -->
                    {catrow.forumrow.avatar.LAST_POST_AVATAR}
          <!-- END avatar -->
                  </span>
 </td>
          <!-- DEBUT DE LA CASE DU DERNIER MESSAGE ET DE L'IMAGE NEW/OLD/LOCKED -->
 <td class="row3 over lastpost" align="center" valign="middle" height="50">
                  <div class="lastpost">
                    <div class="gensmall lp">
                      {catrow.forumrow.LAST_POST}
                    </div>
                    <div class="ssforumnol">
                      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="ssforumnol" />
                    </div>
                  </div>
 </td>
          <!-- FIN DE LA CASE DU DERNIER MESSAGE ET DE L'IMAGE NEW/OLD/LOCKED -->
 </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>
<div class="bascate">
</div>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS:

 

Code:

/* LES COULEURS DU DESIGN */
/*
Couleur 1 : #ffffff
Couleur 2 : #831822
Couleur 3 : #A8A291
Couleur 4 : #bcb399
*/

/* DEBUT DES CATEGORIES PAR JOY http://dream.forumgratuit.eu/ */
table.catego {  
  background: none;
  border: none;
  
  border-collapse: collapse;
  
  overflow: hidden;
}

.catego .row1,.catego .row2,.catego .row3,.catego .row3Right {
  padding: 0;
}
  
/* NOM DE LA CATEGORIE */
.secondarytitle {
  background: none;
  
  padding: 5px;
}

.secondarytitle h2 {
  background: none !important;
  color: #000;
  font-family: 'Oswald', cursive;
  font-size: 3em;
}

/* DESCRIPTION DU FORUM ET LIENS VERS SOUS-FORUMS */
/* CELLULE DU NOM DU FORUM, DE SA DESCRIPTION ET DES LIENS VERS LES SOUS FORUMS */
td.desclinks {  
}

/* DIV CONTENANT DESC ET LIENS SOUS-FORUMS */
div.ssforumdesc {  
  overflow: hidden;
  
  position: relative;
}

/* DIV CONTENANT LE NOM-LIEN ET LA DESCRIPTION DU FORUM */
div.fodesc {
  overflow: auto;
  
  padding: 0px 5px 25px 5px;
  
  height: 95px;
  
  text-align: justify;
}

/* NOM-LIEN DU FORUM */
a.forumlink, a.forumlink:hover {
  color: #A8A291 !important; /* Couleur 3 */
  font-family: 'Oswald', cursive;
  font-size: 20px;
}

/* DIV DES LIENS VERS LES SOUS FORUMS */
div.ssforums {
  background: #831822; /* Couleur 2 */
  
  transition: all ease 1s;
  
  height: 140px;
  width: 100%;
  
  position: absolute;
  bottom: -120px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* AU SURVOL POUF ÇA GLISSE */
div.ssforums:hover {
  bottom: 0;  
}

/* LA QUESTION "SOUS-FORUM ?" */
span.ssfosurvol {  
  color: #fff !important; /* Couleur 1 */
  font-size: 14px;
  font-variant: small-caps;
  
  display: block;
  
  height: 20px;
  width: 100%;
  
  padding: 2px;
  
  position: absolute;
  top: 0px;
}

/* LIENS DES SOUS-FORUMS */
span.ssforumlink a, span.ssforumlink a:hover {
  color: #fff !important; /* Couleur 1 */
}

/* CASE SUJETS ET MESSAGES */
td.sujmes {
}

span.suj, span.mes {
  color: #fff; /* Couleur 1 */
  font-size: 30px;
  font-family: 'Oswald', cursive;
  
  height: 50%;
  width: 50px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

span.suj {
  background: #A8A291; /* Couleur 3 */
}

span.mes {
  background: #BCB399; /* Couleur 4 */
}


/* CASE DE L'AVATAR DU DERNIER POSTEUR */
td.lpa {
  width: 50px;
}

span.lastpost-avatar {
  padding: 0px;
  float: none;
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  
  overflow: hidden;
  
  width: 50px;
  height: 120px;
}

span.lastpost-avatar img {
  border-radius: 0px;
  
  width: auto;
  height: 100%;
}

/* CADRE DU DERNIER POST ET DE L'IMAGE NEW/OLD/LOCKED */
/* CELLULE DU DERNIER POST */
td.lastpost {
  overflow: hidden;
}

/* DIV CONTENANT LE DERNIER POST + L'IMAGE NOL */
div.lastpost {
  height: 120px;
  width: 140px;
  padding: 0px;
  
  position: relative;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  transition: all ease 1s;
}


/* DIV CONTENANT L'IMAGE NOL */
div.ssforumnol {
  background: #831822; /* Couleur 2 */
  
  transition: all ease 1s;
  
  height: 120px;
  width: 140px;
  
  position: absolute;
  top: 0px;
  right: 0px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* DIV CONTENANT L'IMAGE NOL QUAND ELLE BOUGE */
div.lastpost:hover div.ssforumnol {
  right: -150px;
}

  
/* FIN DES CATEGORIES PAR JOY */