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 : 31721

    le Mer 13 Juin 2012 - 11:54

    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



    InfiniKey
    FémininAge : 30Messages : 45

    le Dim 17 Juin 2012 - 20:01

    Je veux bien voir


    EDIT
    Merci beaucoup cheers
    Kagami Tsuki
    MasculinAge : 21Messages : 14

    le Lun 18 Juin 2012 - 23:10

    Merci :)
    Miku
    MasculinAge : 24Messages : 70

    le Mar 19 Juin 2012 - 22:29

    Merci beaucoup.
    MaryChou
    FémininAge : 20Messages : 16

    le Jeu 21 Juin 2012 - 22:30

    Merci du partage
    Kanna
    Age : 27Messages : 49

    le Ven 22 Juin 2012 - 22:18

    Merci beaucoup =3



    Skyleen
    FémininAge : 24Messages : 476

    le Dim 24 Juin 2012 - 17:11

    Merci beaucoup :)



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    Sakura Sumeragi
    FémininAge : 26Messages : 60

    le Lun 25 Juin 2012 - 14:22

    Merci du partage ^^
    Saphira
    FémininAge : 20Messages : 72

    le Mar 26 Juin 2012 - 14:56

    Merci =)
    Blue.
    FémininAge : 21Messages : 9

    le Sam 30 Juin 2012 - 18:36

      Merci ! :3
    Invité

    le Sam 30 Juin 2012 - 19:11

    Marchi :3
    Josh W. Irkès
    MasculinAge : 20Messages : 14

    le Sam 30 Juin 2012 - 19:41

    merci
    Klash
    MasculinAge : 36Messages : 20653

    le Dim 1 Juil 2012 - 11:27

    Bonjour ,Léanna pense à aller te présenter merci.



    Assyn
    FémininAge : 21Messages : 60

    le Dim 1 Juil 2012 - 20:56

    Merci! =)



    killer999
    MasculinAge : 25Messages : 116

    le Lun 2 Juil 2012 - 1:42

    Thanks
    Chocolakato
    FémininAge : 26Messages : 762

    le Mer 4 Juil 2012 - 20:15

    Merci :)



    Stanislava
    FémininAge : 21Messages : 102

    le Mer 11 Juil 2012 - 15:23

    Merci c:



    Narachi
    MasculinAge : 23Messages : 71

    le Jeu 12 Juil 2012 - 7:02

    Merci.



    Gralewyr
    MasculinAge : 36Messages : 16

    le Jeu 19 Juil 2012 - 15:47

    cheers
    AQW
    FémininAge : 22Messages : 221

    le Dim 22 Juil 2012 - 17:33

    Merci o/



    Blblbl. ♥
    Ladymarmelade
    FémininAge : 21Messages : 32

    le Lun 23 Juil 2012 - 11:54

    merci beaucoup
    Mermaid
    FémininAge : 21Messages : 36

    le Ven 27 Juil 2012 - 18:11

    merci !
    Meltoriel
    FémininAge : 20Messages : 30

    le Lun 30 Juil 2012 - 12:47

    Merci beaucoup Sparrow-style !! :arrh: :captain:
    Liitchy
    FémininAge : 21Messages : 40

    le Lun 30 Juil 2012 - 12:58

    Merci
    Iςħĩgø
    MasculinAge : 20Messages : 23

    le Ven 3 Aoû 2012 - 11:38

    Des onglets cliquable en css affraid !







    Le mec le + Styléééé
    Oué Je gère héhé


    Contenu sponsorisé

    Aujourd'hui à 2:04


      La date/heure actuelle est Sam 10 Déc 2016 - 2:04