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) : 31644

    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


    MasculinAge : 21Message(s) : 2285

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Taktiik
    le Lun 21 Nov 2011 - 12:41
    En voilà un qui m’intéresse et qui pique ma curiosité Razz

    Merci Cap'tain ;D
    FémininAge : 25Message(s) : 55
    Misaho Kiha
    le Lun 21 Nov 2011 - 14:36
    j'aimerais voir :3
    Un grand merci! *.*
    MasculinAge : 21Message(s) : 56
    Plopounet
    le Lun 21 Nov 2011 - 16:42
    Merci,

    Comment mettre le Qui est en ligne dans l'un de ces onglets ?
    MasculinAge : 31Message(s) : 31644

    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 Lun 21 Nov 2011 - 17:09
    Salut^^

    Il ne s'agit pas de le mettre dans l'un, mais de mettre le QEEL sous la forme de ce tabeau à onglet^^ Pour cela il faut connaitre un peu les templates et placer le code dans le template de page d'accueil, dans la zone du QEEL (en virant le code de base) puis placer les variables (présentes entre accolades : {...}) dans la zone de texte du code Wink


    FémininAge : 18Message(s) : 27
    Keora
    le Mar 22 Nov 2011 - 17:17
    Merci du partage!
    MasculinAge : 21Message(s) : 56
    Plopounet
    le Mar 22 Nov 2011 - 21:22
    Merci beaucoup, juste deux choses :

    Peut-on arrondir le cadre ?

    Comment monter le tableau pour le mettre ainsi plus près du forum : http://i47.servimg.com/u/f47/14/87/76/27/sans_t34.jpg
    FémininAge : 24Message(s) : 7349
    Michiyo
    le Mar 22 Nov 2011 - 21:39
    dans ton code html il faut enlever des
    Code:
    <br/>
    qui servent a sauter des ligne au tout début
    pour arrondir le cadre c'est dans le css en rajoutant un border-radius ^^


    Avatar par Eiv' Merci beaucoup ♥
    MasculinAge : 21Message(s) : 56
    Plopounet
    le Mar 22 Nov 2011 - 21:57
    Excusez-moi, mais avez vous un tutoriel pour les angles mais qui ne touche qu'à ce tableau ?
    FémininAge : 25Message(s) : 36
    md1991
    le Mer 23 Nov 2011 - 0:55
    Merci j'ai hâte de tester ça =)

    J'ai un petit soucis, ça donne des onglets verticaux.

    http://testforumd.creerforums.com/

    Est ce moi qui est raté quelque chose ? ou peut être mon navigateur ? (c'est Opera 11.52)

    merci pour la future aide ^.^

    Je viens de savoir où été le problème alors pour ceux qui l'on aussi voici ce que j'ai changé :

    Code:
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: inline-block;

    Je confirme ce qu'on dit les autres : super !


    MasculinAge : 31Message(s) : 31644

    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 23 Nov 2011 - 12:26
    Oui si tu changes le "inline-block" en "block" ça met les onglets les uns en dessous des autres Wink


    MasculinAge : 26Message(s) : 106
    Japan S
    le Ven 25 Nov 2011 - 18:06
    Je veux voir *-*


    Arrow
    FémininAge : 17Message(s) : 19
    Zouzou
    le Sam 26 Nov 2011 - 9:55
    Trooop *-*
    FémininAge : 25Message(s) : 193
    Ravener
    le Lun 28 Nov 2011 - 22:15
    Merci merci merci ! Je test illico !!

    EDIT : Est-ce que tu pourrais expliquer comment installer le HTML dans les templates pour le QEEL s'il-te-plait T__T ? Je comprends pas du tout comment faire malheureusement DX

    Je sais qu'il faut le placer quelque part dans le template index_body mais j'arrive pas à voir où ni comment x-x

    Perso je voudrais avoir un onglet « Qui est en ligne », un autre « Les Groupes » et un autre « Statistiques » mais j'ose pas déplacer quoi que ce soit de peur de tout foutre le codage en l'air x-x


    MasculinAge : 31Message(s) : 31644

    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 Mar 29 Nov 2011 - 14:05
    Dans le templates tu trouveras le code du QEEL, il sera mentionné vers la fin entre deux annotations de ce type :

    Code:
    <!-- BEGIN WHO IS ONLINE -->

    <!-- END WHO IS ONLINE -->

    C'est peut-être pas le terme exact car j'ai pas regardé mais en gros c'est l'idée^^ Tout ce qu'il y a à l'intérieur sert à afficher le QEEL et ce qui est entre accolade affiche des informations. C'est donc ces éléments qu'il te faudra placer dans le code.
    Pour modifier, je te conseille de le faire petit peu par petit peu, en validant et vérifiant à chaque fois que ça n'a rien bousculé dans le code de base. Ainsi, si quelque chose foire, tu pourras savoir ce que c'est et l'enlever ou remettre le code de base, alors que si tu modifies 10 trucs différents avant de valider et que ça fait tout planter tu sauras pas d'où ça vient^^


    FémininAge : 27Message(s) : 1911
    Marie
    le Mer 30 Nov 2011 - 1:42
    J'aimerais voir svp! Merci pour ce tuto capitaine



    Kit Par Sébastien. Merci beaucoup!
    FémininAge : 23Message(s) : 370

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Edel
    le Mer 30 Nov 2011 - 6:02
    Merci beaucoup pour ce fabuleux tuto !!!


    Mon métier et mon art, c'est vivre - Montaigne
    MasculinAge : 23Message(s) : 361
    Monkey D Luffy
    le Jeu 1 Déc 2011 - 1:14
    Thank you verry much !! (je ne parle pas anglais donc ne rien dire sur les possibles fautes :°) )



    Kit By Lovely ! Merchi !!

    | One Piece. Shin Jidai. |
    FémininAge : 26Message(s) : 55
    Kanu
    le Jeu 1 Déc 2011 - 18:22

    Je veux voir ! Et merci pour ce tuto *o*
    MasculinAge : 22Message(s) : 29
    GLADIATOR
    le Ven 2 Déc 2011 - 14:48
    merci
    FémininAge : 18Message(s) : 21
    Sacha Chan
    le Ven 2 Déc 2011 - 17:43
    Ah, je voudrais bien faire ce tuto !
    Merci (:
    FémininAge : 20Message(s) : 5
    Poppy
    le Ven 2 Déc 2011 - 17:47
    Ca peut être VACHEMENT intéressant comme mise en page pour un forum Very Happy
    Pressée de pouvoir le mettre en place Wink
    FémininAge : 18Message(s) : 21
    Sacha Chan
    le Ven 2 Déc 2011 - 17:54
    Heum.. Est ce que vous savez comment on peut changer la couleur du tableau ? Parce que le bleu ne rend pas très bien *-*
    FémininAge : 16Message(s) : 14
    Minow
    le Sam 3 Déc 2011 - 9:21
    Sympa l'effet, j'essaie !
    MasculinAge : 21Message(s) : 56
    Kyle Kaminari
    le Lun 5 Déc 2011 - 1:33
    merci ^^
    FémininAge : 23Message(s) : 69
    Milkiniz
    le Mar 6 Déc 2011 - 10:00
    Merci pour le code, c'est vrai que c'est plus pratique sans JS x)
    Contenu sponsorisé
    Aujourd'hui à 22:49

      La date/heure actuelle est Dim 25 Sep 2016 - 22:49