un QEEL Personnalisée

[Oetoriya]

Bonjour,
J'aimerai votre aide pour réaliser ce QEEL, j'espère que je ne vous dérange pas trop, et que cette demande est réalisable. Le QEEL sera placé sur un forum test car le forum en lui-même n'est pas crée, mais dès qu'il le sera, je vous en informera au plus vite ^^
Merci d'avance et bonne année :'D

Spoiler:

Le Template index_body:

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Code CSS:

Code:


/*soulignement des liens*/
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none !important;}

/*Catégories*/
        .icones{
          border-top-left-radius: 80px;
          border-bottom-left-radius: 80px;
          background-color: #fff;
          padding: 10px;
          height: 120px;
        }
       
        .descrip{
          border-top-right-radius: 80px;
          border-bottom-right-radius: 80px;
          background-color: #fff;
          padding: 10px;
          height: 120px;
        }
       
        a.forumlink{
          display: block;
          text-align: center;
          margin-bottom: -20px;
          font-size: 16px;
        }



/*contour du forum*/
.bodyline{
background-color: #00000;
-moz-border-radius: 0px 0px 0px 0px ;
border-bottom: 0px #b34240 solid;
border-top: 0px #b34240 solid;
border-right: 15px #b34240 solid;
border-left: 15px #b34240 solid;
}

/*ombre portée sur les liens*/
a.forumlink {
text-shadow: #222222 1px 0px 1px;
    }
a:hover {
text-shadow: #222222 1px 0px 1px;
    }


/*cadre avatar*/
.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
border: 5px solid #778940;
shadow: 3px 3px 3px #000000;}


[kheino]

Bonjour Oetoriya,

Dans ton schéma je vois deux tableaux à onglets, non ?

Mais aussi, les statistiques sont bien le texte au-dessus du tableau avec les deux onglets, oui ?
Donc ce sont bien ces stats qui se retrouveront sous l'onglet en question ?

Enfin, quelle est la hauteur de ton image ? Ou mieux, si tu pouvais donner son url, ce serait plus simple à mettre en place.

[Oetoriya]

Bonjour !

Je me suis trompée, dans l'onglet des statistiques, va figurer les membres qui se seront connecté les dernières 24h. Il y donc bien deux onglets sur mon QEEL.
L'image en question est la suivante:

Code:

http://img15.hostingpics.net/pics/899639queel.png

En tout cas, merci d'avoir pris la peine de répondre! Je commençais à croire qu'elle était irréalisable >o<

[kheino]

Irréalisable ? Que nenni, ce n'est qu'affaire de structure, d' "architecture".
Mais en rentrant d'un bon diner, j'avoue que ça devient quelque peu complexe...

