Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31648

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    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


    FémininAge : 22Message(s) : 20
    TheHauteDefinition
    le Mar 22 Jan 2013 - 13:50
    Meeerchiii !


    MasculinAge : 15Message(s) : 29
    Battosai
    le Mer 23 Jan 2013 - 21:29
    merci
    MasculinAge : 24Message(s) : 23
    Ydrasilde
    le Mer 30 Jan 2013 - 22:51
    Merci beaucoup
    MasculinAge : 18Message(s) : 61
    Arthuragon
    le Sam 9 Fév 2013 - 2:08
    k
    MasculinAge : 22Message(s) : 142

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Databar
    le Jeu 21 Fév 2013 - 6:40
    merci
    FémininAge : 28Message(s) : 108
    Milka
    le Mer 6 Mar 2013 - 14:02
    Merci
    FémininAge : 22Message(s) : 41
    The_Scream
    le Ven 15 Mar 2013 - 21:04
    Merci !


    ~That's the hell said no ~


    Invité
    le Ven 15 Mar 2013 - 21:15
    Ah j'veux bien savoir comment faire des onglets à CSS3 :)
    Donc merci :)
    FémininAge : 18Message(s) : 53
    Dellou
    le Sam 23 Mar 2013 - 23:06
    Merci o/


    MasculinAge : 39Message(s) : 80
    fregadeth
    le Sam 30 Mar 2013 - 19:29
    Merci
    FémininAge : 30Message(s) : 42
    Jézabel
    le Dim 31 Mar 2013 - 11:46
    Merci pour ce tutoriel =)


    FémininAge : 16Message(s) : 93
    Glow
    le Mer 10 Avr 2013 - 16:58
    Merci :3
    FémininAge : 26Message(s) : 117
    [W]endy
    le Ven 12 Avr 2013 - 15:15
    Merci (:
    FémininAge : 20Message(s) : 30
    Electro
    le Sam 13 Avr 2013 - 19:21
    merci
    FémininAge : 28Message(s) : 205
    Grande
    le Mar 23 Avr 2013 - 23:04
    Merci


    FémininAge : 21Message(s) : 18
    Hessnellia
    le Mar 21 Mai 2013 - 3:36
    Merci beaucoup !
    FémininAge : 20Message(s) : 3
    Fluttershy
    le Dim 2 Juin 2013 - 12:04
    merci bien
    FémininAge : 30Message(s) : 33
    Eldiir
    le Jeu 20 Juin 2013 - 4:16
    Merci!
    MasculinAge : 34Message(s) : 57
    John Parker
    le Mar 25 Juin 2013 - 20:56
    Merci pour cette astuce !


    FémininAge : 25Message(s) : 167
    Offrande
    le Dim 30 Juin 2013 - 3:17
    Merci beaucoup pour ce magnifique tuto ! Je ne vais pas m'en servir de QEEL mais il vas être le listings des astuces sur mon forum, avec quelque modification de couleur, de bordure, d'image et avec un peut de CSS3 sa vas être sublime! Merci encore de tout cœur et bonne continuation.
    FémininAge : 27Message(s) : 30
    Never-Die
    le Dim 30 Juin 2013 - 16:54
    Thanks you
    FémininAge : 21Message(s) : 129
    Azuriel
    le Mar 23 Juil 2013 - 6:01
    Je vais tester aussi, tant que j'y suis ^^
    FémininMessage(s) : 14
    Ai-Kisu
    le Mar 30 Juil 2013 - 15:21
    Merci.
    FémininAge : 28Message(s) : 146
    o~°Passion HELL
    le Mar 30 Juil 2013 - 22:18
    Merci beaucoup


    ....
    FémininAge : 18Message(s) : 97

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Argy
    le Jeu 1 Aoû 2013 - 8:48
    Merci ! ^^
    Contenu sponsorisé
    Aujourd'hui à 14:07

      La date/heure actuelle est Mar 27 Sep 2016 - 14:07