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.


    PA en onglets [CSS3, sans javascript]

    Partagez
    MasculinAge : 31Message(s) : 31698

    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 Dim 9 Oct 2011 - 17:47
    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 Mer 13 Juin 2012 - 23:39, édité 2 fois


    FémininAge : 26Message(s) : 20
    Maliciq
    le Sam 22 Fév 2014 - 12:36
    Merci pour ce code :3
    FémininAge : 23Message(s) : 89
    Sakira
    le Sam 22 Fév 2014 - 15:09
    Merci =3


    Bientôt peut être o/
    Dépendra de ma motiv'
    FémininAge : 20Message(s) : 67

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Azaral
    le Mar 25 Fév 2014 - 18:08
    merci, c'est peut être ce que je cherche o_o
    FémininAge : 23Message(s) : 277

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    2/10  (2/10)
    Aelita
    le Jeu 27 Fév 2014 - 20:51
    Arigatô ^^
    MasculinAge : 23Message(s) : 34
    jotherrien13
    le Ven 28 Fév 2014 - 10:45
    Marchie
    FémininAge : 16Message(s) : 78
    Petit Harfang
    le Jeu 13 Mar 2014 - 13:52
    Merci Beaucoup :3
    FémininAge : 17Message(s) : 11
    Loca63
    le Jeu 13 Mar 2014 - 22:52
    Très pratique ! Merci beaucoup ^^
    MasculinAge : 21Message(s) : 63
    Spike
    le Dim 16 Mar 2014 - 22:41
    Merci beaucoup x)
    FémininAge : 31Message(s) : 120
    Asaliah
    le Lun 17 Mar 2014 - 12:00
    Merci :)


    FémininAge : 21Message(s) : 28
    .erin
    le Jeu 20 Mar 2014 - 15:53
    merci
    FémininAge : 22Message(s) : 48
    arvalis
    le Sam 22 Mar 2014 - 11:35
    bonjour bonjour !
    merci pour ce code, tu me sauve bien la mise =)
    FémininAge : 19Message(s) : 69
    Gedomaru
    le Sam 22 Mar 2014 - 12:12
    C'est très utile! =D
    Merci!
    FémininAge : 22Message(s) : 28
    Suika
    le Dim 23 Mar 2014 - 16:21
    merci du partage ^^
    MasculinAge : 24Message(s) : 71
    Akito
    le Lun 31 Mar 2014 - 22:11
    merci!
    FémininAge : 24Message(s) : 4

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    EiffelRocket
    le Ven 4 Avr 2014 - 15:43
    Ohhh, merci beaucoup pour ce partage.
    Beaucoup moins casse tête en effet et bien moins long a installer.
    Merci milles fois!

    P.s; Juste une chose, après avoir tester, mes onglets apparaissent une sur l'autre, comment puis-je les faire basculer pour qu'ils arrivent un à côté de l'autre (comme dans l'exemple, comme supposer). J'ai essayer avec
    . mais ça ne semble rien donner.
    MasculinAge : 16Message(s) : 29
    Battosai
    le Sam 5 Avr 2014 - 14:58
    Merci
    FémininAge : 19Message(s) : 93
    ColorTime'Less
    le Lun 14 Avr 2014 - 11:59
    J'aime énormément cette page d’accueil, alors merci beaucoup pour le partage :)
    FémininAge : 20Message(s) : 154

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    3/10  (3/10)
    Frosty Blue
    le Mer 23 Avr 2014 - 16:53
    Merci ^^
    FémininAge : 16Message(s) : 64
    Faucon
    le Mar 29 Avr 2014 - 21:07
    Merci beaucoup =)
    FémininAge : 22Message(s) : 4939

    Les Guildes
    Guilde des Conteurs:
    8/10  (8/10)
    Guilde des Illusionnistes:
    4/10  (4/10)
    Guilde des Architectes:
    12/20  (12/20)
    A-Lice
    le Ven 2 Mai 2014 - 23:11
    Merci
    FémininAge : 23Message(s) : 29
    lilissa
    le Lun 5 Mai 2014 - 22:52
    merci beaucoup ♥
    FémininAge : 16Message(s) : 293
    Lisou
    le Sam 10 Mai 2014 - 8:30
    J'm'étais trompée de PA :meurs: je devais prendre celle ci xD
    FémininAge : 21Message(s) : 428

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    3/10  (3/10)
    Sauney
    le Dim 11 Mai 2014 - 16:49
    LE CSS c'est le bien contrairement au JS, enfin je dis ça mais c'est parce que je suis nulle en javascript...
    Merci Sparrow !


    MasculinAge : 21Message(s) : 975
    Ren haring
    le Dim 11 Mai 2014 - 23:26
    Merci beaucoup pour le partage. C est vraiment fantastique
    MasculinAge : 39Message(s) : 273

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Deed01
    le Jeu 29 Mai 2014 - 5:32
    Merci Very Happy
    Contenu sponsorisé
    Aujourd'hui à 10:40

      La date/heure actuelle est Sam 3 Déc 2016 - 10:40