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

    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) : 98
    Lou'
    le Mar 6 Déc 2011 - 18:59
    Par curiosité :)
    Merci d'avance :hug2:
    MasculinAge : 20Message(s) : 105
    Shiryuu
    le Mer 7 Déc 2011 - 1:10
    Merci bien ! =D Ça peut être vachement utile !!




    [img][/img]

    MasculinAge : 22Message(s) : 273
    Stronger
    le Mer 7 Déc 2011 - 4:34
    Merci


    FémininAge : 19Message(s) : 11
    Lauriane
    le Mer 7 Déc 2011 - 12:37
    Merci ! Je cherchais ça depuis longtemps *w*
    FémininAge : 27Message(s) : 52
    Frangy
    le Mer 7 Déc 2011 - 13:17
    Very Happy Merci
    MasculinAge : 32Message(s) : 33
    DDril
    le Jeu 8 Déc 2011 - 9:51
    Merci bien !
    FémininAge : 20Message(s) : 53
    Meranii
    le Jeu 8 Déc 2011 - 10:39
      Merci beaucoup pour ce tutoriel ^^


    MasculinAge : 26Message(s) : 12
    iMCBz
    le Jeu 8 Déc 2011 - 17:16
    Merci :)
    MasculinAge : 18Message(s) : 39
    Faxaw
    le Jeu 8 Déc 2011 - 17:33
    J'ai un problème, il y a juste le texte qui s'affiche, pourtant j'ai enlevé et tout remis une dizaine de fois sans rien toucher D:
    MasculinAge : 31Message(s) : 31654

    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 Jeu 8 Déc 2011 - 20:04
    Tu as bien affiché aussi le css dans la feuille de css du forum ?


    MasculinAge : 17Message(s) : 16
    Kelogo
    le Jeu 8 Déc 2011 - 20:54
    Merci =D


    MasculinAge : 24Message(s) : 13
    ken61
    le Ven 9 Déc 2011 - 20:30
    Merci Very Happy
    MasculinAge : 18Message(s) : 119
    Louxx
    le Sam 10 Déc 2011 - 19:25
    Un truc simple et utile ! Merci beaucoup !!
    FémininAge : 24Message(s) : 63
    Cissy
    le Lun 12 Déc 2011 - 19:45
    Merci Wink Par contre je me demandais si il pouvait s'utiliser à l'intérieur de messages? (pour faire une fiche de présentation par exemple)
    MasculinAge : 31Message(s) : 31654

    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 13 Déc 2011 - 0:42
    Oui bien sûr^^ C'est d'ailleurs dans un message sur le code de démo Wink Il faut juste adapter les tailles au besoin, mais c'est faisable oui.


    FémininAge : 19Message(s) : 113
    Lauriale
    le Mar 13 Déc 2011 - 19:36
    Merci beaucoup ! C'est super que le code soit sans Javascript !
    FémininAge : 18Message(s) : 26
    Riss
    le Mer 14 Déc 2011 - 14:27
    Merchiii :3
    FémininAge : 24Message(s) : 67
    Amera
    le Mer 14 Déc 2011 - 21:10
    Super, merci !
    FémininAge : 28Message(s) : 103
    TUC
    le Jeu 15 Déc 2011 - 12:26
    Merci :)


    FémininAge : 17Message(s) : 46
    wolopi
    le Jeu 15 Déc 2011 - 20:27
    Merci ! Very Happy
    FémininAge : 24Message(s) : 63
    Cissy
    le Ven 16 Déc 2011 - 2:26
    Par contre j'aurais une petite question au sujet du code, :s J'ai réussi à le placer sur mon forum, à changer les couleurs, etc, mais le problème est que dés que je clique sur un des onglets pour faire changer le cadre, un bond de quelques centimètres plus bas se produit à chaque fois ! :O Je ne sais pas si je me fait bien comprendre, désolée ^^" Y-a-t-il un moyen pour éviter que la page ne descende pas à chaque fois que l'on clique sur un des liens onglets ? Merci d'avance de m'aider >o<
    FémininAge : 21Message(s) : 32
    echoo.
    le Ven 16 Déc 2011 - 23:25
    merci (:
    FémininAge : 21Message(s) : 91
    Crazy-GuirL
    le Sam 17 Déc 2011 - 16:05
    Bonjour,
    Je me demandais si ce type d'onglet fonctionnait, mais par exemple avec une image, par exemple comme sur ce fo' là http://betweentheline.forumtwilight.com/ pour le staff =)
    MasculinAge : 22Message(s) : 7
    CandyNeko
    le Sam 17 Déc 2011 - 16:25
    Merci
    Age : 20Message(s) : 17
    sanara
    le Sam 17 Déc 2011 - 16:59
    I want see ^^
    Contenu sponsorisé
    Aujourd'hui à 18:57

      La date/heure actuelle est Jeu 29 Sep 2016 - 18:57