Hellow.
Pour un résultat optimal, je vais te proposer d'intégrer tes hauts et bas de forums par le biais de DIV, plutôt que des images dans des tableaux. Tu n'as pas mal fait, ce sera juste moins compliqué à gérer. De plus, quand tu voudras changer de design, tu n'auras pas besoin d'aller modifier les images dans le HTML. Le style, on le laisse au CSS.
Première étape donc, les hauts et bas de catégories :
Pour le haut... rendez-vous par ici :
- Code:
-
<div class="categorie">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="http://nsa30.casimages.com/img/2012/05/16/120516081214352439.png" /></td></tr></table>
Remplace toute la TABLE par ceci :
- Code:
-
<div class="haut-categorie"></div>
Pour le bas... on part à la fin du template :
- Code:
-
<!-- BEGIN tablefoot -->
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<img width="800" height="300" src="http://nsa29.casimages.com/img/2012/05/19/120519040630785081.png" alt="" style="margin-top:-22px !important;"></td></tr></table>
<img src="{SPACER}" alt="" height="5" width="1" />
</div>
<!-- END tablefoot --><!-- END catrow -->
Supprime la dernière TABLE :
- Code:
-
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<img width="800" height="300" src="http://nsa29.casimages.com/img/2012/05/19/120519040630785081.png" alt="" style="margin-top:-22px !important;"></td></tr></table>
Et remplace par ceci :
- Code:
-
<div class="bas-categorie"></div>
Valide, publie, puis on va définir les tailles et les images de ces zones dans le CSS : - Code:
-
.haut-categorie, .bas-categorie {
width:100%;
height:300px;
}
.haut-categorie {
background-image:url('http://nsa30.casimages.com/img/2012/05/16/120516081214352439.png');
}
.bas-categorie {
background-image:url('http://nsa29.casimages.com/img/2012/05/19/120519040630785081.png');
}
.categorie .forumline {
margin-bottom:0; /* annule l'espace entre les forums et le pied de catégorie */
}
Une bonne chose de faite ! Plus qu'à s'occuper de déplacer notre titre de catégorie, pour l'instant inclus dans le tableau du forum. Tu vas donc chercher cette partie, juste en-dessous de "haut-categorie" :
- Code:
-
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
</tr>
<!-- END tablehead -->
En passant je fais remarquer qu'il y avait un "TR" en trop.
Mais comme on va se débarrasser de tout ça, on s'en fiche !
Dans cette partie est utilisée la variable
{catrow.tablehead.L_FORUM}. C'est elle qui génère le titre de catégorie. Nous allons donc la conserver car nous allons la réutiliser. Copie-la, puis supprime la ligne entière :
- Code:
-
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
</tr>
</tr>
Fais attention à ne pas toucher à la balise TABLE, ni au commentaire. Ceci fait, on n'a plus qu'à coller notre variable où on le veut, soit dans "haut-categorie" :
- Code:
-
<div class="haut-categorie">
{catrow.tablehead.L_FORUM}
</div>
Valide et publie le template, et on en a fini avec lui.Dans le CSS, on va faire deux choses :- ajouter un "position:relative" à "haut-categorie" pour que le titre se positionne par rapport à lui :
- Code:
-
.haut-categorie {
position:relative;
background-image:url('http://nsa30.casimages.com/img/2012/05/16/120516081214352439.png');
}
- et enfin positionner le titre :
- Code:
-
.haut-categorie h2 {
position:absolute;
top:0; /* espace par rapport au bord haut */
left:0; /* espace par rapport au bord gauche */
}
Voilà. A toi maintenant de régler en fonction de la position que tu souhaites donner au titre. A titre de rappel, tu as 4 propriétés à ta disposition : top, bottom, right, left. Tu as besoin d'une position verticale (top ou bottom) et d'une position horizontale (right ou left).
J'espère avoir été claire.
Si tu as le moindre souci, n'hésite pas à le faire savoir.