Séparer le titre des forums des colonnes description et derniers messages

[Emie *]

Bonjour à vous =)

Je voudrais vous demander un coup de main pour trouver comment faire ce que je souhaiterais.
Comme mentionné dans mon titre, je souhaiterais mettre le titre de mes forums au-dessus de la description et de la colonne derniers messages.

J'ai fait un petit montage pour illustrer:


Voici l'adresse de mon forum test: http://nevermore.1fr1.net
Le template index_box a connu plusieurs modifications (et je ne sais pas pourquoi il y a des séparations entre les coloonnes).

Je sais déjà comment encadrer la description et les derniers messages et changer la mise en forme du titre des forums.

Merci!

[Invité]

Bonjour,

Souhaitez vous repartir du template de base ou préférez-vous démarrer de votre template modifié?
Dans le second cas, il faudrait nous le fournir, ainsi que la partie de votre CSS qui lui est associée.

Cordialement

[Emie *]

Je souhaiterais partir du template déjà modifié, alors le voilà:

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}

            {CURRENT_TIME}

            </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>

            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>

<!-- DEBUT MODIF ONGLETS -->


  <script type="text/javascript">
  //<![CDATA[
var i = 0;

document.write('<div align="center">
<ul class="onglet">
 

<li onMouseOver="change_cat(0);" class="onglet_actif" id="cat_0">Vestibule</li>
<li onMouseOver="change_cat(1);" class="onglet_nactif" id="cat_1">Expositions</li>
<li onMouseOver="change_cat(2);" class="onglet_nactif" id="cat_2">Commerce</li>
<li onMouseOver="change_cat(3);" class="onglet_nactif" id="cat_3">Ressources</li>
<li onMouseOver="change_cat(4);" class="onglet_nactif" id="cat_4">Assistance</li>
<li onMouseOver="change_cat(5);" class="onglet_nactif" id="cat_5">Compétitions</li>
<li onMouseOver="change_cat(6);" class="onglet_nactif" id="cat_6">Récréations</li>
<li onMouseOver="change_cat(7);" class="onglet_nactif" id="cat_7">Archives</li>

</ul>
</div>
');

var compteur_cat = 0;

var anc_cat = 0;

var nom_cat = new Array('0','1','2','3','4','5','6');

 
function change_cat(numero)
{
 document.getElementById(nom_cat[anc_cat]).style.display = 'none';
 document.getElementById(nom_cat[numero]).style.display = 'block';
 document.getElementById('cat_'+nom_cat[anc_cat]).className = 'onglet_nactif';
 document.getElementById('cat_'+nom_cat[numero]).className ='onglet_actif';
 anc_cat = numero;
}

function capture_cat()
{
if(nom_cat[compteur_cat] == nom_cat[0])
{document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" >');
}
else{
 document.write('<table class="cat_forum" id="' + nom_cat[compteur_cat] + '" style="display:none;">');
}
compteur_cat++;
}

//-->
</script>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat();
//]]>
</script>

<!-- FIN MODIF ONGLETS -->

      <!-- 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 -->
          <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>
      <!-- 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 -->
          <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>

                </span>
            </h{catrow.forumrow.LEVEL}>

    <!-- [ DÉBUT DES MODIFICATIONS EFFECTUÉES PAR LE FORUM DES FORUMS ] -->

          <div class="forum-stats"><strong>{catrow.forumrow.POSTS}</strong> messages dans <strong>{catrow.forumrow.TOPICS}</strong> sujets.</div>
    <div class="forum-description">
    <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
    </div>
    <div class="forum-sousforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
            <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->

            </span>
          </td>
          <!-- BEGIN forum_link_no -->
          <td class="row3 over" align="center" valign="middle" height="50"><div style="width: 150px">
            <span class="gensmall"><div class="arrondi">{catrow.forumrow.LAST_POST}</div></span></div>
          </td>
 

    <!-- [ FIN DES MODIFICATIONS EFFECTUEES PAR LE FORUM DES FORUMS ] -->

          <!-- END forum_link_no -->
          <!-- BEGIN forum_link -->
          <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
          <!-- END forum_link -->
      </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


Et voilà le CSS qui va avec:

Code:

.forum-stats {
color: #d2be98;
font-size: 10px;
padding-left: 10px;
}


.forum-description {
text-align: justify;
border: 1px solid #decebc;
background-color: #f0e7dd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 10px;
padding: 4px;
}






/* CATÉGORIES EN ONGLETS */

/* *** categories *** */

.cat_forum {
-moz-border-radius: ;
border: ;
background-color: ;
margin: ;
}

/* *** liste *** */

.onglet {
display:inline-block;
height:30px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px auto auto;
margin-top:20px;
padding:6px;
}

/* *** configuration de l'élément de liste *** */

.onglet li {
float:left;
width: 80px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: 11px;
horizontal-align: middle;
vertical-align: ;
list-style-type:none;
}

/* *** liens *** */

.onglet li a {
display:block;
text-decoration:none;
margin-left:5px;
color: #CC0000;
}


/* *** liens au survol *** */

.onglet li a:hover {
color:#FC244F;
}


/* *** onglet actif *** */

.onglet_actif {
background: url(' ') repeat-x;
background-color: #E6D5BD
width:100px;
height:30px;
cursor:pointer;
}

/* *** onglet non actif *** */



.onglet_nactif {
background:url(' ') repeat-x;
background-color: #deccb2
width:100px;
height:30px;
cursor:pointer;
}

/* *** ici vos NOM DE CATEGORIE sauf un : il sera afficher en premier *** */

#archives, #amusement, #administration {
display : none;
}

