AccueilDernières imagesRechercherS'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

    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    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.
    |!| Droits du tutoriel réservés.

    [Html & CSS] Page d'accueil en onglet - Page 7 808986tutopaged__accueil



    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:

    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:

    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.

    [Html & CSS] Page d'accueil en onglet - Page 7 489782finishtutoqeel

    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.

    Vos commentaires et remerciements sont toujours bienvenus ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS, venez poster ici.


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



    Merci beaucoup Woo pour ce kit *-*
    [Html & CSS] Page d'accueil en onglet - Page 7 657955SignatureSuicopie
    Sui' Art's
    Doctor Who
    Doctor Who
    MasculinAge : 30Messages : 160

    Sam 3 Aoû 2013 - 14:57

    Merci :)





    DOCTOR WHO ☼
    ©️ Yamashita d'épicode
    Baka Kitsune Maaka
    Baka Kitsune Maaka
    FémininAge : 31Messages : 22

    Mar 6 Aoû 2013 - 21:39

    Merci Wink



    [Html & CSS] Page d'accueil en onglet - Page 7 554906BakaKitsuneMaaka1
    Summeryoid
    Summeryoid
    FémininAge : 29Messages : 32

    Ven 9 Aoû 2013 - 0:34

    Merci ~



    [Html & CSS] Page d'accueil en onglet - Page 7 539853pin
    Narutokage
    Narutokage
    MasculinAge : 26Messages : 17

    Ven 9 Aoû 2013 - 0:55

    Thanks'



    [Html & CSS] Page d'accueil en onglet - Page 7 Kakash10
    Lakxi
    Lakxi
    FémininAge : 31Messages : 40

    Mer 14 Aoû 2013 - 12:40

    merci !
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mer 14 Aoû 2013 - 15:23

    Merci
    Calypso Luciano
    Calypso Luciano
    FémininAge : 33Messages : 333

    Mer 14 Aoû 2013 - 21:24

    merci je suis curieuse x)
    Dundun
    Dundun
    FémininAge : 27Messages : 15

    Ven 16 Aoû 2013 - 21:13

    Merci !
    SNMitsuki
    SNMitsuki
    FémininAge : 26Messages : 63

    Sam 17 Aoû 2013 - 22:54

    Merci



    [Html & CSS] Page d'accueil en onglet - Page 7 250032Sanstitre1
    Honeey L.
    Honeey L.
    FémininAge : 31Messages : 80

    Dim 18 Aoû 2013 - 17:30

    Merci :)
    Emma-Iseult
    Emma-Iseult
    FémininAge : 27Messages : 44

    Lun 19 Aoû 2013 - 16:40

    Gracias !
    Médea
    Médea
    FémininAge : 29Messages : 43

    Mar 20 Aoû 2013 - 3:12

    Merci ;3
    Irisa
    Irisa
    FémininAge : 25Messages : 20

    Mar 20 Aoû 2013 - 19:37

    Merci !
    Sakura-chan
    Sakura-chan
    FémininAge : 26Messages : 180

    Mer 21 Aoû 2013 - 20:46

    Merci beaucoup ! ^^
    teck
    teck
    MasculinAge : 32Messages : 63

    Mer 21 Aoû 2013 - 21:25

    merci



    [Html & CSS] Page d'accueil en onglet - Page 7 Signa113
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 24 Aoû 2013 - 19:13

    Merci pour ceci.



    [Html & CSS] Page d'accueil en onglet - Page 7 Oyl7
    Flower_*
    Flower_*
    FémininAge : 29Messages : 605

    Sam 31 Aoû 2013 - 18:19

    Merci :)
    Capouccino
    Capouccino
    FémininAge : 26Messages : 204

    Jeu 5 Sep 2013 - 20:22

    Merciii o/



    "Espérer l'inespérable c'est croire en l'impossible."
    jeckurosaki
    jeckurosaki
    MasculinAge : 33Messages : 15

    Sam 7 Sep 2013 - 4:11

    Merchi =3
    Siprano
    Siprano
    FémininAge : 26Messages : 295

    Sam 7 Sep 2013 - 16:21

    Merci
    Airelai
    Airelai
    FémininAge : 27Messages : 6

    Sam 7 Sep 2013 - 17:45

    mercii
    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Mer 11 Sep 2013 - 16:33

    merci
    Aile
    Aile
    FémininAge : 36Messages : 134

    Ven 13 Sep 2013 - 13:27

    Je suis curieuse de voir le résultat. Merci.



    [Html & CSS] Page d'accueil en onglet - Page 7 799284Sanstitre1
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 31Messages : 42

    Sam 14 Sep 2013 - 14:47

    merci =)
    Lilly31
    Lilly31
    FémininAge : 32Messages : 97

    Sam 14 Sep 2013 - 20:12

    Merci pour le partage :3



    [Html & CSS] Page d'accueil en onglet - Page 7 Rehete10
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:23