Réduire l'espace entre les onglets des groupes

[Lilynufare]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Opera
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 02/05/17
Lien du forum :

Description du problème

Bonjour,
Je suis entrain de coder la partie groupe d'un qeel en onglet, mais je n'arrive pas à réduire l'espace entre les images des onglets afin de les mettre sur une seule ligne.

image : https://2img.net/h/oi63.tinypic.com/1231nrt.jpg

Je donnerai le forum test si besoin.


css

Code:


    .citizen_groupes {
      position: absolute;
      top: 19em;
      left: 60px;
      width: 190px;
      height: 120px;
 
  border: 1px solid #87715B;
      text-align: justify;


    }







  .onglets
        { margin-left: -22px;  line-height:5px;
                display:inline-block;
background: #000;
                cursor:crosshair;
                background:transparent;}


        .contenu_onglet
        {    -moz-border-radius: 15px;
              -webkit-border-radius: 15px;
              border-radius: 15px;
                border: 2px solid #;
                background: #;
                width:200px;
                height: 150px;
                margin-top:-1px;
                padding:5px;
                display:none;
                text-align: justify;
                font-family: Arial;
                font-size: 11px; overflow: auto;
      margin-left: 0px;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
     








Code:

<div class="citizen_groupes">
 <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
     
      <div class="systeme_onglets">
        <div class="onglets" style="padding-left: -19px; margin-top: 10px;padding-bottom:-2px;margin-right:10px; margin:0px;">
              <span class="onglet_0 onglet" id="onglet_mj" onmouseover="javascript:change_onglet('mj');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height: 10px;"/></span><span class="onglet_0 onglet" id="onglet_groupe" onmouseover="javascript:change_onglet('groupe');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height: 10px;"/></span>
          <span class="onglet_0 onglet" id="onglet_NOM1" onmouseover="javascript:change_onglet('NOM1');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span><span class="onglet_0 onglet" id="onglet_NOM2" onmouseover="javascript:change_onglet('NOM2');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span><span class="onglet_0 onglet" id="onglet_NOM3" onmouseover="javascript:change_onglet('NOM3');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span><span class="onglet_0 onglet" id="onglet_NOM4" onmouseover="javascript:change_onglet('NOM4');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span><span class="onglet_0 onglet" id="onglet_NOM5" onmouseover="javascript:change_onglet('NOM5');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span> <span class="onglet_0 onglet" id="onglet_NOM6" onmouseover="javascript:change_onglet('NOM6');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span><span class="onglet_0 onglet" id="onglet_NOM7" onmouseover="javascript:change_onglet('NOM7');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png"style="width: 10px; height:10px;"/></span>


  </div>
        <div class="contenu_onglets">
          <div class="contenu_onglet" id="contenu_onglet_staff"><br/> <div style="color: #533102; font-size: 9px; font-family: Time new roman; text-align: justify; margin-top: -19px; margin-left: -24px;"><center><img src="http://nsa38.casimages.com/img/2017/05/02/170502112016411158.png"/></center></div>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_mj">
              <font style="color: #5854b8; font-size: 16px; font-align: center; margin-left: 20px; letter-spacing: -1px;">Fratria<br />
              <center> <a href="http://despicableme.forumactif.com/g4-arnaque-gloire-et-mechancete"> Les rejoindre ?</a></center>
</div>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_groupe">
              <font style="color: #2f994c; font-size: 16px; margin-left: 30px; letter-spacing: -1px;">Bratva</font><br>
              <br />
              <center><a href="http://despicableme.forumactif.com/g3-fais-peter-le-ble">Les rejoindre ?</a></center>




            </div>

<!-- DEBUT modifications à faire dans le contenu des onglets, URL à ajouter -->

              <div class="contenu_onglet" id="contenu_onglet_NOM1"> <font style="color: #b30b0b; font-size: 16px; margin-left: 30px; letter-spacing: -1px;">Trainer</font><br>
                uc<br />
                <center><a href="http://despicableme.forumactif.com/g5-mon-adn-est-infecte">Les rejoindre ?</a></center>
            </div>
                <div class="contenu_onglet" id="contenu_onglet_NOM2"> <font style="color: #C9531C; font-size: 16px; margin-left: 40px; letter-spacing: -1px;">Master</font><br>
                  uc<br />
                  <center><a href="http://despicableme.forumactif.com/g7-citoyens">Les rejoindre ?</a></center>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_NOM3">
              <font style="color: #c2991f; font-size: 16px; margin-left: 40px; letter-spacing: -1px;">dominant</font><br>
            uc<br />
              <center><a href="http://despicableme.forumactif.com/g6-agence-vigilance-de-lynx">Les rejoindres</a></center>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_NOM4">
              <font style="color: #c2991f; font-size: 16px; margin-left: 40px; letter-spacing: -1px;">Corrupt Citizen</font><br>
            uc<br />
              <center><a href="http://despicableme.forumactif.com/g6-agence-vigilance-de-lynx">Les rejoindres</a></center>
            </div>
            <div class="contenu_onglet" id="contenu_onglet_NOM5">
              <font style="color: #c2941f; font-size: 16px; margin-left: 40px; letter-spacing: -1px;">Innocent Citizen</font><br>
            uc<br />
              <center><a href="http://despicableme.forumactif.com/g6-agence-vigilance-de-lynx">Les rejoindres</a></center>
            </div>
<div class="contenu_onglet" id="contenu_onglet_NOM6"> <font style="color: #C9531C; font-size: 16px; margin-left: 40px; letter-spacing: -1px;">Slave</font><br>
                  uc<br />
                  <center><a href="http://despicableme.forumactif.com/g7-citoyens">Les rejoindre ?</a></center>
            </div>
        <div class="contenu_onglet" id="contenu_onglet_NOM7">
              <font style="color: #c2991f; font-size: 16px; margin-left: 40px; letter-spacing: -1px;">Submissive</font><br>
            uc<br />
              <center><a href="http://despicableme.forumactif.com/g6-agence-vigilance-de-lynx">Les rejoindres</a></center>
            </div>
<!-- FIN modifications -->
       
        <div class="onglets" style="padding-left: 24px; padding-top: 2px;">


            <span class="onglet_0 onglet" id="onglet_staff" onmouseover="javascript:change_onglet('staff');" style="visibility: hidden;">Staff</span>
        </div>
 
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'staff';
                change_onglet(anc_onglet);
        //-->
        </script>
 
</div>
 

</div>

Merci

[MlleAlys]

Bonjour,
Essayez ainsi :

template :

Code:

<div class="citizen_groupes">

  <script type="text/javascript">
    //<!--
            function change_onglet(name)
            {
                    document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                    document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                    document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                    document.getElementById('contenu_onglet_'+name).style.display = 'block';
                    anc_onglet = name;
            }
    //-->
  </script>

  <div class="systeme_onglets">

    <div class="onglets">
      <span class="onglet_0 onglet" id="onglet_staff" onmouseover="javascript:change_onglet('staff');" style="visibility: hidden;">Staff</span>
      <span class="onglet_0 onglet" id="onglet_mj" onmouseover="javascript:change_onglet('mj');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_groupe" onmouseover="javascript:change_onglet('groupe');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM1" onmouseover="javascript:change_onglet('NOM1');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM2" onmouseover="javascript:change_onglet('NOM2');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM3" onmouseover="javascript:change_onglet('NOM3');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM4" onmouseover="javascript:change_onglet('NOM4');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM5" onmouseover="javascript:change_onglet('NOM5');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM6" onmouseover="javascript:change_onglet('NOM6');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM7" onmouseover="javascript:change_onglet('NOM7');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
    </div>

    <div class="contenu_onglets">

      <div class="contenu_onglet" id="contenu_onglet_staff" style="display: none;">
        <img src="http://nsa38.casimages.com/img/2017/05/02/170502112016411158.png"/>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_mj">
        <div class="nom_groupe_qeel" style="color: #386a3d;">Fratria</div>
        <div class="contenu"> La Fratria, les membres indécents, unis par une forte amitié. Ici, ce sont les membres de ce cercle. Uniquement eux.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g11-"> Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_groupe" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #7e3a58;">Bratva</div>
        <div class="contenu"> La mafia rouge, ici tout regroupe les membres de la mafia. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g10-">Les rejoindre ?</a>
      </div>

      <!--DEBUT modifications à faire dans le contenu des onglets, URL à ajouter -->

      <div class="contenu_onglet" id="contenu_onglet_NOM1" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #877644;">Trainer</div>
        <div class="contenu"> Intro - Je la regarde se crisper, hésiter, les bras serrés autour de ses genoux. Elle se débattit avec mon ordre. En temps normal, cette désobéissance serait considérée comme une faute, je devrai la punir mais c'était nouveau pour elle, je devais la dresser. Elle avait envie de me cracher des insultes. Elle n'en fit rien, elle les ravalait. Je réprima un sourire. Elle apprenait. Lentement mais surement. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g7-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM2" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #64231c;">Master</div>
        <div class="contenu"> Intro - Une puissante émotion m'envahit quand je suis dans la même pièce qu'elle. Elle m'attend, les yeux bandés, et ses membres attachés sur le lit. Était ce de l'excitation? Du désir? Un sentiment brûlant se rependit dans mes veines. La cravache dans le creux de ma main, j'ai les yeux fixés sur elle. Je n'avais pas voulu laisser cette esclave entre les mains d'autres hommes. Je l'ai achetée. Elle est mienne. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g3-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM3" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #612314;">Dominant</div>
        <div class="contenu"> Intro - Sa main est en feu mais je me refuse à m'arrêter. Je veux lui faire du bien, acceptant sa demande. Ma paume amortisse tous les coups, je mesure l'intensité de la claque, la surface de peau que je frappe, la réaction du corps de ma soumise.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g6-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM4" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #790b3b;">Corrupt Citizen</div>
        <div class="contenu"> Intro - Les autres hommes la regardent, hypnotisés comme moi. Un désir immense brûle dans leurs yeux. Ils la veulent, mais moi aussi. Le corps nu de la femme brille sous l'éclairage tamisé, trois hommes l'entourent tandis qu'elle est à genoux à leurs pieds. Ils la caressent tandis que nos regards se croisent, et le sien me transperce. Je la désire.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g9-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM5" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #9c7773;">Innocent Citizen</div>
        <div class="contenu"> Intro - Je me laisse aller à ses baisers tendres, mordillements, ses mains se baladant allégrement dans mon dos en un semblant d'étreinte. Je me met en quête de ses lèvres, du délicieux nectar qu'elles recèlent, leurs deux bouches s'unissant en une parfaite harmonie. Je le veux, je l'aime. Je lâche un soupire contre ses lèvres, et ses bras me serrent tendrement contre son torse.. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g4-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM6" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #15625f;">Slave</div>
        <div class="contenu"> Intro - Un claquement retentit soudain dans la pièce, qui me fit sursauter, avant que je ressente dans ma chair la brûlure qui me mordit. J'arque le dos, dans une vaine tentative pour me libérer des liens qui me maintenaient impitoyablement.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g5-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM7" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #7a6343;">Submissive</div>
        <div class="contenu"> Intro - Je me laisse aller à ses baisers tendres, mordillements, ses mains se baladant allégrement dans mon dos en un semblant d'étreinte. Je me met en quête de ses lèvres, du délicieux nectar qu'elles recèlent, leurs deux bouches s'unissant en une parfaite harmonie. Je le veux, je l'aime. Je lâche un soupire contre ses lèvres, et ses bras me serrent tendrement contre son torse. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g8-">Les rejoindre ?</a>
      </div>

      <!--FIN modifications -->

      <script type="text/javascript">
        //<!--
                var anc_onglet = 'staff';
                change_onglet(anc_onglet);
        //-->
      </script>

    </div>

  </div>

</div>

Css associé à cette partie :

Code:

.citizen_groupes {
  position: absolute;
  left: 60px;
  top: 305px;
  height: 120px;
  width: 190px;
  text-align: center;
}

.onglets {
  font-size: 1px;
  margin-top: 5px;
}
.onglet img {
  width: 17px;
  margin: 0px 1px;
}
.onglet_0 {
  opacity: 0.7;
}

.contenu_onglet {
  color: #A89C77!important;
  font-family: times new roman;
  font-size: 11px;
}
.nom_groupe_qeel {
  background-color: #0E1414;
  font-family: 'Kelly Slab', cursive;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 5px;
}
.contenu {
  background: #331F1A;
  border: 1px solid #331F1A;
  border-radius: 3px;
  height: 36px;
  margin: 5px 0;
  overflow: auto;
  text-align: left;
  padding: 2px;
}
.contenu_onglets a {
  letter-spacing: 1px;
}

(j'ai vu que sur le forum test des éléments avaient été ajoutés dans le template, et comme j'ai modifié le code dans le template pour le contenu des groupes, j'ai complété le code donné dans votre message précédent pour que je, j'espère, vous n'ayez pas à tout refaire)
Normalement le code devrait être ainsi plus simple à gérer, n'hésitez pas à demander si vous souhaitez plus d'explications, ou s'il y a des choses à modifier.

[Lilynufare]

Bonsoir et merci pour votre aide

Je rencontre un petit soucis avec le code que vous m'avez donné. L'image du survol est bien placée mais y a la description du premier groupe en dessous. Je n'arrive pas à retirer la description, je veux seulement l'image en place. Merci de votre attention.

https://2img.net/h/oi66.tinypic.com/dg040z.jpg

Forum test :

Code:

<!-- BEGIN disable_viewonline --><div style="position: relative; background-image: url('http://nsa38.casimages.com/img/2017/05/03/17050307014131151.png'); width: 850px; height: 600px;border-radius: 10px;">
    <div class="stats_qeel">{TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}. <br /><br />
    {TOTAL_USERS_ONLINE}</div>

    <div class="plumes_passagères"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
   


    <div class="plumes_presentes">{LOGGED_IN_USER_LIST}</div>

 
     
<div class="citizen_groupes">

  <script type="text/javascript">
    //<!--
            function change_onglet(name)
            {
                    document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                    document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                    document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                    document.getElementById('contenu_onglet_'+name).style.display = 'block';
                    anc_onglet = name;
            }
    //-->
  </script>

  <div class="systeme_onglets">

    <div class="onglets">
      <span class="onglet_0 onglet" id="onglet_staff" onmouseover="javascript:change_onglet('staff');" style="visibility: hidden;">Staff</span>
      <span class="onglet_0 onglet" id="onglet_mj" onmouseover="javascript:change_onglet('mj');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_groupe" onmouseover="javascript:change_onglet('groupe');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM1" onmouseover="javascript:change_onglet('NOM1');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM2" onmouseover="javascript:change_onglet('NOM2');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM3" onmouseover="javascript:change_onglet('NOM3');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM4" onmouseover="javascript:change_onglet('NOM4');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM5" onmouseover="javascript:change_onglet('NOM5');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM6" onmouseover="javascript:change_onglet('NOM6');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM7" onmouseover="javascript:change_onglet('NOM7');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
    </div>

    <div class="contenu_onglets">

      <div class="contenu_onglet" id="contenu_onglet_staff" style="display: none;">
        <img src="http://nsa38.casimages.com/img/2017/05/02/170502112016411158.png"/>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_mj">
        <div class="nom_groupe_qeel" style="color: #386a3d;">Fratria</div>
        <div class="contenu"> La Fratria, les membres indécents, unis par une forte amitié. Ici, ce sont les membres de ce cercle. Uniquement eux.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g11-"> Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_groupe" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #7e3a58;">Bratva</div>
        <div class="contenu"> La mafia rouge, ici tout regroupe les membres de la mafia. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g10-">Les rejoindre ?</a>
      </div>

      <!--DEBUT modifications à faire dans le contenu des onglets, URL à ajouter -->

      <div class="contenu_onglet" id="contenu_onglet_NOM1" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #877644;">Trainer</div>
        <div class="contenu"> Intro - Je la regarde se crisper, hésiter, les bras serrés autour de ses genoux. Elle se débattit avec mon ordre. En temps normal, cette désobéissance serait considérée comme une faute, je devrai la punir mais c'était nouveau pour elle, je devais la dresser. Elle avait envie de me cracher des insultes. Elle n'en fit rien, elle les ravalait. Je réprima un sourire. Elle apprenait. Lentement mais surement. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g7-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM2" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #64231c;">Master</div>
        <div class="contenu"> Intro - Une puissante émotion m'envahit quand je suis dans la même pièce qu'elle. Elle m'attend, les yeux bandés, et ses membres attachés sur le lit. Était ce de l'excitation? Du désir? Un sentiment brûlant se rependit dans mes veines. La cravache dans le creux de ma main, j'ai les yeux fixés sur elle. Je n'avais pas voulu laisser cette esclave entre les mains d'autres hommes. Je l'ai achetée. Elle est mienne. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g3-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM3" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #612314;">Dominant</div>
        <div class="contenu"> Intro - Sa main est en feu mais je me refuse à m'arrêter. Je veux lui faire du bien, acceptant sa demande. Ma paume amortisse tous les coups, je mesure l'intensité de la claque, la surface de peau que je frappe, la réaction du corps de ma soumise.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g6-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM4" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #790b3b;">Corrupt Citizen</div>
        <div class="contenu"> Intro - Les autres hommes la regardent, hypnotisés comme moi. Un désir immense brûle dans leurs yeux. Ils la veulent, mais moi aussi. Le corps nu de la femme brille sous l'éclairage tamisé, trois hommes l'entourent tandis qu'elle est à genoux à leurs pieds. Ils la caressent tandis que nos regards se croisent, et le sien me transperce. Je la désire.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g9-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM5" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #9c7773;">Innocent Citizen</div>
        <div class="contenu"> Intro - Je me laisse aller à ses baisers tendres, mordillements, ses mains se baladant allégrement dans mon dos en un semblant d'étreinte. Je me met en quête de ses lèvres, du délicieux nectar qu'elles recèlent, leurs deux bouches s'unissant en une parfaite harmonie. Je le veux, je l'aime. Je lâche un soupire contre ses lèvres, et ses bras me serrent tendrement contre son torse.. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g4-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM6" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #15625f;">Slave</div>
        <div class="contenu"> Intro - Un claquement retentit soudain dans la pièce, qui me fit sursauter, avant que je ressente dans ma chair la brûlure qui me mordit. J'arque le dos, dans une vaine tentative pour me libérer des liens qui me maintenaient impitoyablement.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g5-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM7" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #7a6343;">Submissive</div>
        <div class="contenu"> Intro - Je me laisse aller à ses baisers tendres, mordillements, ses mains se baladant allégrement dans mon dos en un semblant d'étreinte. Je me met en quête de ses lèvres, du délicieux nectar qu'elles recèlent, leurs deux bouches s'unissant en une parfaite harmonie. Je le veux, je l'aime. Je lâche un soupire contre ses lèvres, et ses bras me serrent tendrement contre son torse. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g8-">Les rejoindre ?</a>
      </div>

      <!--FIN modifications -->

      <script type="text/javascript">
        //<!--
                var anc_onglet = 'staff';
                change_onglet(anc_onglet);
        //-->
      </script>

    </div>

  </div>

</div>
    <!-- END disable_viewonline -->

Code:

.citizen_groupes {
  position: absolute;
  left: 60px;
  top: 305px;
  height: 120px;
  width: 190px;
  text-align: center;
}
 
.onglets {
  font-size: 1px;
  margin-top: 5px;
}
.onglet img {
  width: 17px;
  margin: 0px 1px;
}
.onglet_0 {
  opacity: 0.7;
}
 
.contenu_onglet {
  color: #A89C77!important;
  font-family: times new roman;
  font-size: 11px;
}
.nom_groupe_qeel {
  background-color: #0E1414;
  font-family: 'Kelly Slab', cursive;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 5px;
}
.contenu {
  background: #331F1A;
  border: 1px solid #331F1A;
  border-radius: 3px;
  height: 36px;
  margin: 5px 0;
  overflow: auto;
  text-align: left;
  padding: 2px;
}
.contenu_onglets a {
  letter-spacing: 1px;
}

/* -------------------------------- QEEL -------------------------------- */


    /* Transparence des anniversaires et des dernières 24h */
    #kaboum .row1 {
      background-color : transparent;
    }

    .crédit {
      position: absolute;
      top:333px;
      left: 704px;
      width: 123px;
      height: 38px;
      overflow: auto;
      font-family: times new roman;
      font-size: 11px;
      text-align: justify;
  color: #A89C77 !important;

  overflow: auto;
    }
/*Les barres de défilementpa*/
.crédit::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
.crédit::-webkit-scrollbar-thumb {background:#64231c; height:30px; border-radius:30px;}
.crédit::-webkit-scrollbar-corner {background:none;}
/*Les barres de défilementpa*/
.plumes_passagères::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
.plumes_passagères::-webkit-scrollbar-thumb {background:#64231c; height:30px; border-radius:30px;}
.plumes_passagères::-webkit-scrollbar-corner {background:none;}
/*Les barres de défilementpa*/
.plumes_presentes::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
.plumes_presentes::-webkit-scrollbar-thumb {background:#64231c; height:30px; border-radius:30px;}
.plumes_presentes::-webkit-scrollbar-corner {background:none;}



 .membresm{
      position: absolute;
      top:121px;
      left: 710px;
      width: 131px;
      height: 50px;
      overflow: auto;
      font-family: times new roman;
      font-size: 11px;
      text-align: justify;
  color: #A89C77 !important;

  overflow: auto;
    }


.membresm img {
width: 32px;
height: 32px;
border: 1px solid #64231c;
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
border-radius:100px;
}
.membresm img:hover {
filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
-webkit-filter: grayscale(0%);
border-radius:100px;
}










    /* Positionnement du bloc des statistiques */
    .stats_qeel {
      position: absolute;
      top:145px;
      left: 316px;
      width: 205px;
      height: 150px;
      overflow: auto;
      font-family: times new roman;
      font-size: 11px;
      text-align: justify;
  color: #A89C77 !important;
 
    }

    /* Positionnement du bloc des plumes passagères */
    .plumes_passagères {
      position: absolute;
      top: 350px;
      left: 311px;
      width: 208px;
      height: 100px;
      overflow: auto;
      font-family: times new roman;
      font-size: 11px;
      text-align: justify;
  color: #A89C77 !important;

    }

  /* Positionnement du bloc des plumes présentes */
    .plumes_presentes {
      position: absolute;
      top: 140px;
      left: 59px;
      width: 190px;
      height: 110px;
      overflow: auto;
      font-family: times new roman;
      font-size: 12px;
      text-align: justify;
      color: #A89C77 !important;
 
    }

    /* Mise en forme des liens des plumes présentes */
    .plumes_presentes a {
      text-decoration: none !important;
    }




 


    /* -------------------------------- FIN QEEL -------------------------------- */






[MlleAlys]

Pardon, il manque un display:none; dans un des contenu onglets ; modifiez le template ainsi :

Code:

<!-- BEGIN disable_viewonline --><div style="position: relative; background-image: url('http://nsa38.casimages.com/img/2017/05/03/17050307014131151.png'); width: 850px; height: 600px;border-radius: 10px;">
    <div class="stats_qeel">{TOTAL_POSTS}. {TOTAL_USERS}. {NEWEST_USER}. <br /><br />
    {TOTAL_USERS_ONLINE}</div>

    <div class="plumes_passagères"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
   


    <div class="plumes_presentes">{LOGGED_IN_USER_LIST}</div>

 
     
<div class="citizen_groupes">

  <script type="text/javascript">
    //<!--
            function change_onglet(name)
            {
                    document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                    document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                    document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                    document.getElementById('contenu_onglet_'+name).style.display = 'block';
                    anc_onglet = name;
            }
    //-->
  </script>

  <div class="systeme_onglets">

    <div class="onglets">
      <span class="onglet_0 onglet" id="onglet_staff" onmouseover="javascript:change_onglet('staff');" style="visibility: hidden;">Staff</span>
      <span class="onglet_0 onglet" id="onglet_mj" onmouseover="javascript:change_onglet('mj');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_groupe" onmouseover="javascript:change_onglet('groupe');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM1" onmouseover="javascript:change_onglet('NOM1');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM2" onmouseover="javascript:change_onglet('NOM2');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM3" onmouseover="javascript:change_onglet('NOM3');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM4" onmouseover="javascript:change_onglet('NOM4');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM5" onmouseover="javascript:change_onglet('NOM5');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM6" onmouseover="javascript:change_onglet('NOM6');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
      <span class="onglet_0 onglet" id="onglet_NOM7" onmouseover="javascript:change_onglet('NOM7');"><img src="http://nsa37.casimages.com/img/2017/05/01/170501105758344649.png" /></span>
    </div>

    <div class="contenu_onglets">

      <div class="contenu_onglet" id="contenu_onglet_staff" style="display: none;">
        <img src="http://nsa38.casimages.com/img/2017/05/02/170502112016411158.png"/>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_mj" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #386a3d;">Fratria</div>
        <div class="contenu"> La Fratria, les membres indécents, unis par une forte amitié. Ici, ce sont les membres de ce cercle. Uniquement eux.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g11-"> Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_groupe" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #7e3a58;">Bratva</div>
        <div class="contenu"> La mafia rouge, ici tout regroupe les membres de la mafia. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g10-">Les rejoindre ?</a>
      </div>

      <!--DEBUT modifications à faire dans le contenu des onglets, URL à ajouter -->

      <div class="contenu_onglet" id="contenu_onglet_NOM1" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #877644;">Trainer</div>
        <div class="contenu"> Intro - Je la regarde se crisper, hésiter, les bras serrés autour de ses genoux. Elle se débattit avec mon ordre. En temps normal, cette désobéissance serait considérée comme une faute, je devrai la punir mais c'était nouveau pour elle, je devais la dresser. Elle avait envie de me cracher des insultes. Elle n'en fit rien, elle les ravalait. Je réprima un sourire. Elle apprenait. Lentement mais surement. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g7-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM2" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #64231c;">Master</div>
        <div class="contenu"> Intro - Une puissante émotion m'envahit quand je suis dans la même pièce qu'elle. Elle m'attend, les yeux bandés, et ses membres attachés sur le lit. Était ce de l'excitation? Du désir? Un sentiment brûlant se rependit dans mes veines. La cravache dans le creux de ma main, j'ai les yeux fixés sur elle. Je n'avais pas voulu laisser cette esclave entre les mains d'autres hommes. Je l'ai achetée. Elle est mienne. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g3-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM3" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #612314;">Dominant</div>
        <div class="contenu"> Intro - Sa main est en feu mais je me refuse à m'arrêter. Je veux lui faire du bien, acceptant sa demande. Ma paume amortisse tous les coups, je mesure l'intensité de la claque, la surface de peau que je frappe, la réaction du corps de ma soumise.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g6-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM4" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #790b3b;">Corrupt Citizen</div>
        <div class="contenu"> Intro - Les autres hommes la regardent, hypnotisés comme moi. Un désir immense brûle dans leurs yeux. Ils la veulent, mais moi aussi. Le corps nu de la femme brille sous l'éclairage tamisé, trois hommes l'entourent tandis qu'elle est à genoux à leurs pieds. Ils la caressent tandis que nos regards se croisent, et le sien me transperce. Je la désire.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g9-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM5" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #9c7773;">Innocent Citizen</div>
        <div class="contenu"> Intro - Je me laisse aller à ses baisers tendres, mordillements, ses mains se baladant allégrement dans mon dos en un semblant d'étreinte. Je me met en quête de ses lèvres, du délicieux nectar qu'elles recèlent, leurs deux bouches s'unissant en une parfaite harmonie. Je le veux, je l'aime. Je lâche un soupire contre ses lèvres, et ses bras me serrent tendrement contre son torse.. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g4-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM6" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #15625f;">Slave</div>
        <div class="contenu"> Intro - Un claquement retentit soudain dans la pièce, qui me fit sursauter, avant que je ressente dans ma chair la brûlure qui me mordit. J'arque le dos, dans une vaine tentative pour me libérer des liens qui me maintenaient impitoyablement.</div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g5-">Les rejoindre ?</a>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_NOM7" style="display: none;">
        <div class="nom_groupe_qeel" style="color: #7a6343;">Submissive</div>
        <div class="contenu"> Intro - Je me laisse aller à ses baisers tendres, mordillements, ses mains se baladant allégrement dans mon dos en un semblant d'étreinte. Je me met en quête de ses lèvres, du délicieux nectar qu'elles recèlent, leurs deux bouches s'unissant en une parfaite harmonie. Je le veux, je l'aime. Je lâche un soupire contre ses lèvres, et ses bras me serrent tendrement contre son torse. </div>
        <a href="/t34-"> En savoir plus</a> ● <a href="/g8-">Les rejoindre ?</a>
      </div>

      <!--FIN modifications -->

      <script type="text/javascript">
        //<!--
                var anc_onglet = 'staff';
                change_onglet(anc_onglet);
        //-->
      </script>

    </div>

  </div>

</div>
    <!-- END disable_viewonline -->

[Lilynufare]

ça marche, je vous remercie Bonne soirée.
Problème résolu.