/* Fin */

/* ENCADREMENT DES DERNIERS SUJETS */

.arrondi {
border: 1px solid #decebc;
background-color: #f0e7dd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 6px;
padding: 4px;
}

Je crois que c'est tout... s'il manque quelque chose je chercherai!

Merci (:

[Emie *]

Je me permets de faire un petit UP ^^

[Invité]

Bonjour,

Vous n'êtes pas loin du résultat avec votre template .
- Pour éliminer les espaces, il faut ajouter cellspacing="0" dans le script de vos onglets.
- Ensuite, créez un tableau qui contiendra deux lignes:

• Le titre et les statistiques dans la première ligne.
  
• l'image, la description et les derniers sujets pour la deuxième.

- Pour décaler le titre et les statistiques, on se sert de padding-left pour créer une marge plus ou moins importante, via la feuille CSS.



Cordialement.

[Emie *]

Ah merci beaucoup, en effet j'étais pas loin ^^' mais merci beaucoup pour votre aide =). Pour le padding-left ce sera bon ^^

J'aurais juste une petite question, si je peux la poser dans ce même sujet : avant de mettre le code pour faire des onglets, les coins de mes catégories étaient arrondis, comme l'est l'encadré qui "contient" la page d'accueil. Je me demandais si c'était possible de recréer cet effet?

[Invité]

Je ne vois pas votre page d'accueil car votre forum est fermé aux invités . Essayez en ajoutant dans votre CSS, les propriétés voulues à l'identifiant td .row1, comme ceci par exemple:

Code:

td .row1{
border: 1px solid #decebc;
background-color: #f0e7dd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
margin: 10px;
padding: 4px;
}

Cordialement.

[Emie *]

Oh oui c'est vrai je suis désolée, j'avais oublié :/

Voilà ce que ça me donnait:


Et le code que vous me donnez fonctionne mais s'applique aussi à l'encadré de la page d'accueil, ce qui fait qu'il a un double contour.


Edit: j'ai rendu le forum accessible aux invités, au cas où ^^

[Invité]

En regardant plus attentivement, j'ai trouvé une partie de votre CSS qui est incomplète:

Code:

/* CATÉGORIES EN ONGLETS */
 
/* *** categories *** */
 
.cat_forum {
-moz-border-radius: ;
border: ;
background-color: ;
margin: ;
}

Complètez-la, et vous aurez une bordure arrondie sur vos catégories . Vous pouvez ensuite ajouter le code CSS ci-dessous pour arrondir la cellule à l'intérieur, comme ça les angles ne débordent pas sur le contour:

Code:

td .row1{
-moz-border-radius: 6px ;
-webkit-border-radius: 6px ;
border-radius: 6px ;}

Cordialement.

[Emie *]

Ah oui effectivement, ça marche maintenant!

Merci encore d'avoir pris le temps de m'aider, j'en suis très reconnaissante .

Je mets en problème résolu ^^