Catégorie en deux colones et illustrées

Bonjour ! Aujourd'hui, je viens vous proposer des catégories, faites pour un de mes forums en projet. Il permet d'avoir deux catégories par lignes et d'illustrer vos lieux. Voici le rendu :
Les deux catégories de gauche on l'apparence "normale", celle en haut à droite est survolée et celle en bas à droite a un nouveau message.

Le HTML - template Index_box à remplacer en entier.

<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="cate_head"><div id="titre_cate">{catrow.tablehead.L_FORUM}</div></div>
<div class="cate_body">
  <span style="display: block; height: 1px; clear: both;"></span>
        <!-- END tablehead -->
 <!-- BEGIN cathead -->

 <!-- END cathead -->
 <!-- BEGIN forumrow -->
 
<div class="forum_bloc">

  <div class="forum">{catrow.forumrow.FORUM_DESC}<div id="nom_forum"><a href="{catrow.forumrow.U_VIEWFORUM}" id="lien_forum">{catrow.forumrow.FORUM_NAME}</a></div>
    <div id="stat_forum">{catrow.forumrow.TOPICS} sujets / {catrow.forumrow.POSTS} message</div>
    <div id="last_poste">{catrow.forumrow.LAST_POST}</div>
    <div class="sous_f">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    <div id="imgN_forum"><img id="imgn02" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    </div>
  
</div>

 <!-- END forumrow -->
 <!-- BEGIN catfoot -->

 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
<span style="display: block; height: 1px; clear: both;"></span>
</div>
<div class="cate_foot"></div>

<!-- END tablefoot --><!-- END catrow -->

Le CSS

/*----------------------- catégories par elia-ls ---------------------*/

 

.forum_bloc
{
  width: 800px; /*- Largeur totale de l'ensemble de vos catégories -*/
  margin: auto;
}

.forum
{
  width: 380px; /*- Largeur d'une catégorie -*/
  float: left;  /*- tss, pas touche ! -*/
  height: 275px;  /*- Hauteur -*/
  margin: 8px;   /*- Espace entre elles -*/
  overflow:hidden;
  background: white;
  border: 2px solid white;  /*- Bordure -*/
  -moz-box-shadow: 5px 5px 5px 0px #656565;
-webkit-box-shadow: 5px 5px 5px 0px #656565;
-o-box-shadow: 5px 5px 5px 0px #656565;
box-shadow: 5px 5px 5px 0px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
}

.forum:hover #nom_forum {
  top:-400px;
width:380px;
text-align:center;
  transition:0.5s;
}

#nom_forum {
 position:relative;
  top:-310px;
width:380px;
text-align:center;
  transition:0.5s;
}

#lien_forum {  /*- Titre de la catégorie -*/
    text-align:left;
  font-size:25px; /*- Taille de la police -*/
  text-shadow : 1px 1px #000000;
  color:white !important; /*- couleur -*/
  transition:0.5s;
}

#lien_forum:hover {
  color:grey !important; /*- Couleur du titre au survol -*/
  transition:0.5s;
}

#imgN_forum {
  position:relative;
  top:-400px;
  width:380px;
text-align:center;
  transition:0.5s;
}

.forum:hover #imgN_forum {
  top:-270px;
  transition:0.5s;
}

#imgn02 {  /*- Image No New -*/
  width:250px; 
  height:40px;
  transition:0.5s;
}

.forum:hover #imgn02 {
  width:80px;
  height:13px;
  transition:0.5s;
}

#description01 {
  position:relative;
  width:380px;
  height:105px;
  background-image:url('http://zupimages.net/up/16/06/q5pk.png');
  top:-200px;
  left:-380px;
  transition:0.7s;
  overflow:auto;
  text-align:justify;
  font-size:13px;
}

.forum:hover #description01 {
  left:0px;
  transition:0.7s;
}

#last_poste {
 position:relative;
  top:-392px;
  font-size:11px;
  width:380px;
  height:16px;
  overflow:hidden;
  text-align:center;
  background-image:url('http://zupimages.net/up/16/06/abwc.png');
  right:-380px;
  transition:0.7s;
}

.forum:hover #last_poste {
  right:0px;
  transition:0.7s;
}

#last_poste br {
    display: none;
}

#stat_forum {
  position:relative;
  top:-397px;
    font-size:15px;
  font-weight: bold;
  width:380px;
  text-align:center;
  text-shadow: -3px -1px 7px rgba(255, 255, 255, 1);
  left:-380px;
  color:black;
  transition:0.5s;
}

.forum:hover #stat_forum {
  left : 0px;
  transition:0.5s;
}

.sous_f {
  position:relative;
  top:-275px;
  background-image:url('http://zupimages.net/up/16/06/abwc.png');
  width:380px;
  height:65px;
  overflow:hidden;
  right:-380px;
  transition:0.7s;
}

.sous_f a { /*- Sous forums -*/
  font-size:15px; /*- Taille de la police -*/
  background:white; /*- Couleur de fond du lien -*/
  border-radius:5px; /*- Arrondis des angles -*/
  padding:2px 5px; 
  margin:5px; /*- Espace entre -*/
}

.forum:hover .sous_f {
  right:0px;
  transition:0.7s;
}

.cate_head
{
  clear: both;
  width: 800px;
  margin: auto;
  height: 140px;
  background: url(http://zupimages.net/up/16/06/p9j0.png);  /*- Image d'en-tête, sous le titre de la catégorie -*/
}
.cate_body
{
  width: 800px;
  margin: auto;
  background: url(http://zupimages.net/up/16/06/rgpo.png) repeat-y; /*- Image de fond des catégories -*/
}
.cate_foot
{
  width: 800px;
  height: 36px;
  margin: auto;
  background: url(http://zupimages.net/up/16/06/o5yr.png);   /*- Image de fin des catégories -*/
}

#titre_cate {
  position: relative;
  width: 800px;
  text-align: center;
  top:25px;
}

#titre_cate h2 {
  font-size:39px;
  color:#57321A;
  font-weight:normal;

Description du forum

<img src="LIEN DE LIMAGE EN 380*275" id="img_description" />
<div id="description01">
          Le texte ici ! 
</div>

Dernières infos et personnalisation

Voilà pour les codes ! J'espère que vous vous y retrouverez. Concernant le forum, voici quelques options à mettre pour ne pas se retrouver avec des catégories déformées :

Affichage -> Structure et hiérarchie : 

-Séparer les catégories sur l'index : moyen

- Afficher le titre du sujet du dernier message d'un forum sur l'index : oui

-Lien vers les niveaux inférieurs : oui (sans image)

 

Général -> configuration : Ce codage est optimal pour une largeur de forum de 820px.

 

Concernant les titres des catégories, si vous choisissez une image, je vous conseille la taille : 350 de large pour 75 de haut.

 

En cas de quesiton, je suis disponible via commentaire !

Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.