AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [Html & CSS] Page d'accueil en onglet

    Partagez
    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Jeu 30 Sep 2010 - 21:31

    Rappel du premier message :

    Re Bouh à vous !!!

    Après le tutoriel sur le QEEL en onglet, voici le procéder pour la page d'accueil en onglet x), je n'ai pas réunis c'est deux tutoriel car les codes sont différents, je vous déconseille donc fortement de ne pas prendre le système de code qui suivra pour votre Qeel.

    Niveau: FacileAperçu: AucunTuto by Sui'

    Avant de vous lancez dans ce tutoriel, il vous est conseillez de connaitre les base du CSS et XHTML sans ça vous risquerez d'avoir du mal dans la modification de votre code, je vous conseil de faire un petit passage sur le site de Riku -> ICI et de prendre un peu de votre temps à lire ces cours, merci Wink.
    |!| Droit du tutoriel réserver. Vous devrez poster pour voir l'explication, merci.




    Partie 1
    Html


    Nous allons commencer par mettre le code Html dans la page d'accueil, pour cela accéder à votre Panneau d'administration -> Affichage -> Généralité et coller le code qui suit:


    Spoiler:
    Code:
    <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script><div class="paonglets">
                <span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Accueil</span>
                <span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">Effectif</span>
                <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Autre</span>


            </div>

            <div class="contenu_paonglets">
                <div class="contenu_paonglet" id="contenu_paonglet_accueil">

    Contenu page d'accueil

    </div>

                <div class="contenu_paonglet" id="contenu_paonglet_effectif">

    Contenue effectif

    </div>

                <div class="contenu_paonglet" id="contenu_paonglet_autre">

    Contenu Autre

    </div></div>
        <script type="text/javascript">
            //<!--
                    var anc_paonglet = 'accueil';
                    change_paonglet(anc_paonglet);
            //-->
            </script>

    Validé et voila vous avez la structure de votre page d'accueil, c'était simple hein x) mais pour le moment c'est un peu moche aussi donc on va décorer tout sa grâce au CSS du moins après l'explication du code.

    Pour changer le nom des onglets, il vous suffit de modifier les mots qui se situe avant le "/span" dans ces lignes:

    Code:
    <span class="paonglet_0 paonglet" id="paonglet_accueil" onclick="javascript:change_paonglet('accueil');">Accueil</span>
                <span class="paonglet_0 paonglet" id="paonglet_effectif" onclick="javascript:change_paonglet('effectif');">Effectif</span>
                <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Autre</span>

    Pour remplir le contenu de vos onglet il vous suffit de placez vos code entre sa: (la sa concerne le contenu onglet "Accueil" bien sur)

    Code:
    <div class="contenu_paonglet" id="contenu_paonglet_accueil">
    ...
    </div>

    Si vous désirez rajouter un onglet, il vous suffit de rajouter par exemple ceci:

    Code:
    <span class="paonglet_0 paonglet" id="news" onclick="javascript:change_paonglet('news');"> News</span>

    après cet ligne:

    Code:
    <span class="paonglet_0 paonglet" id="paonglet_autre" onclick="javascript:change_paonglet('autre');">Autre</span>

    mais ce n'est pas tout il vous faut rajouter le contenu de ce nouvel onglet pour cela rajouter ceci:

    Code:
    <div class="contenu_paonglet" id="contenu_paonglet_news">Contenu de l'onglet "News"</div>

    après ce code:

    Code:
    <div class="contenu_paonglet" id="contenu_paonglet_autrei">

    Contenu autre

                </div>

    Je pense que cela devrait suffire pour la création d'un nouvel onglet, on passe à la suite?




    Partie 2
    Le CSS


    Comme je vous les dit pour le moment c'est moche x) alors nous allons décorer le tout avec le CSS, pour cela allez dans Affichage -> Couleur -> Feuille de style CSS et collez ce code à la fin:

    Spoiler:
    Code:
    .paonglet
            {
            display:inline-block;
            margin-left:20px;
            margin-right:20px;
            padding:10px;
            cursor:pointer;
            background-color: #8A8A8A;
            color: #fff;
            }
            .paonglet_0
            {
            border-radius: 2px 2px 2px 2px;
            -moz-border-radius: 2px 2px 2px 2px;
            -webkit-border-radius: 2px 2px 2px 2px;
            }
            .paonglet_1
            {
              color: #9F0000;
              border-radius: 2px 2px 2px 2px;
              -moz-border-radius: 2px 2px 2px 2px;
              -webkit-border-radius: 2px 2px 2px 2px;
            }

            .contenu_paonglet
            {
                    margin-top:-1px;
                    padding: 2px;
                    display:none;
                    height: 320px;
            }

    Pensez toujours à valider et c'est régler Wink.

    Comme pour le Html je vais vous expliquer le code CSS.
    Explication:

    Code:
    .paonglet

    Cet classe concerne seulement les onglets (les boutons "Accueil", "Effectif" ect). C'est dans cet classe que vous pourrez modifier les boutons.

    Code:
    .paonglet_0

    Cet classe concerne également les bouton mais seulement les bouton "inactif", sur vos 3 onglets il y en aura toujours un qui s'affiche mais les deux autres non, par exemple l'onglet actif aura le texte rouge alors que les inactif auront le texte blanc, c'est donc dans cet classe que vous régler les différences entre l'onglet actif et les inactif, il peux y avoir aucune différence bien entendu ^^.

    Code:
    .paonglet_1

    Vous l'aurez surement compris, cet classe concerne l'onglet actif donc pas besoin de vous expliquez en quoi sa consiste c'est dit jsute au dessus x).

    Code:
    .contenu_paonglet

    Cet classe comme son nom l'indique concerne le contenu de tout les onglets.


    Voila j'espère donc que le tutoriel sera compréhensible et qu'il vous aidera, n'hésitez pas à poser des questions si vous avez un problème ou si j'ai oublier quelque chose.


    Autre tutoriel utile:

    [Template & CSS] Personnalisé le style de la page d'accueil sans toucher au catégorie.
    A bientôt Wink.


    Dernière édition par Sui' le Ven 24 Déc 2010 - 10:05, édité 2 fois



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Sinavlia
    FémininAge : 20Messages : 158

    le Mar 18 Mar 2014 - 23:56

    Merci :)



    .erin
    FémininAge : 22Messages : 28

    le Jeu 20 Mar 2014 - 14:08

    merci
    avatar
    Rising Pheonix
    FémininAge : 33Messages : 23

    le Jeu 20 Mar 2014 - 18:47

    Sublime  Very Happy 
    avatar
    Hallibel
    FémininAge : 24Messages : 82

    le Sam 22 Mar 2014 - 14:16

    Merciii !
    avatar
    Budapest
    FémininAge : 17Messages : 46

    le Sam 22 Mar 2014 - 15:05

    Merci. (:



    avatar
    Raween
    FémininAge : 25Messages : 110

    le Dim 23 Mar 2014 - 5:05

    Merci beaucoup ^^
    avatar
    Lyka Siuka
    FémininAge : 18Messages : 55

    le Dim 23 Mar 2014 - 20:46

    MERCIIIII ♥



    avatar
    emilie84
    FémininAge : 33Messages : 6

    le Mer 26 Mar 2014 - 12:30

    merci
    avatar
    Crucible
    FémininAge : 28Messages : 36

    le Lun 31 Mar 2014 - 19:14

    Merci pour le tuto, c'est gentil de partager !



    « ONCE, I DUG A PIT AND FILLED IT WITH CLOUDS. OR WAS IT CLOWNS ?
    DOESN'T MATTER. IT DIDN'T SLOW HIM DOWN.
    TO BE HONEST, IT WASN'T THE BEST IDEA.
    AND IT REALLY BEGAN TO SMELL. MUST HAVE BEEN CLOWNS.
    CLOUDS DON'T SMELL BAD. THEY TASTE OF BUTTER ! AND TEARS.
    »
    avatar
    Akito
    MasculinAge : 25Messages : 73

    le Lun 31 Mar 2014 - 22:03

    merci :)
    avatar
    Tsumei
    MasculinAge : 27Messages : 116

    le Mar 1 Avr 2014 - 11:30

    Merci !
    avatar
    Fallaha
    FémininMessages : 80

    le Lun 7 Avr 2014 - 15:48

    merci
    avatar
    Aki'
    FémininAge : 21Messages : 255

    le Mar 8 Avr 2014 - 8:06

    Merci
    Abate.7
    MasculinAge : 22Messages : 58

    le Jeu 10 Avr 2014 - 19:06

    merci
    Yosh
    MasculinAge : 25Messages : 5

    le Ven 11 Avr 2014 - 1:38

    Merci
    avatar
    nuanciel
    FémininAge : 26Messages : 134

    le Ven 11 Avr 2014 - 8:27

    merci :)
    avatar
    Tropik
    MasculinAge : 23Messages : 58

    le Ven 11 Avr 2014 - 8:40

    Merci




    lovedesign

    avatar
    Aoi Kiseki
    FémininAge : 25Messages : 100

    le Mar 15 Avr 2014 - 20:04

    merci
    avatar
    Invité

    le Mar 22 Avr 2014 - 11:38

    Merci!
    avatar
    Frosty Blue
    FémininAge : 21Messages : 162

    le Mer 23 Avr 2014 - 16:46

    Merci!
    avatar
    Mangédéfruiélégumeuh
    MasculinAge : 20Messages : 83

    le Lun 28 Avr 2014 - 19:19

    Merci :) !
    avatar
    Naïshy
    FémininAge : 15Messages : 65

    le Dim 11 Mai 2014 - 18:16

    Mercii ! Very Happy
    avatar
    Ren haring
    MasculinAge : 23Messages : 1002

    le Dim 11 Mai 2014 - 18:43

    Merci beaucoup pour le partage
    avatar
    Castielle
    FémininAge : 22Messages : 33

    le Mer 14 Mai 2014 - 14:28

    Merci  :love: 
    Daft Miaou
    MasculinAge : 17Messages : 10

    le Sam 31 Mai 2014 - 19:51

    Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 15 Déc 2017 - 13:14