Qeel en onglet : comment faire?

[Aliichaa]

Bonjours !
J'aimerais qu'on me dise comment faire un qeel avec des onglet ^^, comme sur mon shéma, j'ai réussit à mettre les image des deux côté mais, quand j'essaie de faire les onglets, tout foire...




mon template

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%" cellspacing="8"><tr>
 
  <td class="contourqeelm"><center><img src="http://img4.hostingpics.net/pics/389436qeelblue1.png" /></center></td><td>
 
  <table id="qeel" class="contourqeel" width="100%" border="0" cellspacing="1" cellpadding="0">   <tr>
    <td><span class="titreqeel"> <center>Qui est en ligne</center> </span></td>
   </tr>
   <tr>
      
      <td class="row1" width="100%"><span class="gensmall"><center>{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}</center>
   <tr>
          <td class="row1"><span class="gensmall"><center>{LEGEND} : {GROUP_LEGEND}</center></span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall"><center>{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> </center>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
 
  </td><td class="contourqeelm"><center><img src="http://img4.hostingpics.net/pics/959376qeelblue2.png" /></center></td></tr></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 -->

voila, j'espère que vous pourrais m'aider, moi je sèche..

[kheino]

Bonjour Aliichaa,

Tout d'abord, dans les templates, si ce n'est pas à l'origine le cas, les balises apparaissant en rouge témoignent d'erreurs soit de fermeture par rapport à d'autres balises.
Chez toi, ce sont tes balises >center< qui en sont à l'origine.
Pourquoi ajouter des balises "center" quand on peut aligner par le "td" (même verticalement avec celle-ci) ou le "div", hum ?
Bref, là c'est corrigé et du coup plus propre.

Donc c'est le modèle 2 du tuto d'Isolde que tu aimerais...
Tout d'abord, tu héberges le script dans le PA >> Modules >> Gestion des codes javascript > Nouveau script > Coche "Index" :

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';
            }
        }
    }     
}

Attention, si tu as déjà un tableau à onglet dans le message d'accueil (comme c'est le cas pour beaucoup), il te faut modifier les attributs id dont un identifiant ne peut apparaitre qu'une unique fois par page.
Dans le script plus haut, c'est déjà modifié.

Exceptionnellement, plaçons le CSS de ce tableau d'abord (que tu regrouperas avec le CSS du QEEL):

Spoiler:

Même chose que pour le script et plus bas pour le HTML, on modifie les identifiants du id et là aussi les identifiants du class, histoire de tout séparer en cas d'un autre tableau du genre.

Ensuite dans le template index_body,on applique le HTML comme l'indique le tuto, et en fonction de ce que tu veux obtenir :

Code:

<!-- BEGIN disable_viewonline -->
<table class="contourqeelm" width="100%" cellspacing="8"><tr>

<td align="center"><img src="http://img4.hostingpics.net/pics/389436qeelblue1.png" /></td>
 
<td align="center">
<table id="qeel" class="contourqeel" width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
 
<td align="center">
<table style="margin: auto;"><tr><td style="padding-bottom: 4px;" align="center" id="my_onglets">
<span id="o_17" class="my_onglet_selected" onclick="changeOnglet(this);">Statistiques</span>
<span id="o_18" class="my_onglet" onclick="changeOnglet(this);">Staff</span>
<span id="o_19" class="my_onglet" onclick="changeOnglet(this);">Groupes</span></td></tr>
<tr><td id="my_contenus">
<div class="clear">
 
<div id="co_17" class="my_contenu">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center"><span class="titreqeel">Qui est en ligne</span></td>
</tr>
<tr>
<td class="row1" width="100%" align="center"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></td>
</tr>
<tr>
<td class="row1"><span class="gensmall" align="center">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br /><br />
{LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</table>
</div>

<div id="co_18" class="my_contenu" style="display: none;">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td align="center">CONTENU STAFF</td>
</tr></table>
</div>

<div id="co_19" class="my_contenu" style="display: none;">
<table width="100%" border="0" cellspacing="1" cellpadding="0"><tr>
<td class="row1" align="center"><span class="gensmall" align="center">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr></table>
</div>

</div></td></tr></table>

</td></tr>
 
  <!-- BEGIN switch_chatbox_activate -->
  <tr>
      <td class="row1" align="center">
        <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>

</td>
 
<td align="center"><img src="http://img4.hostingpics.net/pics/959376qeelblue2.png" /></td>
</tr></table>
<!-- END disable_viewonline -->

En HTML ce qu'il faut retenir, c'est que ça fonctionne comme une structure :
Un tableau (même s'il en contient d'autres) n'a pas besoin que l'on lui dise d'appliquer les propriétés d'un même "class" à chaque cellule. De ce fait, si tu attribues à ton "table" principal un class="contourqeelm", ce sera appliqué à tout ce tableau.
En outre, si tu veux modifier les propriétés d'un tableau que le principal contient, et que c'est valable aussi pour les cellules, tu attribueras un autre "class" au "table".
Si dans un tableau, une cellule ("td") doit avoir d'autres propriétés que le "table" et les autres cellules, alors il faut attribuer un "class" différent à ce "td", et si toutes les cellules d'une ligne doivent avoir les mêmes propriétés, on attribuera le "class" au "tr" avec dans le CSS après l'identifiant une mention td:

.identifiant td {
propriétés
}
OU
tr.identifiant td {
propriétés
}

[Aliichaa]

Je n'ai pas tout comprit, mais j'ai vu mes erreurs ...
J'ai essayer le template que vous m'avez gentillment fait mais , je pense qu'il y a un soucis...

http://delirekuroshitsuji.meilleurforum.net/

Les catégories ne s'affiche plus, et le template conscerné n'est pas modifier sur mon forum test...

[kheino]

Euh, ce n'est pas le template que j'ai donné parce que justement je ne cherche pas à savoir ce qu'il pourrait y avoir d'autre de modifié.
Donc je me concentre juste et seulement sur la partie concernée du QEEL.
Regarde bien où commence et se termine le bloc que j'ai donné plus haut, c'est à partir et jusqu'à ces deux grandes balises:

<!-- BEGIN disable_viewonline -->
CODES
<!-- END disable_viewonline -->

Pour ce que tu n'aurais pas compris, n'hésite pas à demander.

[Aliichaa]

ah oui, la ça marche ôo
Désolé, hier sort, je n'étais pas vraiment en force, donc, je n'ai pas bien comprit x) , mais maintenant, je vois encore mon erreur xD


Je valide le topic ^^
A moins que, dernière question : je peut donner la forme que je veut à mes onglet? Il n'y aura pas de soucis?

[kheino]

Oui bien sûr, tu peux leur appliquer du "radius", du "box-shadow", des fonds, d'autres dimensions, etc.
Tu peux même le faire sur la box contenante.
Tu peux aussi attribuer une hauteur fixe à la box contenante.

A plus et bonne journée.


EDIT : Quelque chose me surprend sur ton tableau, c'est que le mien a une hauteur fixe et pas la largeur. Le tien a les deux qui ne sont pas fixes ce qui est désagréable pour la hauteur parce que le curseur se retrouve dans le vide quand il s'agit de plus petits contenus...

[Aliichaa]

Oui, c'est normal pour le tableau, j'ai commencer des essaie et j'ai retiré la hauteur imposé sans faire attention, mais je sais la remettre ^^

Encore merci, je mets le sujet en résolue !