Rappel du premier message :

Un onglet pour deux contenus

Suite à une demande de Filou voici un QEEL.

Je précise que l'arrière plan rose foncé correspond à mon forum.



Et le code :
Le template index-body.

Repérez ceci (entre les lignes 173 et 221 du template de base) :

Code:

<!-- 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} :&nbsp; {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 -->

Et remplacez-le par ça :

Code:

<!-- BEGIN disable_viewonline -->
<br /><div class="QEEL_img"></div>
<div class="QEEL_fond">
      <!-- BEGIN switch_viewonline_nolink -->
      <div class="QEEL_titre">Qui est en ligne ?</div>
      <!-- END switch_viewonline_nolink -->
<script type="text/javascript">
        //<!--
                function change_onglet(bouya)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
         document.getElementById('contenu_onglet2_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet2_'+bouya).style.display = 'block';
                        anc_onglet = bouya;
                }
        //-->
</script><div class="QEEL_bloc"><div class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Groupe 1</div><div class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Groupe 2</div><div class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Groupe 3</div><div class="onglet_0 onglet" id="onglet_quatre" onmouseover="javascript:change_onglet('quatre');">Groupe 4</div><div class="onglet_0 onglet" id="onglet_cinq" onmouseover="javascript:change_onglet('cinq');">Groupe 5</div><div class="onglet_0 onglet" id="onglet_six" onmouseover="javascript:change_onglet('six');">Groupe 6</div><div class="onglet_0 onglet" id="onglet_sept" onmouseover="javascript:change_onglet('sept');">Groupe 7</div><div class="onglet_0 onglet" id="onglet_huit" onmouseover="javascript:change_onglet('huit');">Groupe 8</div></div>
<div class="contenu_onglet" id="contenu_onglet_un">
    Contenu du 1er onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_deux">
    Contenu du 2ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_trois">
    Contenu du 3ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_quatre">
    Contenu du 4ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_cinq">
    Contenu du 5ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_six">
    Contenu du 6ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_sept">
    Contenu du 7ième onglet
</div>
<div class="contenu_onglet" id="contenu_onglet_huit">
    Contenu du 8ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_un">
    Membres du 1er onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_deux">
    Membres du 2ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_trois">
    Membres du 3ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_quatre">
    Membres du 4ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_cinq">
    Membres du 5ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_six">
    Membres du 6ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_sept">
    Membres du 7ième onglet
</div>
<div class="contenu_onglet2" id="contenu_onglet2_huit">
    Membres du 8ième onglet
</div><script type="text/javascript">
        //<!--
                var anc_onglet = 'un';
                change_onglet(anc_onglet);
        //-->
  </script>
<div class="QEEL_desc"><div class="QEEL_soustitre">Description :</div>
</div><div class="QEEL_user"><div class="QEEL_soustitre">Membres :</div>
</div>
<div class="QEEL_stat"><div class="QEEL_soustitre">Statistiques :</div>{TOTAL_POSTS}<br />{TOTAL_USERS}<br />{NEWEST_USER}<br /><br />{TOTAL_USERS_ONLINE}<br />{RECORD_USERS}<br /><br />{LOGGED_IN_USER_LIST}<table class="transparent">{L_CONNECTED_MEMBERS}</table>
</div>
<a href="http://www.never-utopia.com" style="display: block; text-decoration: none; position: absolute; top: 355px; left: 380px;">A-Lice | Never-Utopia</a>
</div>
<!-- END disable_viewonline -->

CSS :

Code:

/************QEEL par A-Lice************/
.QEEL_img {
width: 850px;
height: 230px;
overflow: hidden;
margin: auto;
background: url(http://nsa34.casimages.com/img/2015/03/18/150318061744808586.png);
}

.QEEL_fond {
width: 850px;
height: 375px;
margin: auto;
background: dimgray;
color: black;
font-size: 12px;
position: relative;
}

.QEEL_titre {
font-size: 40px;
font-family: Times New Roman;
text-align: center;
color: black;
position: relative;
top: -15px;
}

.QEEL_stat {
width: 600px;
height: 140px;
padding: 10px;
text-align: justify;
background: silver;
overflow: auto;
position: absolute;
top: 190px;
left: 205px;
}

.transparent .row1 {
background-color: transparent;
}
.transparent .gensmall {
font-size: 12px;
}

.QEEL_desc {
width: 340px;
height: 130px;
padding: 10px;
background: silver;
position: absolute;
top: 20px;
left: 205px;
}

.QEEL_user {
width: 230px;
height: 130px;
padding: 10px;
background: silver;
position: absolute;
top: 20px;
left: 575px;
}

.QEEL_soustitre {
font-size: 16px;
font-weight: bold;
}

.QEEL_bloc {
width: 170px;
height: 375px;
position: absolute;
top: 20px;
left: 20px;
}

/*onglets*/
.onglet {
width: 155px;
height: 22px;
padding: 5px;
background: silver;
margin-bottom: 10px;
box-shadow: 1px 2px 5px black;
}

.onglet_0 {
background: silver;
}

.onglet_1 {
background: white;
}

#onglet_un {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_deux {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_trois {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_quatre {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_cinq {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_six {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_sept {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

#onglet_huit {
color: black;
text-align: center;
font-weight: bold;
font-size: 16px;
}

.contenu_onglet {
color: black;
position: relative;
width: 340px;
height: 110px;
left: 215px;
top: 50px;
display: none;
overflow: auto;
z-index: 20;
}

#contenu_onglet_un {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_deux{
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_trois {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_quatre {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_cinq {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_six {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_sept {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet_huit {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

.contenu_onglet2 {
color: black;
position: relative;
width: 230px;
height: 110px;
left: 585px;
top: -60px;
display: none;
overflow: auto;
z-index: 20;
}

#contenu_onglet2_un {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_deux{
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_trois {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_quatre {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_cinq {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_six {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_sept {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}

#contenu_onglet2_huit {
font-size: 12px;
text-align: justify;
font-family: Times New Roan Regular;
}
/*fin onglets*/
/************Fin QEEL par A-Lice************/

mecri

Merci du partage ^^

Je te pique ça. o: Merci ! o/

Thank's !

mici ;33

Merci

merci

Merci !

Merci !

Merci !

merci

Merci ! :3

Merci beaucoup !

Merci !

Merci

Il a l'air génial, je vais le tester de suite o/

Merci ~

Ty

Merci !

merchi o/

Meeerciiiiii ♥

Merci! Je vais essayer :)

Merci bien ! :3

Merci :)

C'est superbe ! merci pour ce partage :)