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.


    QEEL en onglets [CSS3, sans javascript]

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31718

    le Mer 13 Juin 2012 - 11:54

    Rappel du premier message :

    Qu'est-ce que c'est ?

    Il s'agit une zone comportant différents onglets et permettant chacun d'afficher une information différentes dans cette même zone. Par exemple, en cliquant sur le premier onglet vous affichez le contexte, sur le second le staff, etc... et le tout dans le même encadré, permettant d'éviter les pages d'accueil trop longues ou bien de faire de votre QEEL un espace plus sympathique que le QEEL d'origine. Ce code peut être utilisé pour l'un ou l'autre, il suffit dans le second cas d'enlever le code du QEEL de base, d'y mettre ce code, et de remplir avec les informations de votre QEEL de base. Il faut cependant un petit peu de connaissances dans les templates, histoire de savoir où et comment mettre les choses, mais c'est très facile à apprendre ! Wink

    Voici l'aperçu :

    >>> Aperçu du résultat <<<

    Vous allez me dire que ce code a déjà été fait, qu'il existe déjà... oui certes le résultat est ressemblant, mais ce code que je vous donne là vous permet de faire des onglets SANS javascript. Le code est donc plus simple, il ne comporte que deux partie : un code html et un code css.

    Il vous suffit ensuite de mettre ce que vous voulez dans chaque zone de texte, y compris une image de fond différente pour chacune Wink

    Vous constaterez qu'il y a un espace au dessus du bloc d'accueil, c'est pour éviter qu'en se recentrant sur l'accueil à cause de l'ancre placé en codage la page ne remonte trop. Si ma phrase vous parait être du chinois, essayez-donc d'enlever la série de "< br / >" et vous comprendrez mieux Very Happy. Pour combler ce "vide" je vous conseille de faire une image ou de mettre un titre en assez gros, avec simplement "Accueil" ou "Online" (selon l'utilisation) ou encore un "Welcome [username]" Wink



    Les Codes html & css

    Comme expliqué en titre et en intro, il n'y a pas de javascript dans ce code, tout est fait uniquement en CSS3, vous avez donc deux codes à afficher :

    • le premier, l'html, dans la partie du forum où vous voulez que soit votre accordéon (il peut s'agir tout simplement de la page d'accueil, mais aussi dans un template, comme par exemple si vous souhaitez vous en servir en QEEL)

    • le second, le css ou "mise en forme", vous devez le copier coller dans la Feuille CSS de votre forum, c'est à dire : dans le Panneau d'Admin > Affichage > Couleurs > Feuille de style CSS.


    - Code HTML -




    - Code CSS -


    Il faut poster à la suite de ce message pour voir les codes contenu dans ces cadres.

    Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser Wink


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:10, édité 1 fois



    Lyka Siuka
    FémininAge : 17Messages : 55

    le Jeu 15 Aoû 2013 - 18:19

    Merci beaucoup =)



    Train123
    MasculinAge : 15Messages : 40

    le Ven 23 Aoû 2013 - 15:30

    merci :3
    tamanegeek
    MasculinAge : 17Messages : 167

    le Ven 30 Aoû 2013 - 23:05

    Merci !
    Aile
    FémininAge : 28Messages : 123

    le Ven 13 Sep 2013 - 13:31

    Super comme toujours. Merci beaucoup ^^



    Gerbille ~
    FémininAge : 21Messages : 31

    le Lun 23 Sep 2013 - 12:38

    merci ! du travail très propre !
    daminor26
    MasculinAge : 18Messages : 41

    le Ven 11 Oct 2013 - 17:59

    merci :)
    Pandora Blue
    FémininAge : 27Messages : 28

    le Ven 1 Nov 2013 - 2:14

    Merci du partage




    When the men, the scavengers, come for you do not give yourself to them. Wear your strengh like armour, fight like a beast, rip them apart and burn their bones. You are a lady, a warrior a tsunami, and when you are done, tell the world that you belong to no man… you belong only to yourself.
    ( Lou' )
    FémininAge : 21Messages : 107

    le Sam 9 Nov 2013 - 10:49

    Oh merci beaucoup =D
    CaféOlé
    MasculinAge : 27Messages : 349

    le Lun 11 Nov 2013 - 17:31

    mici ! je ne veux pas l'utiliser mais juste le décortiquer pour voir comment il marche x)




    Hana Evali
    FémininAge : 26Messages : 153

    le Ven 29 Nov 2013 - 23:22

    superbe ! Merci !



    tchapalow
    FémininAge : 26Messages : 32

    le Sam 30 Nov 2013 - 11:05

    Je voudrais bien voir voir ces codes!
    Merciii!
    Geen
    FémininAge : 17Messages : 33

    le Sam 30 Nov 2013 - 17:14

    Merci ♥
    Shannon{sweetie}
    FémininAge : 20Messages : 21

    le Mar 10 Déc 2013 - 23:40

    Merci x)
    Glorious
    MasculinAge : 26Messages : 84

    le Jeu 19 Déc 2013 - 19:31

    J'aime :)
    Faraday
    FémininAge : 26Messages : 39

    le Ven 24 Jan 2014 - 12:53

    Merci!
    TATACARO13
    FémininAge : 41Messages : 80

    le Ven 24 Jan 2014 - 22:43

    merci





    Narcisse
    FémininAge : 101Messages : 21

    le Mar 28 Jan 2014 - 13:50

    Merci beaucoup  :hug: 
    jotherrien13
    MasculinAge : 23Messages : 34

    le Jeu 27 Fév 2014 - 0:07

    Marchi
    Lady Doll
    FémininAge : 27Messages : 101

    le Sam 1 Mar 2014 - 17:26

    merci ^^
    Hayate747
    MasculinAge : 27Messages : 194

    le Dim 2 Mar 2014 - 22:46

    Merci !
    Lovelygirl
    FémininAge : 25Messages : 5

    le Dim 9 Mar 2014 - 11:37

    Thanks :)
    Aelita
    FémininAge : 23Messages : 277

    le Sam 22 Mar 2014 - 20:33

    Merci ^^
    DDril
    MasculinAge : 32Messages : 33

    le Sam 22 Mar 2014 - 23:14

    Merci
    Invité

    le Mar 22 Avr 2014 - 14:41

    Très utile merci du partage ! :)
    Crimmson Bounty
    MasculinMessages : 229

    le Mer 30 Avr 2014 - 14:33

    C'est ce qu'il me faut pour ma PA merci !



    Contenu sponsorisé

    Aujourd'hui à 21:01


      La date/heure actuelle est Jeu 8 Déc 2016 - 21:01