Bon en gros voici le bins :
1- Tout d'abord il faut deux tableaux à onglets différents car l'un a des dimensions fixes et non l'autre, de plus il sont géographiquement top éloignés, or, les identifiants d'un attribut id (# en CSS) ne peut être utiliser qu'une unique fois dans une même page.

Donc deux scripts différents à placer dans le PA >> Modules >> Gestion des codes Javascript > Créer un nouveau js > Titre > cocher "index"
Copier coller le premier js :

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('my_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'my_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'my_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }     
}

Enregistrer.

Passons directement au deuxième js dans une nouvelle page avecun nouveau titre > etc.
C'est le même dans le principe, sauf que les identifiants sont légèrement modifiés afin que ça puisse fonctionner:

Code:

function changeOngleto(_this){
    var getOngletos    = document.getElementById('my_ongletos').getElementsByTagName('span');
    for(var i = 0; i < getOngletos.length; i++){
        if(getOngletos[i].id){
            if(getOngletos[i].id == _this.id){
                getOngletos[i].className = 'my_ongleto_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOngletos[i].className = 'my_ongleto';
                document.getElementById('c' + getOngletos[i].id).style.display    = 'none';
            }
        }
    }     
}

2- Le HTML est un peu plus compliqué parce que nous allons utiliser la fusion des colonnes (cellules, td) colspan, et celle des lignes (row, tr) rowspan.
Tu comprendras mieux en détectant ces propriétés.
Je ne me suis attardée que sur la partie du QEEL du template index_body, et c'est aussi ce que je te donne.
Repère les deux grandes balises du début et de la fin et remplace que cette partie de ton template:

Code:

<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr><td align="center">
 
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
<td align="center"><img src="http://img15.hostingpics.net/pics/899639queel.png" border="0" /></td>
</tr></table>
 
</td></tr> 
<tr><td align="center">

<table width="100%" border="0" cellspacing="8" cellpadding="0"><tr>
<td align="center" colspan="3">
 
<table style="margin: 0 auto;"><tr><td style="padding-bottom: 4px;" align="center" id="my_onglets">
<span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
<span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
<span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
<span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
<span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
<span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
<span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
</td></tr></table>

</td></tr>

<tr>
<td align="center" colspan="2">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td align="left">
<span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td></tr>
<tr><td align="left" class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span>
</td></tr></table>
 
</td>
 
<td align="center" rowspan="2">
<div id="my_contenus">
<div id="co_17" class="my_contenu">CONTENU GR 1</div>
<div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
<div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
<div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
<div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
<div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
<div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
</div>
 
</td></tr>

<tr><td align="center" colspan="2"> 
<table width="100%" style="margin: 4px;"><tr><td style="padding-bottom: 4px;" align="center">
<div id="my_ongletos">
<span id="o_24" class="my_ongleto_selected" onclick="changeOngleto(this);">Who was here</span>
<span id="o_25" class="my_ongleto" onclick="changeOngleto(this);">Crédits</span>
</div>
</td></tr>
<tr><td align="center">
<div id="my_contenusos">
<div id="co_24" class="my_contenuo">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><div class="wwh">CONTENU WWH
<br />
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</div></td></tr></table>
</div>
<div id="co_25" class="my_contenuo" style="display: none;">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><div class="credit">CONTENU CREDITS</div></td></tr></table>
</div>
</div></td></tr></table>
 
</td></tr>
 
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Seul petit souci, je ne me souviens plus où activer la présence lors des dernières heures, et je suis top patiguée ce soir...
Il me semble cependant qu'il s'agit de cette variable :
{L_CONNECTED_MEMBERS}
Mais chez moi elle ne donne rien, donc je dois n'avoir pas activé cette option.

Dans le CSS, je te laisse styler le tout, moi je n'ai pris que celui du tuto d'Isolde et modifié les identifiants en fonction du JS et du HTML:

Code:

/*- tableau groupes
---------------------------*/
.my_onglet {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
.my_onglet:hover {
background: #b8efa1;
}
.my_onglet_selected {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #ffff;
border: 1px solid #000;
}
.my_contenu {
width: 380px;
height: 180px;
color: #000;
line-height: normal;
font-size: 11px;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 10 px;
}
#my_contenus, #my_onglets {
height: 100%;
width: 100%;
}
/*- tableau qeel présence
----------------------------------*/
.my_ongleto {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
.my_ongleto:hover {
background: #b8efa1;
}
.my_ongleto_selected {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #ffff;
border: 1px solid #000;
}
.my_contenuo {
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 10 px;
width: 100%;
line-height: normal;
font-size: 11px;
}
#my_contenusos, #my_ongletos {
height: 100%;
width: 100%;
}

EDIT : Si j'ai mis des tableaux dans des tableaux, c'est pour pouvoir y attribuer des "class" et ainsi mieux styler via le CSS.

[Oetoriya]

Les codes ne sont pas le must pour la digestion, j'approuve.
Donc, j'ai suivis à la lettre l'aide précieuse que vous m'avez fourni, mais malheureusement, le petit cadre contenant les stats' et les crédits chevauche celle des descriptifs des différents groupes:

Spoiler:

J'ai aussi une demande, serait-il possible que les onglets changent au survol ?

En tout cas, merci pour votre réponse qui a été très rapide ** !

[kheino]

Il me faudrait le lien de ton FT (Forum Test).

Moi je n'ai pas ce souci et c'est parfaitement aligné avec les stats.

Spoiler:

A moins que ce ne soit lié au WWH justement... Pourrais-tu m'indiquer où l'on active cette option ?

En revanche, je constate que ton tableau des groupes est plus grand que les dimensions que tu as mentionnées dans le schéma (on dirait un carré et non un rectangle), mais l'un dans l'autre, ce n'est pas ce qui devrait avoir une incidence sur le souci en question parce que justement ce sont des cellules d'un même tableau, donc elles ne peuvent pas se chevaucher normalement.

Pour ce qui est du hover, tu peux le modifier selon le tuto d'Isolde, dans les explications au début du HTML.
Perso, ce n'est que mon opinion, je déconseille le "hover" parce qu'il est souvent non intentionnel.


EDIT : Oublie le WWH, j'ai trouvé, et ça ne change rien pour moi. Le tableau est toujours parfaitement aligné et séparé de l'autre, comme sur la capture.
Donc, il me faudrait le lien de ton FT.

[Oetoriya]

Le lien de mon forum test:


Pour ce qui est d'activer le WWH, Affichage > Généralités > Afficher la liste des membres connectés au cours des 24* dernières heures ^^
Je me suis permise de modifier un peu la taille, car mon schéma n'était pas dans les réelles proportions, désolé d'avoir oublié de le mentionner, mais je suis d'accord qu'il est..... grand °°

[kheino]

Pour ce qui est du hover, tu peux le modifier selon le tuto d'Isolde, dans les explications au début du HTML.
Pense à mettre au my_onglet_selected la même couleur de fond (même avec le clic) que le my_onglet:hover parce que sinon c'est assez "perturbant".
Perso, ce n'est que mon opinion, je déconseille le "hover" parce qu'il est souvent non intentionnel.

Bon plus simple, redonne-moi la partie du template concernée, parce qu'il me semble que tu as dû modifier de celui du tuto, ce que tu peux faire, mais sans toucher à la structure de base, sinon c'est fichu.

[Oetoriya]

Je n'ai touché qu'une valeur, celui de la largeur ^^

Code:

/*QEEL*/
        /*- tableau groupes
        ---------------------------*/
        .my_onglet {
        display: inline;
        padding: 2px;
        margin: 2px;
        color: #000;
        background: #fff;
        border: 1px solid #000;
        cursor: pointer;
        }
        .my_onglet:hover {
        background: #b8efa1;
        }
        .my_onglet_selected {
        display: inline;
        padding: 2px;
        margin: 2px;
        color: #000;
        background: #ffff;
        border: 1px solid #000;
        }
        .my_contenu {
        width: 380px;
        height: 190px;
        color: #000;
        line-height: normal;
        font-size: 11px;
        background: #fff;
        border: 1px solid #000;
        padding: 10px;
        margin: 10 px;
        }
        #my_contenus, #my_onglets {
        height: 100%;
        width: 100%;
        }
        /*- tableau qeel présence
        ----------------------------------*/
        .my_ongleto {
        display: inline;
        padding: 2px;
        margin: 2px;
        color: #000;
        background: #fff;
        border: 1px solid #000;
        cursor: pointer;
        }
        .my_ongleto:hover {
        background: #b8efa1;
        }
        .my_ongleto_selected {
        display: inline;
        padding: 2px;
        margin: 2px;
        color: #000;
        background: #ffff;
        border: 1px solid #000;
        }
        .my_contenuo {
        color: #000;
        background: #fff;
        border: 1px solid #000;
        padding: 10px;
        margin: 10 px;
        width: 100%;
        line-height: normal;
        font-size: 11px;
        }
        #my_contenusos, #my_ongletos {
        height: 100%;
        width: 100%;
        }

