Forum de Graph, aide Html et Css
 
AccueilAccueil  FAQFAQ  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 ORGANISATION PAR ONGLET CM

Aller en bas 
AuteurMessage
Sweet Purple
Admin
avatar

Messages : 131
Date d'inscription : 12/07/2010
Age : 24

MessageSujet: ORGANISATION PAR ONGLET CM   Jeu 28 Avr - 23:28

Boubou a écrit:
ORGANISATION PAR ONGLET

AUTEUR : .Little Lady // DIFFICULTE : Facile / Moyen



Ce tutoriel nous permet de réaliser de belles présentations soit pour un fiche de publicité, soit pour une PA. Cela nous permet de mettre pas mal d'informations tout en ayant quelque chose de soigné, d'organisé et de propre.


Bonjour,

Dans ce tuto, je vous propose d'apprendre comment faire une organisation par onglet. Cette organisation marche sur votre PA ou sur une page HTML.

Script trouvé sur support du web.

I:- Les scripts -

Pour commencer, va sur ton Panneau d'Admin >> Module >> HTML >> Gestion des Pages HTML >> Créer une nouvelle page.
Avant, vérifie bien qu'il y a bien cette image : au-dessus du champ texte.

Ensuite à ces deux questions coche non:
Voulez-vous utiliser le haut et le bas de page de votre forum ?
Utiliser cette page en tant que page d'accueil ?

Puis tu colles ceci dans ta page HTML et tu enregistres:
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;
                }
        //-->

Tout est bon jusque là ??

Alors on continue.

Ensuite tu copies l'adresse de ta page HTML que tu colleras dans une balise sricpt que voici:
Code:
<script language="javascript" src="adresse de ta page html script onglet"></script>

Ce code, tu peux le placer à deux endroits:
- soit dans ton template overall_header_new juste avant la balise < /head> mais pour cela il faut que tu soit la fondatrice de ton forum;
- soit dans la description de ton forum.

C'est bon, on peut continuer ??

II:- Les Onglets -

Alors passons maintenant à la création de tes onglets. Pour cela, il te suffit de copier et de coller ce code dans ta PA:
Code:
<div class="systeme_onglets">

        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
            <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
            <span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>
        </div>

        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

            <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

            <div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>
        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'nom_de_longlet';
                change_onglet(anc_onglet);
        //-->
        </script>

La valeur que tu donneras à cette ligne: var anc_onglet = 'nom_de_longlet', qui se trouve en fin de code correspond à l'onglet qui s'affichera à chaque fois que tu rechargeras la page.

Pour finir, si tu souhaites rajouter des onglets, il te suffiras de rajouter ceci dans la partie "onglet":
Code:
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onclick="javascript:change_onglet('nom_de_longlet');">Nom de l'onglet</span>

et ceci dans la partie "contenu_onglet":
Code:
<div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">Contenu de l'onglet</div>

III:- Le CSS -

Il est évident que tu peux personnaliser tes onglets avec du CSS. Voici donc un code CSS de base modifiable bien évidemment:
Code:
.onglet
        {
                display:inline-block;
                margin-left:3px;
                margin-right:3px;
                padding:3px;
                border:1px solid black;
                cursor:pointer;
        }
        .onglet_0
        {
                background:#bbbbbb;
                border-bottom:1px solid black;
        }
        .onglet_1
        {
                background:#dddddd;
                border-bottom:0px solid black;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:#dddddd;
                border:1px solid black;
                margin-top:-1px;
                padding:5px;
                display:none;
        }

Si tu souhaites que les onglets changent au passage de la souris, remplace tous les onclick par onmouseover.

Voilà, nous arrivons à la fin de ce tuto. J'espère qu'il vous aura bien servi.

Pour voir le résultat, cliquez ici.

Merci à Little Lady pour la création de ce tutoriel.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://couleurs-en-folies.forumsactifs.net
 
ORGANISATION PAR ONGLET CM
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Couleurs En Folie :: Codage :: Astuce &' Aide :: Templates-
Sauter vers: