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.


    PA en onglets [CSS3, sans javascript]

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31717

    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



    Taktiik
    MasculinAge : 22Messages : 2291

    le Lun 21 Nov 2011 - 12:41

    En voilà un qui m’intéresse et qui pique ma curiosité Razz

    Merci Cap'tain ;D

    Misaho Kiha
    FémininAge : 25Messages : 55

    le Lun 21 Nov 2011 - 14:36

    j'aimerais voir :3
    Un grand merci! *.*
    Plopounet
    MasculinAge : 21Messages : 56

    le Lun 21 Nov 2011 - 16:42

    Merci,

    Comment mettre le Qui est en ligne dans l'un de ces onglets ?
    Okhmhaka
    FémininAge : 31Messages : 31717

    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



    Keora
    FémininAge : 18Messages : 27

    le Mar 22 Nov 2011 - 17:17

    Merci du partage!
    Plopounet
    MasculinAge : 21Messages : 56

    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 : https://i47.servimg.com/u/f47/14/87/76/27/sans_t34.jpg
    Michiyo
    FémininAge : 25Messages : 7399

    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 ^^
    Plopounet
    MasculinAge : 21Messages : 56

    le Mar 22 Nov 2011 - 21:57

    Excusez-moi, mais avez vous un tutoriel pour les angles mais qui ne touche qu'à ce tableau ?
    md1991
    FémininAge : 25Messages : 36

    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 !



    Okhmhaka
    FémininAge : 31Messages : 31717

    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



    Japan S
    MasculinAge : 26Messages : 106

    le Ven 25 Nov 2011 - 18:06

    Je veux voir *-*



    Arrow
    Zouzou
    FémininAge : 17Messages : 19

    le Sam 26 Nov 2011 - 9:55

    Trooop *-*
    Ravener
    FémininAge : 25Messages : 193

    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



    Okhmhaka
    FémininAge : 31Messages : 31717

    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^^



    Marie
    FémininAge : 27Messages : 1911

    le Mer 30 Nov 2011 - 1:42

    J'aimerais voir svp! Merci pour ce tuto capitaine




    Kit Par Sébastien. Merci beaucoup!
    Edel
    FémininAge : 23Messages : 370

    le Mer 30 Nov 2011 - 6:02

    Merci beaucoup pour ce fabuleux tuto !!!



    Mon métier et mon art, c'est vivre - Montaigne
    Monkey D Luffy
    MasculinAge : 23Messages : 361

    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. |
    Kanu
    FémininAge : 26Messages : 55

    le Jeu 1 Déc 2011 - 18:22


    Je veux voir ! Et merci pour ce tuto *o*
    GLADIATOR
    MasculinAge : 22Messages : 29

    le Ven 2 Déc 2011 - 14:48

    merci
    Sacha Chan
    FémininAge : 18Messages : 21

    le Ven 2 Déc 2011 - 17:43

    Ah, je voudrais bien faire ce tuto !
    Merci (:
    Poppy
    FémininAge : 20Messages : 5

    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
    Sacha Chan
    FémininAge : 18Messages : 21

    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 *-*
    Minow
    FémininAge : 16Messages : 14

    le Sam 3 Déc 2011 - 9:21

    Sympa l'effet, j'essaie !
    Kyle Kaminari
    MasculinAge : 21Messages : 56

    le Lun 5 Déc 2011 - 1:33

    merci ^^
    Milkiniz
    FémininAge : 23Messages : 69

    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 à 5:00


      La date/heure actuelle est Jeu 8 Déc 2016 - 5:00