[kheino]

Même en touchant à la largeur la marge reste, ça ne fait que rapetisser les colonnes de gauche sans toucher à la marge (j'ai mis 580px de largeur et c'est toujours bon).

De plus, je t'ai demander la partie concernée du template, non du CSS^^

[Oetoriya]

Je n'ai pas retouché le template par contre, celui-ci est resté intact .

Code:

 <!-- BEGIN disable_viewonline -->
        <table width="100%" border="0" cellspacing="8" cellpadding="0">
        <tr><td align="center">
       
        <table width="100%" border="0" cellspacing="8" cellpadding="0">
        <tr>
        <td align="center"><img src="http://img15.hostingpics.net/pics/899639queel.png" border="0" /></td>
        </tr></table>
       
        </td></tr>
        <tr><td align="center">
       
        <table width="100%" border="0" cellspacing="8" cellpadding="0"><tr>
        <td align="center" colspan="3">
       
        <table style="margin: 0 auto;"><tr><td style="padding-bottom: 4px;" align="center" id="my_onglets">
        <span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
        <span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
        <span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
        <span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
        <span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
        <span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
        <span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
        </td></tr></table>
       
        </td></tr>
       
        <tr>
        <td align="center" colspan="2">
        <table width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td align="left">
        <span class="gensmall">{TOTAL_POSTS}<br />
        {TOTAL_USERS}<br />
        {NEWEST_USER}</span></td></tr>
        <tr><td align="left" class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}<br />
        <br />
        {LOGGED_IN_USER_LIST}</span>
        </td></tr></table>
       
        </td>
       
        <td align="center" rowspan="2">
        <div id="my_contenus">
        <div id="co_17" class="my_contenu">CONTENU GR 1</div>
        <div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
        <div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
        <div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
        <div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
        <div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
        <div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
        </div>
       
        </td></tr>
       
        <tr><td align="center" colspan="2">
        <table width="100%" style="margin: 4px;"><tr><td style="padding-bottom: 4px;" align="center">
        <div id="my_ongletos">
        <span id="o_24" class="my_ongleto_selected" onclick="changeOngleto(this);">Who was here</span>
        <span id="o_25" class="my_ongleto" onclick="changeOngleto(this);">Crédits</span>
        </div>
        </td></tr>
        <tr><td align="center">
        <div id="my_contenusos">
        <div id="co_24" class="my_contenuo">
        <table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
        <td align="center"><div class="wwh">CONTENU WWH
        <br />
        {L_CONNECTED_MEMBERS}
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
        </div></td></tr></table>
        </div>
        <div id="co_25" class="my_contenuo" style="display: none;">
        <table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
        <td align="center"><div class="credit">CONTENU CREDITS</div></td></tr></table>
        </div>
        </div></td></tr></table>
       
        </td></tr>
       
        <tr>
        <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
        </tr>
        <!-- BEGIN switch_chatbox_activate -->
        <tr>
        <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
        <div id="chatbox_popup"></div>
        <script type="text/javascript">
        //<![CDATA[
        insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
        //]]>
        </script>
        <!-- END switch_chatbox_popup -->
        </span>
        </td>
        </tr>
        <!-- END switch_chatbox_activate -->
        </table>
        <!-- END disable_viewonline -->

