Sujets similaires

Bonsoir ou bonjour si vous me lisez la journée Smile

Donc voilà, j'avais une question qui concerne l'affichage des catégories. Je suis entrain de coder une nouvelle version pour un forum et j'aimerais en faite que ceci (l'entête) ne fasse plus qu'une et même barre et non une barre pour la colonne des forums et une barre pour les informations. Mais malgré mes tentatives, je ne vois pas comment réunir les deux barres en une seul (j'ai au préalable fouillé le forum grâce à l'outil recherche mais il n'est pas impossible que j'aie raté ce qui m'intéresse). En ce moment le résultat est assez proche parce que car j'ai annulé le cellspacing mais j'aimerais que mon titre soit centré donc ça cloche un peu.

Et comme c'est lié à la première, j'aimerais savoir comment faire pour que la catégorie ne fasse plus qu'une seule et même colonne (fin si c'est pas répété ce que je demande dans ma première questions) pour y mettre par exemple un fond qui passe sur toutes les informations de la catégorie soit le bouton (old-new-lock), la description et les informations, voilà un petit exemple de ce que ça donnerait : avant - après. Je pense qu'il faut entourer la zone concerné par une class mais pour y arriver, je ne sais pas ><

Voici le lien du forum-test : http://gogomaniac.forumgratuit.be/

Et le template concerné, soit l'index-box :

Spoiler:

Code:: <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="150"><div style="width:150px;"></div></th>

<tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" 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>
   <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>


<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"><div class="descriptionsforum">{catrow.forumrow.FORUM_DESC}</div></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 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages">M : {catrow.forumrow.POSTS} | S : {catrow.forumrow.TOPICS} <br> {catrow.forumrow.LAST_POST}</div></span>
</td>

</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Voilà merci d'avance à celui qui pourra m'éclairai !

Une classe. Je sais pas ce que vous avez tous à oublier le "e" final =.=

A part ça, bonsoir !

Sinon, la ligne qui t'intéresse est tout au début de ton template :

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

Si tu potasses un peu tes notions de HTML, tu constateras :
• Que je viens de citer deux cellules de titre
• Qu'il manque un <tr> avant ces deux lignes
• Que le <tr> qui les suit directement devrait être un </ tr>
Tu sauras en outre qu'on peut fusionner les cellules d'un tableau, et que c'est d'ailleurs le cas pour la première des deux (puisque, en dessous, on a la cellule contenant l'icone de forum, et celle contenant le titre et la description)

Il te suffit donc de retirer la deuxième cellule qui ne sert à rien, et de changer le {catrow.tablehead.INC_SPAN} dans la première en une valeur qui prendra en compte le nombre de cellules maximum d'une ligne de tableau, soit 3 cellules dans ton cas. Tu peux mettre une valeur plus grande "au cas où" aussi.

Pour la deuxième question, une méthode (barbare mais plus simple, je crois) serait de créer "un tableau dans le tableau" au niveau de l'affichage des forums, mais ça rendrait la précédente modif inutile par contre (il suffirait juste de virer la deuxième cellule)

En gros ici :

Code:: 
<tr>

et puis ici :

Code:: </tr>

Tu as le début et la fin d'une ligne de tableau contenant un forum. Tu peux simplement t'arranger pour que cette ligne ne contienne qu'une seule cellule qui elle même contiendra un tableau. Pour ça il te faut rajouter à la suite du premier code :

Code:: <td>
<table class="UnForum">
<tr>

Et ajouter ceci AVANT le deuxième code :

Code:: </tr>
</table>
</td>

A toi ensuite de définir les propriétés de la classe .UnForum (largeur 100%, couleur de fond, etc) dans ton CSS.

EDIT : Accessoirement, je crois que ton template est obsolète, ça fait un moment que le template index_box ne contient plus les commentaires  (ou END à la place de BEGIN)

Mais parce qu'on le dit à l'anglaise *sort*

Déjà merci de la rapidité de ta réponse Chrisa' !

Donc, j'ai d'abord repris le template par défaut et j'ai re-modifié celui-ci avec tes indications en plus, la première question est résolue (c'est vrai qu'il faudrait que j'aie relire mes notions). Maintenant pour la deuxième, j'ai l'impression que ça marche mais que ça ne passe pas au bon "niveau" car si tu regardes le résultat on dirait que le tableau créé grâce à ce que tu as dit passe en-dessous des tableaux de base et le fond se fait passer pour les contours comme si on avait rien modifié. Comment pourrais-je faire pour que cela passe au bon "niveau" ?

L'index-box :

Spoiler:

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" valign="top">
<tr>
   <th colspan="3" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" 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>
   <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>



<tr>

<td>
<table class="UnForum">
<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}"><span class="forumname">{catrow.forumrow.FORUM_NAME}</span></a><br />
<center><span class="forumsliens"><span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></span></center>

         </span>
      </h{catrow.forumrow.LEVEL}>
<span class="genmed"><div class="descriptions">{catrow.forumrow.FORUM_DESC}</div></span>
   </td>
   <td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">
<div class="sujets_messages"> {catrow.forumrow.POSTS} posts et {catrow.forumrow.TOPICS} topics <br /> {catrow.forumrow.LAST_POST}</div></span>
</td>
</tr>
</table>
</td>
</tr>



<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Le CSS qui va avec les catégories :

Spoiler:

Plop !

On est sur un forum français, on parle de quelque chose pour lequel il existe un terme technique tout à fait transparent, donc on dit "une classe" è_é

Pour ton souci ça vient de row1 et compagnie.

Histoire de ne pas se faire chier à éditer le HTML, il faut juste que tu rajoutes quelque chose comme ça dans ton CSS :

Code:: .UnForum .row1, .UnForum .row3, .UnForum .row1.over:hover, .UnForum .row3.over:hover {
background: none;
}

Ce qui, pour rappel, est équivalent à ça :

Code:: .UnForum .row1 { background : none; }
.UnForum .row3 { background:none; }
.UnForum .row1.over:hover { background:none;}
.UnForum .row3.over:hover { background:none;}

Bien compris chef, à partir d'aujourd'hui, je dirai classe è.é
Ha oui, je comprends pourquoi alors !
Donc merci d'avoir répondu aussi complètement à toutes mes questions Christa' ! Cela m'a été d'une grande aide et je vais quand même aller relire les topics de CSS pour rafraîchir ma mémoire Smile

A bientôt !

Le sujet étant résolu, je le classe Wink

Questions catégories

Questions catégories

Sujets similaires

Sujets similaires

Partenaires Or