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
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    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



    avatar
    Chaussette
    FémininAge : 24Messages : 59

    le Jeu 9 Aoû 2012 - 16:02

    Merci beaucoup
    avatar
    Sixties
    FémininAge : 21Messages : 119

    le Jeu 9 Aoû 2012 - 16:10

    Merci =D
    avatar
    Tetsu
    FémininAge : 17Messages : 21

    le Jeu 9 Aoû 2012 - 21:03

    Han,merci Cap'taine *o*
    avatar
    fraisy
    FémininAge : 22Messages : 37

    le Dim 12 Aoû 2012 - 23:28

    cool /o/
    avatar
    Titia
    FémininAge : 25Messages : 63

    le Lun 20 Aoû 2012 - 17:47

    Je chercher ce code justement, je vais l'essayer de suite Very Happy



    avatar
    Ge-gege08
    FémininAge : 27Messages : 43

    le Mar 21 Aoû 2012 - 22:08

    Merci beaucoup!
    avatar
    Verresita
    FémininAge : 24Messages : 15

    le Jeu 23 Aoû 2012 - 15:50

    Merci :)
    avatar
    Lëwen
    FémininAge : 22Messages : 24

    le Mar 28 Aoû 2012 - 18:43

    Merci o/
    avatar
    Rin Nikky
    FémininAge : 18Messages : 37

    le Mer 29 Aoû 2012 - 19:08

    Merci pour le partage ^-^
    avatar
    md1991
    FémininAge : 26Messages : 36

    le Mar 4 Sep 2012 - 12:18

    Ah depuis le temps que je le cherchais merci =)



    avatar
    Bleufi
    FémininAge : 22Messages : 311

    le Dim 9 Sep 2012 - 8:14

    Thank you Wink



    avatar
    Neko-chan
    FémininAge : 20Messages : 28

    le Sam 15 Sep 2012 - 22:25

    Merci beaucoup. =) Je test dès que j'ai le courage de tout coder. \o



    avatar
    Tzuko
    MasculinAge : 17Messages : 7

    le Dim 16 Sep 2012 - 15:50

    Merci
    avatar
    arturb
    MasculinAge : 17Messages : 48

    le Lun 17 Sep 2012 - 16:49

    mmmmmmmmmmeeeeeeeeeerrrrrrrrrrcccccccccciiiiiiiiii!!!!!!!!!!
    avatar
    pierre31250
    MasculinAge : 21Messages : 38

    le Sam 29 Sep 2012 - 0:27

    merci
    avatar
    Médea
    FémininAge : 22Messages : 43

    le Mer 3 Oct 2012 - 4:02

    Merci !
    avatar
    DoDo94
    MasculinAge : 24Messages : 102

    le Jeu 4 Oct 2012 - 15:19

    Merci ! il me sera bien utile =P



    [center]
    <~::Kit by Moi::~>
    avatar
    Plume'
    FémininAge : 19Messages : 166

    le Sam 6 Oct 2012 - 12:32

    Merci !
    avatar
    Motoko
    FémininAge : 19Messages : 39

    le Sam 6 Oct 2012 - 16:43

    Balaise tout ça !
    avatar
    machichi
    MasculinAge : 18Messages : 24

    le Sam 13 Oct 2012 - 19:27

    Merci beaucoup pour le tutoriel !
    avatar
    Clémy
    FémininAge : 29Messages : 29

    le Lun 15 Oct 2012 - 11:31

    Merci! Very Happy
    avatar
    Miyabi Aizawa
    FémininAge : 26Messages : 5

    le Mar 16 Oct 2012 - 13:00

    Je suis curieuse de voir ce que tu nous présent



    avatar
    Shinøbi
    MasculinAge : 16Messages : 29

    le Mar 16 Oct 2012 - 14:26

    Merci. =D
    avatar
    Fares
    MasculinAge : 24Messages : 51

    le Mer 17 Oct 2012 - 0:17

    @Kagami Tsuki a écrit:Merci :)
    avatar
    Nocturne
    FémininAge : 27Messages : 21

    le Ven 19 Oct 2012 - 15:23

    Merci beaucoup :)
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Aoû 2017 - 14:04