[kheino]

C'est comme chez le Doc, si tu ne me donnes pas ce que tu as mis dans le forum test (je ne vois toujours pas quelqu'un de connecté), je ne peux pas t'aider.
En mettant ton CSS et la partie du template que tu me donnes, je suis toujours OK chez moi.
Or, en regardant sur ton forum-test, les éléments ne sont pas alignés, il n'y a pas le fond du class="row1" que moi j'ai laissé, etc.

Bref, peux-tu me donner ce qui est appliqué dans le template du forum-test et rien d'autre ?

[Oetoriya]

Je suis pas certaine avoir tout bien saisi, mais voici l'ensemble de mon index_body:

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%" class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

        <!-- BEGIN disable_viewonline -->
        <table width="100%" border="0" cellspacing="8" cellpadding="0">
        <tr><td align="center">
       
        <table width="100%" border="0" cellspacing="8" cellpadding="0">
        <tr>
        <td align="center"><img src="http://img15.hostingpics.net/pics/899639queel.png" border="0" /></td>
        </tr></table>
       
        </td></tr>
        <tr><td align="center">
       
        <table width="100%" border="0" cellspacing="8" cellpadding="0"><tr>
        <td align="center" colspan="3">
       
        <table style="margin: 0 auto;"><tr><td style="padding-bottom: 4px;" align="center" id="my_onglets">
        <span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
        <span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
        <span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
        <span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
        <span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
        <span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
        <span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
        </td></tr></table>
       
        </td></tr>
       
        <tr>
        <td align="center" colspan="2">
        <table width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td align="left">
        <span class="gensmall">{TOTAL_POSTS}<br />
        {TOTAL_USERS}<br />
        {NEWEST_USER}</span></td></tr>
        <tr><td align="left" class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
        {RECORD_USERS}<br />
        <br />
        {LOGGED_IN_USER_LIST}</span>
        </td></tr></table>
       
        </td>
       
        <td align="center" rowspan="2">
        <div id="my_contenus">
        <div id="co_17" class="my_contenu">CONTENU GR 1</div>
        <div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
        <div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
        <div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
        <div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
        <div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
        <div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
        </div>
       
        </td></tr>
       
        <tr><td align="center" colspan="2">
        <table width="100%" style="margin: 4px;"><tr><td style="padding-bottom: 4px;" align="center">
        <div id="my_ongletos">
        <span id="o_24" class="my_ongleto_selected" onclick="changeOngleto(this);">Who was here</span>
        <span id="o_25" class="my_ongleto" onclick="changeOngleto(this);">Crédits</span>
        </div>
        </td></tr>
        <tr><td align="center">
        <div id="my_contenusos">
        <div id="co_24" class="my_contenuo">
        <table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
        <td align="center"><div class="wwh">CONTENU WWH
        <br />
        {L_CONNECTED_MEMBERS}
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
        </div></td></tr></table>
        </div>
        <div id="co_25" class="my_contenuo" style="display: none;">
        <table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
        <td align="center"><div class="credit">CONTENU CREDITS</div></td></tr></table>
        </div>
        </div></td></tr></table>
       
        </td></tr>
       
        <tr>
        <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
        </tr>
        <!-- BEGIN switch_chatbox_activate -->
        <tr>
        <td class="row1">
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
        <!-- BEGIN switch_chatbox_popup -->
        <div id="chatbox_popup"></div>
        <script type="text/javascript">
        //<![CDATA[
        insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
        //]]>
        </script>
        <!-- END switch_chatbox_popup -->
        </span>
        </td>
        </tr>
        <!-- END switch_chatbox_activate -->
        </table>
        <!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
    status: true,
    cookie: true,
    xfbml: true,
   oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

