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.

Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    [Template & CSS] Qeel (=Qui est en ligne) en onglet.

    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    Mar 21 Sep 2010 - 18:54

    Rappel du premier message :

    #html #css #qeel #onglets #phpBB2 #auteur_Sui


    Bouh à vous !!!

    Enfin sur vos écran!! Le tutoriel du QEEL (= Qui est en ligne) en onglet, ayant chercher pendant un moment ce moyen que je voyais sur des forum et ne trouvant pas de tutoriel dessus, bah je le partage :p.
    Bonne lecture Wink.

    Niveau: ]Moyen]Aperçu: IciTuto 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.
    |!| U petit merci est le bienvenue !

    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 557166tutoqeel


    |!| Ne pas utiliser ce même code pour la page d'accueil sinon des bug apparaîtront.


    Partie 1
    Template


    Pour commencer nous allons procédé différemment pour la modification du template, allez dans votre Panneau d'administration -> Affichage -> Template : Général -> Index_body.
    Ouvrez sur votre pc le bloc note et vous couper/coller dedans le code concernant le QEEL, c'est à dire celui qui se trouve entre:

    Code:
    <!-- BEGIN disable_viewonline -->

    et

    Code:
    <!-- END disable_viewonline -->

    Maintenant allez sur ce site -> Ici et copier le premier code qui commence par "doctype" et fini par "html".
    Mettez ce code entre les deux balises cité juste au dessus du tuto à la place du code mis dans votre bloc note.

    Si vous valider et publier votre template vous devriez obtenir ceci -> Ceci

    Bien entendu maintenant il faut remettre le Qeel :o, mais le procéder ne donnera pas le même résultat que sur mon exemple, pourquoi? Car c'est à vous de faire votre QEEL à votre guise, j'expliquerais le code après afin de vous faciliter les modifications tout simplement ^^.

    Donc prenez votre code dans le bloc note et mettez le à la place de sa:

    Code:
    <h1>Quoi?</h1>
                    Un simple système d'onglet utilisant les technologies:

                    <ul>
                        <li>(X)html</li>
                        <li>CSS</li>
                        <li>Javascript</li>
                    </ul>

    Vous obtenez normalement -> Ceci

    Je m'arrêterais la pour le remplissage des onglets mais comme je les dit je vais vous expliquer le code.
    ]Explication:

    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="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Quoi</span>
                <span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
                <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>

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

    Code:
    <div class="contenu_onglet" id="contenu_onglet_quoi">
    ...
    </div>

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

    Code:
    <span class="onglet_0 onglet" id="comment" onclick="javascript:change_onglet('comment');"> Comment?</span>

    après cet ligne:

    Code:
    <span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</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_onglet" id="contenu_onglet_comment">Contenu de l'onglet "Comment?"</div>

    après ce code:

    Code:
    <div class="contenu_onglet" id="contenu_onglet_pourquoi">
                    <h1>Pourquoi?</h1>
                    Pour simplifier la navigation et la diviser en parties
                </div>

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




    Partie 2
    Le CSS


    Qui dit (X)Html dit aussi CSS bah oui c'est toujours comme ça ^^, et pour ceux qui on quelque connaissance vous aurez surement remarquer que le CSS à été directement inséré dans le code entre les balise "head" mais on va le retiré et le placer directement dans notre feuille de style CSS du forum.
    Donc faites un couper/coller ou un copier/coller (mais penser toujours à retire le code sinon il apparaîtra deux fois et sa peut tout fausser) du css:

    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;
            }
            ul
            {
                    margin-top:0px;
                    margin-bottom:0px;
                    margin-left:-10px
            }
            h1
            {
                    margin:0px;
                    padding:0px;
            }

    Et placer le dans Affichage -> Couleur -> Feuille de style CSS.

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

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

    Code:
    .onglet

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

    Code:
    .onglet_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:
    .onglet_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_onglet

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

    Concernant les deux dernières classe si vous avez retirer les balise "ul" et "h1" du code de base, vous pouvez aussi retirer le CSS.

    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 505452finishtutoqeel

    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.
    On se revoit donc pour un prochain tutoriel qui ne devrait tarder... è_é


    Autre tutoriel utile:

    Qui est en ligne (groupe)
    A bientôt Wink.

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sui' le Mer 15 Juin 2011 - 13:30, édité 5 fois



    Merci beaucoup Woo pour ce kit *-*
    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 657955SignatureSuicopie
    Sui' Art's
    Nikos
    Nikos
    MasculinAge : 31Messages : 81

    Ven 8 Oct 2010 - 16:03

    C'est justement ce que je cherchais !
    Super ! Very Happy

    Merci !!



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 Signatxux
    gohan59750
    gohan59750
    MasculinAge : 30Messages : 148

    Sam 9 Oct 2010 - 11:45

    Je souhaite voir ton tuto' merveilleux =)



    Pti' Biscuit
    Pti' Biscuit
    MasculinAge : 28Messages : 1691

    Sam 9 Oct 2010 - 14:50

    ...



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 2k0uoy

    ~ Canonnier of Calypso ~
    Didine62
    Didine62
    FémininAge : 30Messages : 3741

    Jeu 14 Oct 2010 - 10:56

    Merci ^^ (oui jme fais chier au lycée XD)



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 1350160058-hell
    Kanna
    Kanna
    Age : 34Messages : 49

    Ven 15 Oct 2010 - 21:10

    Je veux voir *_*



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 830353oh
    D3NZL
    D3NZL
    Age : 30Messages : 62

    Sam 16 Oct 2010 - 11:05

    J'veux voir ça Razz
    PurpleRain
    PurpleRain
    MasculinAge : 28Messages : 28

    Sam 16 Oct 2010 - 12:45

    I wanna see ♥
    XXB
    XXB
    MasculinAge : 30Messages : 34

    Sam 16 Oct 2010 - 19:10

    Trop bien !!
    naruto-seikô
    naruto-seikô
    MasculinAge : 28Messages : 178

    Dim 17 Oct 2010 - 15:02

    Merci =p



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 184950Prince_persia

    Kit By Me
    Deadpool
    Deadpool
    MasculinAge : 33Messages : 6

    Lun 18 Oct 2010 - 16:23

    merci
    Kaveta
    Kaveta
    MasculinAge : 32Messages : 250

    Mer 20 Oct 2010 - 16:24

    Merci ça roxx du poney xD



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 4a6851b069f2cryu
    ExceedGraphic
    ExceedGraphic
    MasculinAge : 30Messages : 57

    Ven 22 Oct 2010 - 16:22

    Merci Sui' =D



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 1289152814-GrimmjowJaggerjackbyExceedArt
    Slash
    Slash
    MasculinAge : 30Messages : 80

    Ven 22 Oct 2010 - 17:00

    Merci du Partage Sui'



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 Bird10
    Shigeru
    Shigeru
    MasculinAge : 29Messages : 1497

    Ven 22 Oct 2010 - 20:09

    bon tuto



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 609890Naruto_1[Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 Naruto10
    Miyashi
    Miyashi
    MasculinAge : 38Messages : 750

    Sam 23 Oct 2010 - 21:59

    Super tuto



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 Sans_t11
    avatar
    Puchlu
    MasculinAge : 35Messages : 98

    Mar 26 Oct 2010 - 10:20

    Merci, je cherchais désespérément cette astuce. o/
    Benjamin55
    Benjamin55
    MasculinAge : 26Messages : 11

    Ven 29 Oct 2010 - 0:32

    Super le tuto mais je veux qu'il apparaissent *.*
    Lena
    Lena
    FémininAge : 33Messages : 100

    Ven 29 Oct 2010 - 4:26

    Interessant =D

    Merci x)



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 Lena13

    Merci a Kazuya pour son kit =)
    Anonymous
    Invité

    Ven 29 Oct 2010 - 12:53

    Je vais enfin essayer tout ça !

    EDIT:ça marche enfin !!! :)
    Naïra
    Naïra
    MasculinAge : 29Messages : 4776

    Ven 29 Oct 2010 - 14:57

    Bon bah c'est ce que je suis en train de chercher donc c'est parfait = D
    Merci Sui' ; )



    Merci Lys c'est magnifique =D
    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 15489800205066_naira2
    ~De retour dans la section Thème ; ) ~
    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 4bac838064207naira-version-3
    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 Fpyrrhauseme5fd47abi2
    Apollo Justice
    Apollo Justice
    MasculinAge : 28Messages : 1166

    Lun 1 Nov 2010 - 23:49

    ~ :) ~




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    Sasuke67420
    Sasuke67420
    MasculinAge : 39Messages : 51

    Mar 2 Nov 2010 - 17:41

    Merci je vais teste ! !
    Seven
    Seven
    FémininAge : 30Messages : 135

    Mar 2 Nov 2010 - 20:38

    A testé de suite ! >< Merci !
    L*
    L*
    FémininAge : 29Messages : 44

    Mer 7 Mai 2014 - 17:47

    Merci beaucoup =)
    Jull421
    Jull421
    FémininAge : 29Messages : 143

    Jeu 8 Mai 2014 - 23:28

    merci



    [Template & CSS] Qeel (=Qui est en ligne) en onglet. - Page 2 140228025614860943
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 5:40