[forumactif]Un index à 2 colonnes

Hello hello Smile

Comme beaucoup se posent la question, nous allons voir ici comment réaliser ce type de mise en page

On prépare le template

Tout va se passer dans le template index_box.

On va devoir faire 2 étapes :

Supprimer la ligne "titre de la catégorie, Sujets, Messages et Derniers Messages" pour ne garder que "titre de la catégorie"
Ne faire que 2 colonnes (une avec l'image d'état du forum, et une avec la description, les stat' et le dernier message)
Préparer nos blocs

La structure

On va commencer par "supprimer" la ligne "titre de la catégorie, Sujets, Messages et Derniers Messages". Celle-ci correspond à ce code dans notre template

Code:

<tr>
   <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
   <th nowrap="nowrap" width="50">{L_TOPICS}</th>
   <th nowrap="nowrap" width="50">{L_POSTS}</th>
   <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>

On va donc tout remplacer ce code par :

Code:

<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>

Ensuite, on va modifier nos colonnes en remplaçant ça

Code:

<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   
   <td class="{catrow.forumrow.INC_CLASS}" 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 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}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
   </td>
   <td class="row3" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.TOPICS}</span>
   </td>
   <td class="row2" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.POSTS}</span>
   </td>
   <td class="row3 over" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>
</tr>

par ça

Code:

<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
   
   <td class="{catrow.forumrow.INC_CLASS}" 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 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}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
      <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      <span class="gensmall">{catrow.forumrow.POSTS}</span>
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>
</tr>

Nous n'avons donc plus que 2 colonnes.

Les blocs

On va maintenant mettre les infos dans des blocs Smile

On va donc commencer par :

1/ Mettre la variable correspondant à la description dans un bloc avec un nom

Code:

<div class="description">la variable description à mettre ici</div>

2/ a. Les stat' et dernier message dans un bloc

Code:

<div class="stats">les stats ici</div>

b. Dernier message dans un bloc

Code:

<div class="dernier_msg">la variable dernier message</div>

c. le nombre de sujet/message dans un bloc aussi

Code:

<div class="infos_forum">Les variables sujets + messages</div>

=> ce qui donne pour ce bloc

Code:

<div class="stats"><div class="dernier_msg">la variable dernier message</div><div class="infos_forum">Les variables sujets + messages</div></div>

ce qui va nous donner avec les variables intégrées

Code:

<div class="description">{catrow.forumrow.FORUM_DESC}</div>
<div class="stats">
<div class="dernier_msg">{catrow.forumrow.LAST_POST}</div>
<div class="infos_forum">{catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets</div>
</div>

On va donc remplacer ça

Code:

<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}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
      <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      <span class="gensmall">{catrow.forumrow.POSTS}</span>
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>

par ça

Code:

<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}">{catrow.forumrow.FORUM_NAME}</a><br />
         </span>
      </h{catrow.forumrow.LEVEL}>
      <div class="description">{catrow.forumrow.FORUM_DESC}</span>
      <span class="gensmall">
         
         {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
         
         {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
      </span>
      </div>
<div class="stats">
<div class="dernier_msg">{catrow.forumrow.LAST_POST}</div>
<div class="infos_forum">{catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets</div>
</div>
   </td>

La mise en page

Il ne nous reste plus maintenant qu'à travailler la mise en page de nos blocs Smile

(à adapter selon vos envies ^^)

Ici, je vais faire quelque chose de simple et qui s'applique à mes 3 blocs.
-> une bordure
-> une couleur de fond
-> des coins arrondis

On code une bordure comme ça

Code:

border: épaisseur type couleur;

La couleur de la typo se définit tout simplement comme ça

Code:

color: #code_couleur;

Donc j'sais pas trop ce que tu voulais dire ici

Code:

font-color: #FFFFFF;
color: #FFFFFF;

Ensuite pour avoir des coins arrondis, c'est ce code (attention, ça ne marche par sous IE)

Code:

border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;

En sachant que
-> border-radius (logiquement, ça marche avec les versions récentes de la plupart des navigateurs sauf IE)
-> -webkit-border-radius (pour chrome et safari il me semble)
-> -moz-border-radius (pour mozilla)

Ce qui va me donner dans mon css

Code:

div.description, div.dernier_msg, div.infos_forum{
border: 2px solid #000000;
color: #000000;
background-color: #FFFFFF;
border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
}

Maintenant le placement des blocs Smile

Pour éviter que le texte ne soit collé à la bordure, on va ajouter du remplissage (= padding), par exemple 4/5 px ^^

Code:

padding:5px;

Maintenant, on va bosser les largeurs ^^

1/ Le bloc descriptions prend un peu moins que toute la place, donc on lui donne une largeur de 90%

Code:

div.description{
width:90%;
}

2/ Ensuite, on va dire que le bloc "stat" occupe uniquement 50% de la largeur et qu'on le place à 10% du bord droit de la case

Code:

div.stats{
width:50%;
margin-right:10%;
margin-left:auto;
}

3/ Et dans ce bloc "stat", on va dire que :
-> les blocs se placent l'un à coté de l'autre et s'alignent au bord droit du bloc stats

Code:

div.stats div{
float:right;
}

-> chacun des ces 2 blocs représentent 30% de la largeur du bloc "stats"

Code:

div.dernier_msg, div.infos_forum{
width:30%;
}

Maintenant, il ne reste plus qu'à travailler le texte et le tour est joué. Voilà le CSS complet :

Code:

div.description, div.dernier_msg, div.infos_forum{
border: 2px solid #000000;
color: #000000;
background-color: #FFFFFF;
border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
padding:5px;
}

div.description{
width:90%;
font-size:12px;
}

div.stats{
width:50%;
margin-right:10%;
margin-left:auto;
}

div.stats div{
float:right;
}

div.dernier_msg, div.infos_forum{
width:30%;
font-size:10px;
text-align:center;
}

Des questions sur ce tuto ? C'est par [ici]