[kheino]

Ayeah j'ai saisi !

C'est la largeur de ton forum qui posait problème, par rapport au mien le tien est bien plus mince et je n'y avait pas fait attention...

En plus (et surtout) il y avait une erreur dans le CSS avec le margin: 10 px; l'espace entre le 10 et le px

Bref, revoici la partie concernée du template :

Code:

<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr><td align="center">
 
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr><td align="center"><img src="http://img15.hostingpics.net/pics/899639queel.png" border="0" /></td></tr>
</table>
 
</td></tr> 
<tr><td align="center">
 
<table width="100%" border="0" cellspacing="8" cellpadding="0"><tr>
<td align="center" colspan="3">
 
<table style="margin: 0 auto;"><tr><td style="padding-bottom: 4px;" align="center" id="my_onglets">
<span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
<span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
<span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
<span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
<span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
<span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
<span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
</td></tr></table>
 
</td></tr>
<tr><td align="center" colspan="2">

<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td align="left">
<span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td></tr>
<tr><td align="left"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span>
</td></tr></table>
 
</td>
<td align="center" rowspan="2">

<table border="0" cellspacing="3" cellpadding="0"><tr><td>
<div id="my_contenus">
<div id="co_17" class="my_contenu">CONTENU GR 1</div>
<div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
<div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
<div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
<div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
<div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
<div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
</div>
</td></tr></table>
 
</td></tr>
<tr><td align="center" colspan="2"> 
 
<table width="100%" cellspacing="3"><tr><td style="padding-bottom: 4px;" align="center">
<div id="my_ongletos">
<span id="o_24" class="my_ongleto_selected" onclick="changeOngleto(this);">Who was here</span>
<span id="o_25" class="my_ongleto" onclick="changeOngleto(this);">Crédits</span>
</div>
</td></tr>
<tr><td align="center">
<div id="my_contenusos">
<div id="co_24" class="my_contenuo">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><div class="wwh">CONTENU WWH
<br />
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</div></td></tr></table>
</div>
<div id="co_25" class="my_contenuo" style="display: none;">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><div class="credit">CONTENU CREDITS</div></td></tr></table>
</div>
</div></td></tr></table>
 
</td></tr></table>

</td></tr> 
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Ainsi que le CSS corrigé :

Code:

/*QEEL*/
/*- tableau groupes
---------------------------*/
.my_onglet {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
.my_onglet:hover {
background: #b8efa1;
}
.my_onglet_selected {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #b8efa1;
border: 1px solid #000;
}
.my_contenu {
width: 380px;
height: 190px;
color: #000;
line-height: normal;
font-size: 11px;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 0 auto; /*centre le tout*/
}
#my_contenus, #my_onglets {
height: 100%;
width: 100%;
}
/*- tableau qeel présence
----------------------------------*/
.my_ongleto {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
.my_ongleto:hover {
background: #b8efa1;
}
.my_ongleto_selected {
display: inline;
padding: 2px;
margin: 2px;
color: #000;
background: #b8efa1;
border: 1px solid #000;
}
.my_contenuo {
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 0 10px;
width: 90%;
line-height: normal;
font-size: 11px;
}
#my_contenusos, #my_ongletos {
height: 100%;
width: 100%;
}

