• Créatrice du Tutoriel : -Yuffie-Kisaragi-
• Niveau : Moyen
• Contraintes : Vous devez être le fondateur du forum. Enfin cela dépend de l'emplacement. (Seulement pour les Templates).
• Autres : Exemple
Exemple pour les class. [Étape 2]
• Vous pouvez mettre ce code dans un page HTML ! Pour ensuite mettre une Iframe.

• La première chose à faire est d'ouvrir l'endroit ou vous voulez placer vos onglets. (QEEL, PA, simple post, etc.).

Code:

<center>
    <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>

Cette partie ne doit pas être touchée sauf si vous voulez changer le nom de la class. Comme remplacer onglet_0 par onglet_fermé par exemple. Mais vous devrez changer le CSS aussi. Le mieux est de ne pas y toucher. xD
Vos onglets ne sont toujours pas créer, ceci est juste le style de codage.

• Dans la deuxième partie, nous allons créer l'espace CSS pour changer l'apparence de vos onglets. Collez ce code à la suite de celui donner plus haut.

Code:

    <style type="text/css">
        .onglet
        {
                display:inline-block;
                margin-left:XXpx;
                margin-right:XXpx;
                padding:XXpx;
                border:XXpx solid #CDOE COULEUR;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#CODE COULEUR ou url('URL IMAGE');
                border-bottom: XXpx solid #CODE COULEUR;
                border-top:XXpx solid #CODE COULEUR;
                border-left:XXpx solid #CODE COULEUR;
                border-right:XXpx solid #CODE COULEUR;
                -moz-border-radius-topright : XXpx solid #CODE COULEUR;
                -moz-border-radius-topleft : XXpx solid #CODE COULEUR;
        }

        .onglet_0:before
        {
              content : "signe ";
        }

        .onglet_1
        {
                background:#CODE COULEUR ou url('URL IMAGE');
                border-bottom:XXpx solid #CODE COULEUR;
                border-top:XXpx solid #CODE COULEUR;
                border-left:XXpx solid #CODE COULEUR;
                border-right:XXpx solid #CODE COULEUR;
                padding-bottom:XXpx;
                -moz-border-radius-topright : XXpx;
                -moz-border-radius-topleft : XXpx;
        }

        .onglet_1:before
        {
              content : "signe ";
        }

        .contenu_onglet
        {
                background:#CODE COULEUR ou url('URL IMAGE');
                color:#CODE COULEUR;
                text-shadow:XXpx XXpx XXpx #CODE COULEUR;
                -moz-border-radius : XXpx;
                border-left: XXpx solid #CODE COULEUR;
                border-right: XXpx solid #CODE COULEUR;
                border-top: XXpx solid #CODE COULEUR; 
                border-bottom: XXpx solid #CODE COULEUR;
                margin-top:-1px;
                padding:5px;
                display:none;
                height : XXXpx;
                width : XXXpx;
                font-size:XXpx;
        }
     
        </style>
</head>

Expliquons un peu tout ce CSS. La class .onglet signifie les onglets en général. La class onglet_0 est pour l'apparence, le positionnement etc pour les onglets fermés. onglet_0:before sert à mettre un signe devant le nom de l'onglet lorsque qu'il est fermé. onglet_1 est pareil que pour onglet_0 sauf que c'est lorsque les onglets sont ouverts. Ce qui veux dire que onglet_1:before est pour mettre un signe devant le nom de l'onglet à l'ouverture. Et pour finir, la class contenu_onglet est pour l'apparence du contenu des onglets. Si vous ne voyez pas vraiment, je passerai un "schéma" après la décortication des caractéristiques du CSS.

