problème onglet dans le qeel

[Nelliel]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : quelques jours
Lien du forum : http://www.yesyou-can.com/

Description du problème

Bonjour et merci de prendre de votre temps pour lire mon souci.

Alors, voilà, je suis en train de coder la nouvelle version du forum (qui n'est donc pas sur YC actuellement) mais sur le forum test que je vais donner en hide.
Donc mon problème en fait, j'essaie de faire un onglet sur la partie à droite du QEEL, pour les stats et les anciens connectés, j'ai lu pas mal de topic sur le forum pour voir, puis j'ai suivis le tuto des tableaux onglet que FA propose. Bémol, ça ne marche pas... J'ai testé 3 tableaux... aucun ne marche... Je me demandais, est-ce que le fait, que j'ai déjà inséré un tableau onglet dans ma PA ne ferait pas boguer celui que je veux mettre dans le qeel ? J'y perds mon latin, j'ai pourtant suivis le tuto à la lettre... Alors, mon autre question est... Est-ce que ça ne vient pas de mon code total pour le qeel ? Je cherche depuis plusieurs jours et là, je crois que j'ai réellement besoin d'aide xD

voici mes codes sans les onglets :

code css :

Code:

/* QEEL */

.fond {background-image:url(http://i.imgur.com/1u6Ww3O.png);
  width:750px; height:373px;
background-repeat : no-repeat;}

.boite_1_qeel {width:200px;height:120px;padding:5px;position:relative;top:0px;
  left:-35px;top: 40px; font-size:11px;text-align:justify; overflow:auto;  display: block;
  color : #292929!important; background-color:#;
  text-transform:uppercase;
  -moz-transition:all 0.8s; /* Mozilla Firefox */
  -webkit-transition:all 0.8s; /* Safari et Google Chrome */
  -o-transition:all 0.8s; /* Opera */
    transition:all 0.8s;
border-left: 1px solid #; border-right: 1px solid #;
  border-top: 1px solid #; border-bottom: 1px solid #;}
.ilwena {height:55px;overflow:auto;}

.onetaitla {width:200px;height:260px;position:relative;
font-size:10px;top:0px; text-align:justify; overflow:auto;
  margin-left:0px;padding:0px;}
.boite_1_qeel::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #C8C4C8;}
 
.boite_1_qeel::-webkit-scrollbar-track {
  background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
 
.boite_1_qeel::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #C8C4C8 /*couleur de l'ascenseur*/;}

#kumao {inline:block;}
#blabla {inline:block;}
#blibli {inline:block;}
#blublu {inline:block;}

.onestla {width:210px;height:120px;padding:5px;position:relative;top:0px;
  left:-35px;top: 40px; font-size:11px;text-align:justify; overflow:auto; display: block;
  color : #292929!important; background-color:#; 
  text-transform:;
  -moz-transition:all 0.8s; /* Mozilla Firefox */
  -webkit-transition:all 0.8s; /* Safari et Google Chrome */
  -o-transition:all 0.8s; /* Opera */
    transition:all 0.8s;
border-left: 1px solid #; border-right: 1px solid #;
  border-top: 1px solid #; border-bottom: 1px solid #;}

.onestla::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #C8C4C8;}
 
.onestla::-webkit-scrollbar-track {
  background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
 
.onestla::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #C8C4C8 /*couleur de l'ascenseur*/;}

.boite_qeel_credit {width:200px;height:260px;padding:5px;position:relative;top:0px;
  left:35px;top: 45px; text-align:justify; overflow:auto; display: block;
  color : #292929!important; background-color:#; 
  text-transform:; line-height: 100%;  font-family:arial;
  font-size:8px; letter-spacing:2px; line-height:7px;
  -moz-transition:all 0.8s; /* Mozilla Firefox */
  -webkit-transition:all 0.8s; /* Safari et Google Chrome */
  -o-transition:all 0.8s; /* Opera */
    transition:all 0.8s;
border-left: 1px solid #; border-right: 1px solid #;
  border-top: 1px solid #; border-bottom: 1px solid #;}

/*posteur et voteur du mois qeel*/
.posteurvoteur { width: 88px; height: 108px;
  background: white; color: #737373;
  overflow: auto; font-family:arial;
  font-size:8px; letter-spacing:2px; line-height:12px; 
  text-align: justify; padding: 4px;
  opacity: 0; -webkit-transition:all 0.7s ease-in-out;
  -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
  -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
.posteurvoteur:hover { opacity: .9; }
.posteurvoteur::-webkit-scrollbar { width: 5px; }
.posteurvoteur::-webkit-scrollbar-track  { background-color: #eee; }
.posteurvoteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

le template :

Code:

<!-- BEGIN disable_viewonline -->
       
      <center><br><br>
  <div class="fond" width="750" align="center" style="margin:0 auto;">
    <table><tr><td>
      <div class="boite_qeel_credit"> Le forum appartient entièrement au staff, toute reproduction partielle ou totale est interdite. Le design a été créé par Crystal (Goldheart) et Minnie (CaTa`Str0ph!). Le css a été créé par Hae-Jin (Nelliel). Forum principalement optimisé pour Google Chrome.
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="198" height="80">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
    <param name="bgcolor" value="#ffffff" />
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/bdsubh5255/Beyonce_-_Run_the_world_Kaskade_Club_Remix_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/azu4end65b/Empire_State_of_Mind_Jay-Z_-_Alicia_Keys_OFFICIAL_VIDEO_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/xrqei4u112/Frank_Sinatra_New_York_New_York.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/qkk6zpjmff/Nirvana_-_My_girl_Where_did_You_sleep_last_night_Lyrics.mp3&amp;width=198&amp;height=80&amp;showslider=0&amp;skin=http%3A//i.imgbox.com/fOspqt4S.jpg&amp;loadingcolor=ffffff&amp;bgcolor1=ffffff&amp;bgcolor2=ffffff&amp;slidercolor1=ffffff&amp;slidercolor2=ffffff&amp;sliderovercolor=ffffff&amp;buttonovercolor=ffffff&amp;showlist=0&amp;currentmp3color=ffffff&amp;scrollbarovercolor=ffffff" />
</object>
      <table><tr><td> <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/KyF7b6o.png);"><div class="posteurvoteur"><b>Jénova Arov</b> est notre posteur du mois avec <i>627</i> messages postés ! Bravo à elle :3 Qui saura la détroner ? </div>  </td><td>      <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/85DMCSX.png);"><div class="posteurvoteur"><b>Altéa Finley</b> est notre voteuse du mois ! Merci de voter autant sur les tops-sites ! </div></td></tr></table>
      </div>
        </td><td>
        <a href="http://www.yesyou-can.com/g40-africans">
     <img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:-50px;left:90px;width:105px;height:20px;background-color:#000000;opacity:0.6;" /></a>
       
         <a href="http://www.yesyou-can.com/g38-americans">
<img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:-25px;left:-60px;width:119px;height:20px;background-color:#000000;opacity:0.6;" /></a>
      <a href="http://www.yesyou-can.com/g42-asian">
<img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:-5px;left:-180px;width:80px;height:20px;background-color:#000000;opacity:0.6;" /></a>
         <a href="http://www.yesyou-can.com/g41-europeans">
<img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:110px;left:-320px;width:122px;height:20px;background-color:#000000;opacity:0.6;" /></a>
  <a href="http://www.yesyou-can.com/g39-latinos">
<img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:100px;left:100px;width:91px;height:20px;background-color:#000000;opacity:0.6;" /></a>
     <a href="http://www.yesyou-can.com/g43-oceanians">
<img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:120px;left:-20px; width:116px;height:20px;background-color:#000000;opacity:0.6;" /></a>
       
       <a href="http://www.yesyou-can.com/g44-pinguins">
<img src="http://img98.xooimage.com/files/d/4/8/alex-3dce47a.png" style="position:relative;top:145px;left:-175px;width:98px;height:20px;background-color:#000000;opacity:0.6;" /></a>   
        </td></tr></table>
      </center>
<!-- END disable_viewonline -->

J'ai enlevé pour l'instant les stats, les connectés et les anciens connectés car j'en pouvais plus de les voir dieu sait ou sur le forum T.T
pour le tuto j'ai suivis ce topic là : https://forum.forumactif.com/t310879-tableaux-a-onglets du coup, je suis un peu paumée. Peut-être que c'est pas ce genre de tableau que je dois mettre pour mon qeel ? Si quelqu'un pouvait m'aider ça serait tout gentil

merci à celui, celle, ceux, qui répondront à mon message :3

[Nelliel]

petit up :3

[no_way]

Bonjour, pour commencer, remplacez votre Qeel par:

Code:

<!-- BEGIN disable_viewonline -->
             
              <center><br><br>
          <div class="fond">
            <div class="boite_qeel_credit"> Le forum appartient entièrement au staff, toute reproduction partielle ou totale est interdite. Le design a été créé par Crystal (Goldheart) et Minnie (CaTa`Str0ph!). Le css a été créé par Hae-Jin (Nelliel). Forum principalement optimisé pour Google Chrome.
        <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="198" height="80">
            <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
            <param name="bgcolor" value="#ffffff" />
            <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/bdsubh5255/Beyonce_-_Run_the_world_Kaskade_Club_Remix_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/azu4end65b/Empire_State_of_Mind_Jay-Z_-_Alicia_Keys_OFFICIAL_VIDEO_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/xrqei4u112/Frank_Sinatra_New_York_New_York.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/qkk6zpjmff/Nirvana_-_My_girl_Where_did_You_sleep_last_night_Lyrics.mp3&amp;width=198&amp;height=80&amp;showslider=0&amp;skin=http%3A//i.imgbox.com/fOspqt4S.jpg&amp;loadingcolor=ffffff&amp;bgcolor1=ffffff&amp;bgcolor2=ffffff&amp;slidercolor1=ffffff&amp;slidercolor2=ffffff&amp;sliderovercolor=ffffff&amp;buttonovercolor=ffffff&amp;showlist=0&amp;currentmp3color=ffffff&amp;scrollbarovercolor=ffffff" />
        </object>
                <table><tr><td> <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/KyF7b6o.png);"><div class="posteurvoteur"><b>Jénova Arov</b> est notre posteur du mois avec <i>627</i> messages postés ! Bravo à elle :3 Qui saura la détroner ? </div></div>  </td><td>      <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/85DMCSX.png);"><div class="posteurvoteur"><b>Altéa Finley</b> est notre voteuse du mois ! Merci de voter autant sur les tops-sites ! </div></div></td></tr></table>
              </div>
                <a href="/g40-africans"></a>
            <a href="/g38-americans"></a>
            <a href="/g42-asian"></a>
                <a href="/g41-europeans"></a>
            <a href="/g39-latinos"></a>
            <a href="/g43-oceanians"></a>
            <a href="/g44-pinguins"></a>
                </div>
              </center>
        <!-- END disable_viewonline -->

et votre CSS par:

Code:

        /* QEEL */
       
        .fond {background-image:url(http://i.imgur.com/1u6Ww3O.png);
          width:750px; height:373px;margin:auto;text-align:center;
        background-repeat : no-repeat;position:relative}
       
/*groupes*/
.fond a[href^="/g"]{
  background:rgba(0,0,0,0.6);
  position:absolute;
  left:302px;
  display:inline-block;
  height:20px;
  width:130px
}
.fond a[href^="/g38"]{
  top:87px;
}
.fond a[href^="/g39"]{
  top:240px;
}
.fond a[href^="/g40"]{
  top:65px;
}
.fond a[href^="/g41"]{
  top:219px;
}
.fond a[href^="/g42"]{
  top:109px;
}
.fond a[href^="/g43"]{
  top:261px;
}
.fond a[href^="/g44"]{
  top:282px;
}
        .boite_1_qeel {width:200px;height:120px;padding:5px;position:relative;top:0px;
          left:-35px;top: 40px; font-size:11px;text-align:justify; overflow:auto;  display: block;
          color : #292929!important; background-color:#;
          text-transform:uppercase;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
        .ilwena {height:55px;overflow:auto;}
       
        .onetaitla {width:200px;height:260px;position:relative;
        font-size:10px;top:0px; text-align:justify; overflow:auto;
          margin-left:0px;padding:0px;}
        .boite_1_qeel::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
       
        .boite_1_qeel::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
       
        .boite_1_qeel::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
       
        #kumao {inline:block;}
        #blabla {inline:block;}
        #blibli {inline:block;}
        #blublu {inline:block;}
       
        .onestla {width:210px;height:120px;padding:5px;position:relative;top:0px;
          left:-35px;top: 40px; font-size:11px;text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
       
        .onestla::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
       
        .onestla::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
       
        .onestla::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
       
        .boite_qeel_credit {width:200px;height:260px;padding:5px;position:absolute;top:0px;
          left:38px;top: 50px; text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:; line-height: 100%;  font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:7px;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
       
        /*posteur et voteur du mois qeel*/
        .posteurvoteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .posteurvoteur:hover { opacity: .9; }
        .posteurvoteur::-webkit-scrollbar { width: 5px; }
        .posteurvoteur::-webkit-scrollbar-track  { background-color: #eee; }
        .posteurvoteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

Essayez de rajouter la suite de votre Qeel à présent.

[Nelliel]

Bonjour, et merci beaucoup pour l'aide :3

Pour ce qui est de la suite, est-ce que prendre un tuto d'un des tableaux de ce topic https://forum.forumactif.com/t310879-tableaux-a-onglets est bien ? car je suis en train de bidouiller pour voir mais pour l'instant rien ne fonctionne, ça se place sous le qeel en fait et non pas dedans. Et dès que j'ajoute les champs connectés et anciens connectés dans les onglets, les onglets ne marchent plus ;-;

[no_way]

Fournissez moi le code avec vos onglets que j'y jette un œil, normalement ce doit être fonctionnel.

[Nelliel]

Alors, voilà le code :

Code:

<!-- BEGIN disable_viewonline -->
           
              <center><br><br>
          <div class="fond">
            <div class="boite_qeel_credit"> Le forum appartient entièrement au staff, toute reproduction partielle ou totale est interdite. Le design a été créé par Crystal (Goldheart) et Minnie (CaTa`Str0ph!). Le css a été créé par Hae-Jin (Nelliel). Forum principalement optimisé pour Google Chrome.
        <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="198" height="80">
            <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
            <param name="bgcolor" value="#ffffff" />
            <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/bdsubh5255/Beyonce_-_Run_the_world_Kaskade_Club_Remix_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/azu4end65b/Empire_State_of_Mind_Jay-Z_-_Alicia_Keys_OFFICIAL_VIDEO_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/xrqei4u112/Frank_Sinatra_New_York_New_York.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/qkk6zpjmff/Nirvana_-_My_girl_Where_did_You_sleep_last_night_Lyrics.mp3&amp;width=198&amp;height=80&amp;showslider=0&amp;skin=http%3A//i.imgbox.com/fOspqt4S.jpg&amp;loadingcolor=ffffff&amp;bgcolor1=ffffff&amp;bgcolor2=ffffff&amp;slidercolor1=ffffff&amp;slidercolor2=ffffff&amp;sliderovercolor=ffffff&amp;buttonovercolor=ffffff&amp;showlist=0&amp;currentmp3color=ffffff&amp;scrollbarovercolor=ffffff" />
        </object>
                <table><tr><td> <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/KyF7b6o.png);"><div class="posteurvoteur"><b>Jénova Arov</b> est notre posteur du mois avec <i>627</i> messages postés ! Bravo à elle :3 Qui saura la détroner ? </div></div>  </td><td>      <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/85DMCSX.png);"><div class="posteurvoteur"><b>Altéa Finley</b> est notre voteuse du mois ! Merci de voter autant sur les tops-sites ! </div></div></td></tr></table>
              </div>
                <a href="/g40-africans"></a>
            <a href="/g38-americans"></a>
            <a href="/g42-asian"></a>
                <a href="/g41-europeans"></a>
            <a href="/g39-latinos"></a>
            <a href="/g43-oceanians"></a>
            <a href="/g44-pinguins"></a>
                </div>
               
                <div class="systab s_float">
  <div>
    <span>Canarie</span>
    <div class="onestla"><span id="kumao">{TOTAL_USERS_ONLINE} </span>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Il y a en tout/,"Il y a");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateurs en ligne ::/,"personnes à New York. On trouve ");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateur en ligne ::/,"personne à New York. On trouve ");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistré,/," habitant dans la Big Apple,");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistrés,/," habitants dans la Big Apple,");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisible et/," pervers se promène discrètement et enfin ");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisibles et/," pervers se promènent discrètement et enfin ");</script>
                  <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invités/," touristes visitent NYC.");</script>
        <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invité/," touriste visite NYC.");</script>

       
        <span id="blabla">{TOTAL_POSTS}</span>
        <script type="text/javascript">document.getElementById('blabla').innerHTML=document.getElementById('blabla').innerHTML.replace(/Nos membres ont posté un total de/," Nous autres, Youcanniens avons déjà échangés, au total, plus de");</script>
        <script type="text/javascript">document.getElementById('blabla').innerHTML=document.getElementById('blabla').innerHTML.replace(/messages/,"mots doux et autres gentilles insultes, et ce depuis cinq ans !");</script>
       
        <span id="blibli">{TOTAL_USERS}</span>
          <script type="text/javascript">document.getElementById('blibli').innerHTML=document.getElementById('blibli').innerHTML.replace(/Nous avons/," Actuellement nous sommes");</script>
        <script type="text/javascript">document.getElementById('blibli').innerHTML=document.getElementById('blibli').innerHTML.replace(/membres enregistrés/,"adorateurs de youcan.");</script>
       
        <span id="blublu">{NEWEST_USER}</span>
                  <script type="text/javascript">document.getElementById('blublu').innerHTML=document.getElementById('blublu').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier en date, notre bizut officiel, n'est autre que");</script> Mais pour combien de temps, encore ?
       
        <br/>
      {LOGGED_IN_USER_LIST}
        </div>
  </div>
  <div class="selected">
    <span>Grenouille</span>
    <div class="boite_1_qeel">{L_CONNECTED_MEMBERS}</div>
  </div>
  <div>
<div style="clear:left"></div>
               
               
               
                </div>
 
              </center>
        <!-- END disable_viewonline -->

J'ai pris le code du tableau celui ci :

Code:

<div class="systab s_float">
  <div>
    <span>Canarie</span>
    <img src="http://i.imgur.com/8JWJj.jpg" />
  </div>
  <div class="selected">
    <span>Grenouille</span>
    <img src="http://i.imgur.com/dnZgw.png" />
  </div>
  <div>
    <span>Champi</span>
    <img src="http://i.imgur.com/ZDZ9D.jpg" />
  </div>
</div>
<div style="clear:left"></div>
<div class="systab s_float">
  <div>
    <span>Nuage</span>
    <img src="http://i.imgur.com/JkFcQ.jpg" />
  </div>
</div>
<div style="clear:left"></div>
<div class="systab s_float">
  <div>
    <span>spirou</span>
    <img src="http://i.imgur.com/8seS0.gif" />
  </div>
  <div class="selected">
    <span>boule et bill</span>
    <img src="http://i.imgur.com/k8YCF.jpg" />
</div>
<div style="clear:left"></div>

J'ai bien évidemment installé le code dans la partie javascript puisque j'utilise aussi un tableau des tutos dans la pa, pour le staff.

[no_way]

remplacez votre Qeel par:

Code:

<!-- BEGIN disable_viewonline -->
             
<center><br /><br />
              <div class="fond">
                <div class="boite_qeel_credit"> Le forum appartient entièrement au staff, toute reproduction partielle ou totale est interdite. Le design a été créé par Crystal (Goldheart) et Minnie (CaTa`Str0ph!). Le css a été créé par Hae-Jin (Nelliel). Forum principalement optimisé pour Google Chrome.
            <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="198" height="80">
                <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf" />
                <param name="bgcolor" value="#ffffff" />
                <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/bdsubh5255/Beyonce_-_Run_the_world_Kaskade_Club_Remix_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/azu4end65b/Empire_State_of_Mind_Jay-Z_-_Alicia_Keys_OFFICIAL_VIDEO_.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/xrqei4u112/Frank_Sinatra_New_York_New_York.mp3%20%7C%20http%3A//k003.kiwi6.com/hotlink/qkk6zpjmff/Nirvana_-_My_girl_Where_did_You_sleep_last_night_Lyrics.mp3&amp;width=198&amp;height=80&amp;showslider=0&amp;skin=http%3A//i.imgbox.com/fOspqt4S.jpg&amp;loadingcolor=ffffff&amp;bgcolor1=ffffff&amp;bgcolor2=ffffff&amp;slidercolor1=ffffff&amp;slidercolor2=ffffff&amp;sliderovercolor=ffffff&amp;buttonovercolor=ffffff&amp;showlist=0&amp;currentmp3color=ffffff&amp;scrollbarovercolor=ffffff" />
            </object>
                    <table><tr><td> <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/KyF7b6o.png);"><div class="posteurvoteur"><b>Jénova Arov</b> est notre posteur du mois avec <i>627</i> messages postés ! Bravo à elle :3 Qui saura la détroner ? </div></div>  </td><td>      <div style="width: 96px; height: 116px; background-image:url(http://i.imgur.com/85DMCSX.png);"><div class="posteurvoteur"><b>Altéa Finley</b> est notre voteuse du mois ! Merci de voter autant sur les tops-sites ! </div></div></td></tr></table>
                  </div>
                    <a href="/g40-africans"></a>
                <a href="/g38-americans"></a>
                <a href="/g42-asian"></a>
                    <a href="/g41-europeans"></a>
                <a href="/g39-latinos"></a>
                <a href="/g43-oceanians"></a>
                <a href="/g44-pinguins"></a>
                <div class="bloc-onglets">
                <div class="systab s_float">
       
        <div class="onestla"><span>Canarie</span><span id="kumao">{TOTAL_USERS_ONLINE} </span>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Il y a en tout/,"Il y a");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateurs en ligne ::/,"personnes à New York. On trouve ");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateur en ligne ::/,"personne à New York. On trouve ");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistré,/," habitant dans la Big Apple,");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistrés,/," habitants dans la Big Apple,");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisible et/," pervers se promène discrètement et enfin ");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisibles et/," pervers se promènent discrètement et enfin ");</script>
                      <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invités/," touristes visitent NYC.");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invité/," touriste visite NYC.");</script>

         
            <span id="blabla">{TOTAL_POSTS}</span>
            <script type="text/javascript">document.getElementById('blabla').innerHTML=document.getElementById('blabla').innerHTML.replace(/Nos membres ont posté un total de/," Nous autres, Youcanniens avons déjà échangés, au total, plus de");</script>
            <script type="text/javascript">document.getElementById('blabla').innerHTML=document.getElementById('blabla').innerHTML.replace(/messages/,"mots doux et autres gentilles insultes, et ce depuis cinq ans !");</script>
         
            <span id="blibli">{TOTAL_USERS}</span>
              <script type="text/javascript">document.getElementById('blibli').innerHTML=document.getElementById('blibli').innerHTML.replace(/Nous avons/," Actuellement nous sommes");</script>
            <script type="text/javascript">document.getElementById('blibli').innerHTML=document.getElementById('blibli').innerHTML.replace(/membres enregistrés/,"adorateurs de youcan.");</script>
         
            <span id="blublu">{NEWEST_USER}</span>
                      <script type="text/javascript">document.getElementById('blublu').innerHTML=document.getElementById('blublu').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier en date, notre bizut officiel, n'est autre que");</script> Mais pour combien de temps, encore ?
         
            <br/>
          {LOGGED_IN_USER_LIST}
            </div>
       
        <div class="boite_1_qeel selected"><span>Grenouille</span>Du contenu !</div>
      </div>
      <div>
    </div>
                 
                 
                 
                    </div>
                    </div>
                </center>
            <!-- END disable_viewonline -->

et le CSS par:

Code:

        /* QEEL */
       
        .fond {background-image:url(http://i.imgur.com/1u6Ww3O.png);
          width:750px; height:373px;margin:auto;text-align:center;
        background-repeat : no-repeat;position:relative}
       
/*groupes*/
.fond a[href^="/g"]{
  background:rgba(0,0,0,0.6);
  position:absolute;
  left:302px;
  display:inline-block;
  height:20px;
  width:130px
}
.fond a[href^="/g38"]{
  top:87px;
}
.fond a[href^="/g39"]{
  top:240px;
}
.fond a[href^="/g40"]{
  top:65px;
}
.fond a[href^="/g41"]{
  top:219px;
}
.fond a[href^="/g42"]{
  top:109px;
}
.fond a[href^="/g43"]{
  top:261px;
}
.fond a[href^="/g44"]{
  top:282px;
}
.bloc-onglets{
  position:absolute;
  width:210px;
  top:50px;
  left:500px
}
        .boite_1_qeel {width:200px;height:120px;font-size:11px;text-align:justify; overflow:auto;  display: block;
          color : #292929!important; background-color:#;
          text-transform:uppercase;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
        .ilwena {height:55px;overflow:auto;}
       
        .onetaitla {width:200px;height:260px;position:relative;
        font-size:10px;top:0px; text-align:justify; overflow:auto;
          margin-left:0px;padding:0px;}
        .boite_1_qeel::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
       
        .boite_1_qeel::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
       
        .boite_1_qeel::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
       
        #kumao {inline:block;}
        #blabla {inline:block;}
        #blibli {inline:block;}
        #blublu {inline:block;}
       
        .onestla {width:210px;height:120px;font-size:11px;text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
       
        .onestla::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
       
        .onestla::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
       
        .onestla::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
       
        .boite_qeel_credit {width:200px;height:260px;padding:5px;position:absolute;top:0px;
          left:38px;top: 50px; text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:; line-height: 100%;  font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:7px;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
       
        /*posteur et voteur du mois qeel*/
        .posteurvoteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .posteurvoteur:hover { opacity: .9; }
        .posteurvoteur::-webkit-scrollbar { width: 5px; }
        .posteurvoteur::-webkit-scrollbar-track  { background-color: #eee; }
        .posteurvoteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

[Nelliel]

J'ai tout remplacé, merci, mais en mettant le contenu dans le dernier onglet, je ne comprends pas pourquoi, dès que je mets le champ des derniers connectés l'onglet s'en va vers le bas image
Puis j'ai aussi essayé, de mettre les boutons des onglets sur la gauche via le code s float mais ça ne marche pas non plus. J'y perds mon latin, les onglets sont définitivement pas pour moi je crois...

[no_way]

Cette variable "{L_CONNECTED_MEMBERS}" se met dans un tableau donc:

Code:

<table>{L_CONNECTED_MEMBERS}</table>

et non pas:

Code:

{L_CONNECTED_MEMBERS}

faites la modification et tout devrait rentrer dans l'ordre

[Nelliel]

En effet merci :3

Du coup, comme les onglets ne se mettaient pas à gauche, j'ai pris un autre tableau, et ça marche super ! Mais le seul problème c'est le fait que ça me mette des scroll barre partout... image alors j'ai bidouillé un peu, mais c'est pire cette fois, le texte du qeel c'est totalement déformé... j'ai regardé les codes, mais je ne vois pas ou est le souci... Du coup, voilà le nouveau code pour le tableau qui est le même que le votre avec juste une partie css en plus :

Code:

<div class="bloc-onglets">
                  <div class="systab s_float montab1">
  <div>
    <span class="mononglet1"><img src="http://i.imgur.com/EHWGdGh.png" style="width: 31px;" /></span>
   <div class="onestla selected"><span id="kumao">{TOTAL_USERS_ONLINE} </span>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Il y a en tout/,"Il y a");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateurs en ligne ::/,"personnes à New York. On trouve ");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/utilisateur en ligne ::/,"personne à New York. On trouve ");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistré,/," habitant dans la Big Apple,");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Enregistrés,/," habitants dans la Big Apple,");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisible et/," pervers se promène discrètement et enfin ");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invisibles et/," pervers se promènent discrètement et enfin ");</script>
                      <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invités/," touristes visitent NYC.");</script>
            <script type="text/javascript">document.getElementById('kumao').innerHTML=document.getElementById('kumao').innerHTML.replace(/Invité/," touriste visite NYC.");</script><span id="blabla">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('blabla').innerHTML=document.getElementById('blabla').innerHTML.replace(/Nos membres ont posté un total de/," Nous autres, Youcanniens avons déjà échangés, au total, plus de");</script>
            <script type="text/javascript">document.getElementById('blabla').innerHTML=document.getElementById('blabla').innerHTML.replace(/messages/,"mots doux et autres gentilles insultes, et ce depuis cinq ans !");</script><span id="blibli">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('blibli').innerHTML=document.getElementById('blibli').innerHTML.replace(/Nous avons/," Actuellement nous sommes");</script>
            <script type="text/javascript">document.getElementById('blibli').innerHTML=document.getElementById('blibli').innerHTML.replace(/membres enregistrés/,"adorateurs de youcan.");</script><span id="blublu">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('blublu').innerHTML=document.getElementById('blublu').innerHTML.replace(/L'utilisateur enregistré le plus récent est/," Le dernier en date, notre bizut officiel, n'est autre que");</script> Mais pour combien de temps, encore ?
          
            <br/>
          {LOGGED_IN_USER_LIST}
            </div>
  </div>
  <div>
    <span class="mononglet4"><img src="http://i.imgur.com/EHWGdGh.png" style="width: 31px;" /></span>
                  <div class="boite_1_qeel"><table>{L_CONNECTED_MEMBERS}</table></div>
  </div>
  <div>
  
      </div>
      <div>

                    </div>
                    </div>
                    </div>
<div style="clear:left"></div>
                </center>
            <!-- END disable_viewonline -->

Code:

  /* QEEL */

.montab1 .tab {
  padding: 2px 10px;
  color: #000;
  border: 1px solid #;
  cursor: pointer;
}
.montab1 .contents {
  width:  10%;
  margin-right: 30px;
  border: ;
  background: ;
}
.montab2 .contents {
  width:  40%;
  border: none;
  background: #efe;
  box-shadow:0 0 10px #aba;
  border-radius: 20px;
}
.montab2 .tab.selected {
  color: red;
  background: ;
}
.montab1 .mononglet4 {
  color: blue;
}
.montab1 .mononglet7 {
  color: orange;
}
     
        .fond {background-image:url(http://i.imgur.com/1u6Ww3O.png);
          width:750px; height:373px;margin:auto;text-align:center;
        background-repeat : no-repeat;position:relative}
     
/*groupes*/
.fond a[href^="/g"]{
  background:rgba(0,0,0,0.6);
  position:absolute;
  left:302px;
  display:inline-block;
  height:20px;
  width:130px
}
.fond a[href^="/g38"]{
  top:87px;
}
.fond a[href^="/g39"]{
  top:240px;
}
.fond a[href^="/g40"]{
  top:65px;
}
.fond a[href^="/g41"]{
  top:219px;
}
.fond a[href^="/g42"]{
  top:109px;
}
.fond a[href^="/g43"]{
  top:261px;
}
.fond a[href^="/g44"]{
  top:282px;
}
.bloc-onglets{
  position:relative;
  width:px;
  top:5px;
  left:438px
}
        .boite_1_qeel {width:200px;height:230px;font-size:11px;text-align:justify; overflow:auto;  display: block;
          color : #292929!important; background-color:#;
          text-transform:uppercase;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
        .ilwena {height:55px;overflow:auto;}
     
        .onetaitla {width:200px;height:260px;position:relative;
        font-size:10px;top:0px; text-align:justify; overflow:auto;
          margin-left:0px;padding:0px;}
        .boite_1_qeel::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
     
        .boite_1_qeel::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
     
        .boite_1_qeel::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
     
        #kumao {inline:block;}
        #blabla {inline:block;}
        #blibli {inline:block;}
        #blublu {inline:block;}
     
        .onestla {width:210px;height:230px;font-size:11px;text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
     
        .onestla::-webkit-scrollbar {
          width: 5px; /*largeur de la scrollbar verticale*/
          height: 5px; /*hauteur de la scrollbar horizontale*/
          background-color: #C8C4C8;}
     
        .onestla::-webkit-scrollbar-track {
          background-color: #D3D1D3; /*couleur du fond de la scrollbar*/}
     
        .onestla::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
          background-color: #C8C4C8 /*couleur de l'ascenseur*/;}
     
        .boite_qeel_credit {width:200px;height:260px;padding:5px;position:absolute;top:0px;
          left:38px;top: 50px; text-align:justify; overflow:auto; display: block;
          color : #292929!important; background-color:#;
          text-transform:; line-height: 100%;  font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:7px;
          -moz-transition:all 0.8s; /* Mozilla Firefox */
          -webkit-transition:all 0.8s; /* Safari et Google Chrome */
          -o-transition:all 0.8s; /* Opera */
            transition:all 0.8s;
        border-left: 1px solid #; border-right: 1px solid #;
          border-top: 1px solid #; border-bottom: 1px solid #;}
     
        /*posteur et voteur du mois qeel*/
        .posteurvoteur { width: 88px; height: 108px;
          background: white; color: #737373;
          overflow: auto; font-family:arial;
          font-size:8px; letter-spacing:2px; line-height:12px;
          text-align: justify; padding: 4px;
          opacity: 0; -webkit-transition:all 0.7s ease-in-out;
          -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out;
          -ms-transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; }
        .posteurvoteur:hover { opacity: .9; }
        .posteurvoteur::-webkit-scrollbar { width: 5px; }
        .posteurvoteur::-webkit-scrollbar-track  { background-color: #eee; }
        .posteurvoteur::-webkit-scrollbar-thumb { background-color: #2A7690; }

peut-être que j'ai oublié un truc ? A force de bidouiller depuis ce matin, j'y vois plus clair...

[no_way]

Pour retirer les ascenseurs, retirez "overflow:auto" de votre classe "boite_qeel_credit"

[Nelliel]

merci beaucoup de votre aide, du coup c'est tout bon Merci beaucoup