EDIT : J'ai mis un width (largeur) de 90% au contenu du second tableau, sinon avec les margin et les padding, plus la largeur du premier tableau, effectivement dans la "minceur" de ton forum, ça se touche, ou bien se chevauche.

Ensuite, Si ce que tu as à mettre dans le contenu des groupes est long, je te suggère de mettre une scrollbar dans l'identifiant concerné:

.my_contenu {
width: 380px;
height: 190px;
overflow-y: auto; /*le -y est pour indiquer la hauteur et auto pour qu'elle se place dès que la longueur du contenu excède la hauteur fixée*/
color: #000;
line-height: normal;
font-size: 11px;
background: #fff;
border: 1px solid #000;
padding: 10px;
margin: 0 auto;
}

[Oetoriya]

Merci pour cette réponse rapide, ça fonctionne parfaitement bien à présent ! Il n'y a plus de soucis au niveau du chevauchement et le codage correspond à ce que j'avais demandé :'D Je vais donc pouvoir commencer à le personnaliser ~
Merci beaucoup pour ta patience en tout cas ^^ !

[kheino]

Je t'en prie^^

Je te donne à tout hasard une structure différente qui ne change pas beaucoup, mais le tout est dans le même tableau, ce qui rend la chose un peu plus compacte et avec la scrollbar dans le 1er groupe:

Code:

<!-- BEGIN disable_viewonline -->
<table style="margin: 0 auto;" width="100%" border="0" cellspacing="4" cellpadding="0">
<tr><td align="center" colspan="3">
<img src="http://img15.hostingpics.net/pics/899639queel.png" border="0" />
</td></tr>

<tr><td align="center" colspan="3">
 
<table style="margin: 0 auto;"><tr><td style="padding-bottom: 4px;" align="center" id="my_onglets">
<span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Goupe 1</span>
<span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Goupe 2</span>
<span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Goupe 3</span>
<span id="o_20" class="my_onglet" onclick="changeOnglet(this);">Goupe 4</span>
<span id="o_21" class="my_onglet" onclick="changeOnglet(this);">Goupe 5</span>
<span id="o_22" class="my_onglet" onclick="changeOnglet(this);">Goupe 6</span>
<span id="o_23" class="my_onglet" onclick="changeOnglet(this);">Goupe 7</span>
</td></tr></table>
 
</td></tr>
<tr><td align="center" colspan="2">

<table style="margin: 0 auto;" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="left">
<span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td></tr>
<tr><td align="left"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span>
</td></tr></table>
 
</td>
<td align="center" rowspan="2">

<table style="margin: 0 auto;" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div id="my_contenus">
<div id="co_17" class="my_contenu">CONTENU GR 1<br />
  Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
    A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div>
<div id="co_18" class="my_contenu" style="display: none;">CONTENU GR 2</div>
<div id="co_19" class="my_contenu" style="display: none;">CONTENU GR 3</div>
<div id="co_20" class="my_contenu" style="display: none;">CONTENU GR 4</div>
<div id="co_21" class="my_contenu" style="display: none;">CONTENU GR 5</div>
<div id="co_22" class="my_contenu" style="display: none;">CONTENU GR 6</div>
<div id="co_23" class="my_contenu" style="display: none;">CONTENU GR 7</div>
</div>
</td></tr></table>
 
</td></tr>
<tr><td align="center" colspan="2"> 
 
<table style="margin: 0 auto;" width="100%"><tr><td style="padding-bottom: 4px;" align="center">
<div id="my_ongletos">
<span id="o_24" class="my_ongleto_selected" onclick="changeOngleto(this);">Who was here</span>
<span id="o_25" class="my_ongleto" onclick="changeOngleto(this);">Crédits</span>
</div>
</td></tr>
<tr><td align="center">
<div id="my_contenusos">
<div id="co_24" class="my_contenuo">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><div class="wwh">CONTENU WWH
<br />
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</div></td></tr></table>
</div>
<div id="co_25" class="my_contenuo" style="display: none;">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><div class="credit">CONTENU CREDITS</div></td></tr></table>
</div>
</div></td></tr></table>

</td></tr> 
<tr>
<td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>
<!-- BEGIN switch_chatbox_activate -->
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

[Oetoriya]

Merci, ça a régler la légère déformation au niveau de la largeur du forum **
C'est magiiique /BUS/ ! Merci encore ( ´ ▽ ` )ﾉ