Codage du staff sur ma PA

[Xibition]

Bonjour/bonsoir,
Alors aujourd'hui j'aimerais ajouter une section staff à ma Page d'acceuil, j'ai trouvé un exemple qui m'a beaucoup plut, le voici : http://temptationisland.forum.st/h11-admins-4
J'aimerais svp que quelqu'un m'explique comment réussir à avoir ce genre de style

[Xibition]

petit up

[Lorris]

Bonjour,

Code:


<style type="text/css">
/* LES ONGLETS */
.onglet{
      display:inline-block;
      margin-left:0px;
      margin-right:0px;
      padding-top:3px;
      padding-bottom:3px;
      cursor:pointer;}

.onglet_0{
      color: #FFFFFF;
      font-family: arial;
      font-size: 24px;
      letter-spacing: 5px;
      text-shadow: 1px 1px 2px #F7D8CE;
}

.contenu_onglet{
      width:330px;
      height: auto;
      display:none; 
   
}
a img {
    border: none;
    }
a:link,a:active,a:visited {
    color : #B67C56;
    text-decoration: none !important;
    }
a:hover{
    text-decoration: none !important;
    color : #DAD9B5;
    }
.cadre{
background-color: #F0E9D3;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; text-align: center; margin: 5px; padding: 5px;
}
.desc1 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 35px;
letter-spacing: -1px;
  word-spacing: 2px;
  font-size:18px;
  line-height: 12px;
  font-family: times new roman;