Alors pour commencer facilement, je vais vous expliquer tout ce qui touche l'apparence. (Couleur, texte, etc.)
Background : Sert à mettre un fond à l'emplacement voulu. Vous pouvez mettre une image comme une simple couleur. Il suffit de mettre background : #code de la couleur ou backgrond : url(URL de l'image voulue). Et puis voilà vous avez votre fond.
Border-left/right/top/bottom : Sert à mettre un contour autour de la cellule. Pour ceux qui ne connaissent rien à l'anglais, left veut gauche, right=droit, top=haut et bottom=bas. N'oubliez pas le "-" entre border et le côté. Vous devrez ajoute deux autre petites choses pour voir les contours. Le nombre de pixels et le style. Pour les pixels, c'est simple, vous avez juste à mettre un nombrepx. J'ai mis des XX à la place des nombres. Pour le style, vous avez le choix entre : solid qui fera un contour continu, dotted qui lui, fera un contour en pointillés, dashed pour faire un contour en tirets et enfin double qui fera des doubles lignes.
Color : Ceci sert pour la couleur du texte. Vous avez juste à mettre #code de la couleur.
Text-shadow : Avec ce code, vous pourrez mettre une ombre à votre texte et de n'importe quelle couleur, à n'importe quelle portée et peu n'importe quelle taille. Pour ceci vous allez devoir remplir avec un nombre de pixel et le code de la couleur voulue. (Sachez que pour mettre les couleur par défaut comme celle que vous avez en disponibilité pour un post, il vous suffit de mettre, darkred, red, blue, darkblue, white, blacl, green etc.). Pour la distance et la taille, vous allez devoir mettre sous cette forme : 0px 1px 2px (en remplaçant par vos chiffres)/
0px : Distance sur la droite. Pour la mettre à gauche, il suffit de mettre -. (Exemple : -3px. L'ombre sera déplacée de 3px sur la gauche.)
1px : Distance en bas du texte. Pour le mettre en haut, même système que pour la gauche.
2px : Taille de l'ombre. Si vous mettez à 0, ça sera sans flou.
Exemple, si je mets : 1px 1px 0px black, cela va me donner
-moz-border-radius : Les coins seront arrondis sous firefox. Je ne me rappelle plus du code pour IE et Google Chrome. ._.. Vous devrez alors mettre : 0px 1px 2px 3px. Ou si vous avez peur d'oublier quel chiffre correspond à quel côté, vous pouvez ajouter -left/right/top ou bottom.
0px : Coin en haut en gauche.
1px : Coin en haut à droite.
2px : Coin en bas à droite.
3px : Coin en bas à gauche.
Font-size : Taille du texte.

Padding : Marge intérieur de la cellule. Pareil que pour les arrondis, vous pouvez mettre les 4 côté en même. Si vous vous la même marche pour les 4 côtés, vous pouvez mettre simple XXpx.
Margin : Marge extérieur de la cellule. Idem que paddindg.
Height : Hauteur maximal du champs de texte ou de la cellule entière.
Width : Largeur maximal.

Voilà je crois avoir tout dit. XD

• Bien ! Maintenant, nous allons pouvoir créer les onglets.

Code:

    <div class="systeme_onglets">
        <div class="onglets">
<center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">1er</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">2eme</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">3eme</span>
<span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">4eme</span></center>
        </div>

Vous avez juste à modifier les 1er, 2eme, 3eme, 4eme. Attention à ne pas mettre d'accents dans les titres entre "" et ''. Vous pouvez modifier le onmouseover par OnClick.
Onmouseover : L'onglet changera par un simple passage de la souris.
OnClick : Vous devrez appuyer sur l'onglet pour son affichage.

• Maintenant, créons l'espace du contenu des onglets.

Code:

  <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_1er">
            CONTENUE DU PREMIER ONGLET
            </div>
            <div class="contenu_onglet" id="contenu_onglet_2eme">
                CONTENUE DU DEUXIÈME ONGLET
            </div>
            <div class="contenu_onglet" id="contenu_onglet_3eme">
                CONTENUE DU TROISIÈME ONGLET
            </div>
 <div class="contenu_onglet" id="contenu_onglet_4eme">
                CONTENUE DU QUATRIÈME ONGLET
            </div>

Là aussi vous allez devoir changer les noms d'onglet. (1er, 2eme etc.).

• Il va falloir que l'on ferme toute les div si l'on ne veut pas qu'il y ai des problèmes d'affichage. Et aussi déterminer un onglet par défaut. (Celui qui sera tout le temps ouvert en premier).

Code:

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

Vous voyez le 1er ? Hé bien remplacer le par le nom de l'onglet que vous voulez qui soit ouvert en premier.

• Le Tutoriel à été réalisé par -Yuffie-Kisaragi-. La mise en page à également été réaliser par -Yuffie-Kisaragi-. Toute reproduction partielle ou complète, plagiat ou autre est strictement interdite. Veuillez me demander si vous voulez le mettre autre part.
En cas de problèmes avec le tutoriel ou de problème de compréhension, n'hésitez pas à me demander par MP ou ici-même.