color: #39a869;
  text-shadow: 0px 0px 1px ;
  text-align: center;
  text-transform: uppercase;
}
.desc3 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img70.xooimage.com/files/1/8/3/maya-2fd7966.png);
}
.serena {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/828965tif.png);
}
.maya {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/70451875TI.png);
}
.mack {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/785501ninaf2.png);
}
.dylan {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/258775tif.png);
}
.bambi {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/529096tif.png);
}
.maisy {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img15.hostingpics.net/pics/19241312f.png);
}
.elyn {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.aria {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.aleks {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.raiden {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.desc2 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
border-bottom:1px solid #F2EDDA;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
 -moz-border-radius:15px;-webkit-border-radius:15px;
 font-family: verdana;
color:#999789;
font-size: 11px;
text-align: justify;
line-height: 12px;
margin-bottom: 0px;
margin-top: 0px;
width:330px;
height: 50px;}
.laetitia {margin-right:230px; margin-top:-60px; margin-left:-0px;}
.nathan { -moz-border-radius:5px;-webkit-border-radius:5px;
margin-right: 0px;
margin-left: 0px;
align:center;}


</style>
<script language="javascript" src="http://beta-testeur.forumactif.com/h4-onglets">
</script>

      <center>
<table><tr><center><div class="contenu_onglets"><div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_groupe1"><div class="serena"></div><div class="desc1"><br><strong>Kaitlyn S. Bridges</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She's an <b>Heavy Metal Lover </b><br><a href="http://temptationisland.forum.st/u2" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=2" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe2"><div class="maya"></div><div class="desc1"><br><strong>Leila M. G. Addams</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She's an <b>Sweet Girl</b><br><a href="http://temptationisland.forum.st/u10" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=10" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe3"><div class="mack"></div><div class="desc1"><br><strong>Skyler-Echo B. Roslyakova</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She an <b>Beauty Queen</b><br><a href="http://temptationisland.forum.st/u11" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=11" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe4"><div class="dylan"></div><div class="desc1"><br><strong>Marley J. Callaway</strong></div><div class="desc2"><center><img src="http://img73.xooimage.com/files/9/5/9/tilalamodo-2f5bf2b.png"><br>
She's an <b>Escort Girl</b><br><a href="http://temptationisland.forum.st/u4" target="blank">profil</a> - <a href="http://temptationisland.forum.st/u4" target="blank">mp</a></center></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe5"> <div class="bambi"></div><div class="desc1"><br><strong>Tristan Anderson</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/e/7/a/modo-2fdb969.png"><br>
He's an <b>BG</b><br><a href="http://temptationisland.forum.st/u6" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=6" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe6"> <div class="maisy"></div><div class="desc1"><br><strong>Nathan S. McAnderson</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/e/7/a/modo-2fdb969.png"><br>
He's an <b>Good Guy</b><br><a href="http://temptationisland.forum.st/u12" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=12" target="blank">mp</a></center></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe7"><div class="elyn"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img73.xooimage.com/files/9/5/9/tilalamodo-2f5bf2b.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe8"> <div class="aria"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/d/e/f/tianimlalala-2f5c006.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe9"> <div class="aleks"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/d/e/f/tianimlalala-2f5c006.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe10"> <div class="raiden"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img67.xooimage.com/files/4/3/5/tilalanimmale-2f5c095.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>





        </div></center>
</tr>
<tr>
<center><table>
<td><span class="onglet_0 onglet" id="onglet_groupe1" onmouseover="javascript:change_onglet('groupe1');"><img src="http://phoebetonkinweb.com/elite7.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe2" onmouseover="javascript:change_onglet('groupe2');"><img src="http://s3.e-monsite.com/2011/01/03/09/vow.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe3" onmouseover="javascript:change_onglet('groupe3');"><img src="http://img11.hostingpics.net/pics/163243ninaf.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe4" onmouseover="javascript:change_onglet('groupe4');"><img src="http://27.media.tumblr.com/avatar_338038c0ed13_30.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe5" onmouseover="javascript:change_onglet('groupe5');"><img src="http://img11.hostingpics.net/pics/918855ti2.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe6" onmouseover="javascript:change_onglet('groupe6');"><img src="http://27.media.tumblr.com/avatar_2b32c4892a24_30.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe7" onmouseover="javascript:change_onglet('groupe7');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe8" onmouseover="javascript:change_onglet('groupe8');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe9" onmouseover="javascript:change_onglet('groupe9');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe10" onmouseover="javascript:change_onglet('groupe10');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td></table></center></tr></table>



    </div>

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

C'est un code assez long mais bon. On voit tout de suite ce qu'y est à remplacer. J'espère t'avoir un peu aider en te donnant le code même si tout le monde sait le faire ...
Cordialement.

[Xibition]

Merci, mais cela ne marche pas, j'ai pas demandé à avoir le code utilisé dans l'exemple, je voulais que quelqu'un m'explique comment réussir à avoir le même schéma que dans l'exemple. J'ai essayé le code dans ma PA mais tout déforme, sachant que j'ai une PA à onglets.

[Mr.Humph]

Comment ça le mettre en page d'accueil ?

[Xibition]

Bah une page d'acceuil, le tableau qu'on trouve dans l'acceuil de chaque forum x)

[Naruhiko]

Bonsoir,

Dans l'exemple que vous nous avez donné, le code se sépare en plusieurs parties. Le CSS, du HTML et deux petits bouts de Javascript. Pour pouvoir avoir le même code que vous avez vu, personnalisable et à l'accueille de votre Forum, c'est plutôt simple, mais il faut connaitre un minimum le CSS et le HTML pour changer les valeurs et donc pour personnaliser. Je ne suis pas sûr de ce que vous voulez, mais je vais essayer de vous aider le plus possible si c'est ce que je pense que vous voulez.

En premier, il faut que vous alliez dans "Panneau d'administration -> Modules -> Gestion des codes Javascript", vous créez un nouveau Javascript. Mettez le nom que vous voulez, sur toutes les pages de préférence et dans le cadre où vous pouvez marquer le javascript vous devez insérer ce code :

Code:

//<!--
                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;
                }
        //-->

Je ne vais pas vous le détaillé, mais c'est une étape importante pour que le code soit fonctionnel.

C'est maintenant que ça va se compliquer et où vos talents en codeur devront prendre le dessus ! Allez dans le "Panneau d'Administration -> Affichage -> Couleurs -> Feuille de style CSS". Dedans, vous devrez y mettre le code CSS. Voici celui de l'exemple dont vous nous avez fait part. Mais vous devrez bien entendu le modifier, car sinon ce serait du plagiat :

Code:

/* LES ONGLETS */
.onglet{
      display:inline-block;
      margin-left:0px;
      margin-right:0px;
      padding-top:3px;
      padding-bottom:3px;
      cursor:pointer;}

.onglet_0{
      color: #FFFFFF;
      font-family: arial;
      font-size: 24px;
      letter-spacing: 5px;
      text-shadow: 1px 1px 2px #F7D8CE;
}

.contenu_onglet{
      width:330px;
      height: auto;
      display:none; 
   
}
a img {
    border: none;
    }
a:link,a:active,a:visited {
    color : #B67C56;
    text-decoration: none !important;
    }
a:hover{
    text-decoration: none !important;
    color : #DAD9B5;
    }
.cadre{
background-color: #F0E9D3;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; text-align: center; margin: 5px; padding: 5px;
}
.desc1 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 35px;
letter-spacing: -1px;
  word-spacing: 2px;
  font-size:18px;
  line-height: 12px;
  font-family: times new roman;
color: #39a869;
  text-shadow: 0px 0px 1px ;
  text-align: center;
  text-transform: uppercase;
}
.desc3 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img70.xooimage.com/files/1/8/3/maya-2fd7966.png);
}
.serena {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/828965tif.png);
}
.maya {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/70451875TI.png);
}
.mack {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/785501ninaf2.png);
}
.dylan {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/258775tif.png);
}
.bambi {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/529096tif.png);
}
.maisy {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img15.hostingpics.net/pics/19241312f.png);
}
.elyn {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.aria {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.aleks {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.raiden {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/28600640TI.png);
}
.desc2 {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
border-bottom:1px solid #F2EDDA;
-moz-border-radius: 15px 15px 15px 15px;
-moz-box-shadow: 0px 0px 1px #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius:15px;
 font-family: verdana;
color:#999789;
font-size: 11px;
text-align: justify;
line-height: 12px;
margin-bottom: 0px;
margin-top: 0px;
width:330px;
height: 50px;}
.laetitia {margin-right:230px; margin-top:-60px; margin-left:-0px;}
.nathan { -moz-border-radius:5px;-webkit-border-radius:5px;
margin-right: 0px;
margin-left: 0px;
align:center;}

Il ne reste plus que le HTML maintenant ! Il faut que vous alliez dans le "Panneau d'Administration -> Affichage -> Généralités". Descendez un peu la page et vous verrez un champ assez large pour écrire un code HTML. Le code HTML de l'exemple est celui-ci :

Code:

<center><table><tr><center><div class="contenu_onglets"><div class="contenu_onglets">

            <div class="contenu_onglet" id="contenu_onglet_groupe1"><div class="serena"></div><div class="desc1"><br><strong>Kaitlyn S. Bridges</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She's an <b>Heavy Metal Lover </b><br><a href="http://temptationisland.forum.st/u2" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=2" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe2"><div class="maya"></div><div class="desc1"><br><strong>Leila M. G. Addams</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She's an <b>Sweet Girl</b><br><a href="http://temptationisland.forum.st/u10" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=10" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe3"><div class="mack"></div><div class="desc1"><br><strong>Skyler-Echo B. Roslyakova</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She an <b>Beauty Queen</b><br><a href="http://temptationisland.forum.st/u11" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=11" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe4"><div class="dylan"></div><div class="desc1"><br><strong>Marley J. Callaway</strong></div><div class="desc2"><center><img src="http://img73.xooimage.com/files/9/5/9/tilalamodo-2f5bf2b.png"><br>
She's an <b>Escort Girl</b><br><a href="http://temptationisland.forum.st/u4" target="blank">profil</a> - <a href="http://temptationisland.forum.st/u4" target="blank">mp</a></center></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe5"> <div class="bambi"></div><div class="desc1"><br><strong>Tristan Anderson</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/e/7/a/modo-2fdb969.png"><br>
He's an <b>BG</b><br><a href="http://temptationisland.forum.st/u6" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=6" target="blank">mp</a></center></div>
</div>

            <div class="contenu_onglet" id="contenu_onglet_groupe6"> <div class="maisy"></div><div class="desc1"><br><strong>Nathan S. McAnderson</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/e/7/a/modo-2fdb969.png"><br>
He's an <b>Good Guy</b><br><a href="http://temptationisland.forum.st/u12" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=12" target="blank">mp</a></center></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe7"><div class="elyn"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img73.xooimage.com/files/9/5/9/tilalamodo-2f5bf2b.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe8"> <div class="aria"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/d/e/f/tianimlalala-2f5c006.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe9"> <div class="aleks"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img72.xooimage.com/files/d/e/f/tianimlalala-2f5c006.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe10"> <div class="raiden"></div><div class="desc1"><br><strong>NOM PRENOM</strong></div><div class="desc2"><center><img src="http://img67.xooimage.com/files/4/3/5/tilalanimmale-2f5c095.png"><br>
She/He's an <b>XX</b><br><a href="URL" target="blank">profil</a> - <a href="URL" target="blank">mp</a></center></div>
</div>




        </div></center></tr>

<tr><center><table>

<td><span class="onglet_0 onglet" id="onglet_groupe1" onmouseover="javascript:change_onglet('groupe1');"><img src="http://phoebetonkinweb.com/elite7.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe2" onmouseover="javascript:change_onglet('groupe2');"><img src="http://s3.e-monsite.com/2011/01/03/09/vow.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe3" onmouseover="javascript:change_onglet('groupe3');"><img src="http://img11.hostingpics.net/pics/163243ninaf.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe4" onmouseover="javascript:change_onglet('groupe4');"><img src="http://27.media.tumblr.com/avatar_338038c0ed13_30.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe5" onmouseover="javascript:change_onglet('groupe5');"><img src="http://img11.hostingpics.net/pics/918855ti2.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe6" onmouseover="javascript:change_onglet('groupe6');"><img src="http://27.media.tumblr.com/avatar_2b32c4892a24_30.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe7" onmouseover="javascript:change_onglet('groupe7');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe8" onmouseover="javascript:change_onglet('groupe8');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe9" onmouseover="javascript:change_onglet('groupe9');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td>
<td><span class="onglet_0 onglet" id="onglet_groupe10" onmouseover="javascript:change_onglet('groupe10');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td></table></center></tr></table>



    </div>

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

Logiquement si vous n'avez rien modifié, là vous avez identiquement le même code que sur la page ciblée. Pour modifier le code, je vais vous montrer juste comment ajouté et enlevé un membre. Après se sera à vous de vous débrouiller, de chipoter le code pour comprendre. Il faut déjà savoir que le code joue avec le CSS et le HTML, donc pour modifier quelque chose, vous devrez modifier le CSS comme le HTML.

En HTML, le code suivant correspond à un onglet:

Code:

<div class="contenu_onglet" id="contenu_onglet_groupe2"><div class="maya"></div><div class="desc1"><br><strong>Leila M. G. Addams</strong></div><div class="desc2"><center><img src="http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png"><br>
She's an <b>Sweet Girl</b><br><a href="http://temptationisland.forum.st/u10" target="blank">profil</a> - <a href="http://temptationisland.forum.st/privmsg?mode=post&u=10" target="blank">mp</a></center></div>
</div>

Le seules choses que vous devez modifier avec le CSS, c'est le "Maya", les autres choses qui sont entourées pas des "class" sont communes aux autres onglets. Ensuite ce que vous pouvez modifier c'est "Leila M. G. Addams" qui correspond au "Nom et Prénom" (sur l'exemple c'est en vert et en grand). Le "http://img74.xooimage.com/files/6/c/a/h-h-h-h-h-h-h-h--2f5ba89.png" c'est le lien d'une image qui montre le grade. Vous pouvez le remplacer par du texte bien évidemment. "She's an Sweet Girl" c'est visiblement une petite phrase, vous pouvez modifier cela aussi comme bon vous sembles. "http://temptationisland.forum.st/u10" envois vers le "profil" et "http://temptationisland.forum.st/privmsg?mode=post&u=10" vers la possibilité d'envoyer un "message privé".

Pour le HTML c'est bientôt fini, il faut juste rajouter après ce code :

Code:

<td><span class="onglet_0 onglet" id="onglet_groupe10" onmouseover="javascript:change_onglet('groupe10');"><img src="http://img11.hostingpics.net/pics/37285146TI.png" class="nathan"></img></span></td></table></center></tr></table>

Le même code, sauf qu'il faut changer la "mini-image" (dans l'exemple: https://2img.net/r/hpimg11/pics/37285146TI.png), celle que lorsqu'on passe dessus, elle change l'onglet et aussi changer le nombre dans le code. Là c'est "onglet_groupe10" il faut le changer en "onglet_groupe11" !

Voilà, maintenant il reste que le CSS. Heureusement que c'est moins long. Il suffit de rajouter ceci après le code CSS donné au début :

Code:

.maya {
background-color: #f9faf5;
border-right:4px solid #F2EDDA;
border-left:4px solid #F2EDDA;
 -moz-border-radius:15px;-webkit-border-radius:15px;
-moz-border-radius: 15px 15px 15px 15px;
 -moz-box-shadow: 0px 0px 1px #FFFFFF;
margin-top: 0px;
margin-bottom: 0px;
width: 330px;
height: 90px;
background-image : url(http://img11.hostingpics.net/pics/70451875TI.png);

Ce qu'il faut changer c'est le .maya. Il faut le changer par le nom que vous avez mis dans le HTML à la place du "<div class="maya">". Par exemple si je mets "<div class="bob">" ce sera ".bob" Ensuite, il faut modifier le lien de l'image (https://2img.net/r/hpimg11/pics/70451875TI.png) image qui correspond à l'image horizontale au-dessus, lorsqu'on change d'onglet.

VVoilà !! Logiquement ça fonctionne. Je n'ai pas essayé, mais ça devrait fonctionne sachant que j'avais autrefois le même genre de code. Si vous avez quelconque problème, je suis disponible.

[Xibition]

Coucouu, merci beaucoup pour l'explication mais cela ne marche toujours pas :/ ca déforme entierement ma PA

[tupac]

Bonjour Jiji

Placer le code suivant dans votre page d'accueil.

Spoiler:

Les images en onglet sont a placer dans cette partie, vous pouvez y regler hauteur et largeur a l'aide du height et width.

Code:

<img src=" image ici " height="70" width="70">

Puis le css a placer dans votre feuille de style.

Code:

.onglet{
    border:1px solid #000;              /* bordure img onglet  */
    cursor:pointer;
    display:inline-block;
}

/* contenu du menu */

.contenu_onglet{
    background-color:#cecece;
    border: 1px solid #000;
    font-weight:bold;
    padding:0px;
    display:none;
    height: 220px;          /* largeur du tableau */     
    width: 462px;          /* hauteur du tableau */
}

et pour finir le javascript a placer dans la gestion des codes javascripts, il me semble que vous savez faire.

Code:

                //<!--
                        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;
                        }
                //-->

Bon maintenant si vous souhaitez rajouter un onglet en image il vous faut rajouter la partie suivante a la suite des onglets déjà existant.

Code:

                        <span class="onglet_0 onglet" id="onglet_six" onmouseover="javascript:change_onglet('six');">
        <img src=" image ici " height="70" width="70">
</span>

dans la partie du dessus j'ai pris en exemple le sixième onglets, vous pouvez voir a l'intérieur de cette partie ceci onglet_six et cela change_onglet('six'); donc si vous voulez rajouter un septième onglets il vous faudra mettre a la place du six ceci sept ou autre chose mais surtout pas la même chose.

Même chose pour rajouter le contenu qui va avec le nouvel onglet que vous aurez rajouté.
Il vous suffi juste de rajouter cette partie a la suite des autres.

Code:

<div class="contenu_onglet" id="contenu_onglet_six">Contenu 6</div>

J'ai pris en exemple le contenu six et même chose que pour l'onglet il vous faudra changer ceci contenu_onglet_six en cela contenu_onglet_sept pour que la classe soit en accord avec celle du septième onglets.

Voila j'espère avoir été assez clair si vous avez des questions n'hésitez surtout pas.

[Naruhiko]

Désolé que ce n'a pas fonctionné. Si l'astuce de "tupac" ne fonctionne pas, pouvons-nous avoir le code de votre PA ?

[Xibition]

Coucouu, merci beaucoup Tupac, ca marche super !