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 : 31721

    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



    dangerous mind.
    FémininAge : 21Messages : 16

    le Jeu 20 Oct 2011 - 23:06

      Merci beaucoup, tu me sauves la vie XD
    K'Aya
    FémininAge : 17Messages : 427

    le Ven 21 Oct 2011 - 16:53

    A moi de voir!

    Edit1: Je me suis fait une page d'accueil pour mon forum mais comme tu voies j'ai un petit problème....
    ICI:
    http://wintry-world.forumgratuit.org/#accueil2
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Ven 21 Oct 2011 - 17:41

    Si c'est le texte dépassant de l'onglet il te suffit d'augmenter la largeur des onglets^^ (dans le CSS), ou alors de réduire la taille de la police, au choix (toujours dans le css^^).



    Kimi-Shi
    FémininAge : 19Messages : 11

    le Ven 21 Oct 2011 - 23:22

    Merci~!
    Lolo
    MasculinAge : 26Messages : 17

    le Sam 22 Oct 2011 - 15:01

    Tuto, vient à moi (a) xD
    K'Aya
    FémininAge : 17Messages : 427

    le Sam 22 Oct 2011 - 23:17

    Ok merci, ce n'était pas vraiment çà mon problème, c'est que quand on clique sur Actualité on n'a pas l'onglet actualité mais toujours l'onglet bienvenue comme pour tous les onglets. (La page reste fixe sur le Bienvenue)
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Dim 23 Oct 2011 - 0:04

    Ah, j'avais pas fait attention à ça du coup, bah j'ai vu que t'avais changé et que t'avais opté pour l'accordéon vertical ^^



    Nero Brigh
    MasculinAge : 32Messages : 85

    le Dim 23 Oct 2011 - 18:35

    Merci :arrh:
    K'Aya
    FémininAge : 17Messages : 427

    le Dim 23 Oct 2011 - 19:11

    Oui x)
    Merci aussi pour l'autre tuto :)
    Vador
    MasculinAge : 16Messages : 63

    le Lun 24 Oct 2011 - 17:02

    merci
    Shy
    MasculinAge : 22Messages : 126

    le Mar 25 Oct 2011 - 5:18

    veux voir



    Snowdreamer
    FémininAge : 17Messages : 17

    le Mer 26 Oct 2011 - 21:45

    Merci ! ^^
    Cathy Cration
    FémininAge : 37Messages : 8

    le Jeu 27 Oct 2011 - 3:01

    Merci je veux voir lol
    Depp
    FémininAge : 25Messages : 297

    le Jeu 27 Oct 2011 - 17:57

    Merci pour ce tuto !

    *s'incline devant le maître*



    Gilou
    FémininAge : 26Messages : 6

    le Jeu 27 Oct 2011 - 18:20

    C'est exactement ce que je cherchais ! Merci beaucoup, je sens que ça va m'aider =)
    Estelle
    FémininAge : 18Messages : 9

    le Dim 30 Oct 2011 - 13:47

    Mercii ^^
    Fusions
    MasculinAge : 20Messages : 21

    le Dim 30 Oct 2011 - 17:46

    Veut voir :p
    Narialys
    FémininAge : 20Messages : 29

    le Lun 31 Oct 2011 - 15:26

    Merci du partage \o/



    Hestia
    FémininAge : 25Messages : 54

    le Mar 1 Nov 2011 - 10:07

      Merci !
    Elimona
    FémininAge : 21Messages : 892

    le Mar 1 Nov 2011 - 14:44

    Merci pour l'astuce ^^
    PaSs
    FémininAge : 19Messages : 10

    le Mer 2 Nov 2011 - 7:19

    Merci c'est super utile Wink



    #_NazuKi
    MasculinAge : 21Messages : 3

    le Mer 2 Nov 2011 - 17:43

    Merci !! Je vais essayé ce code ! Wink
    Drysfer
    MasculinAge : 27Messages : 71

    le Sam 5 Nov 2011 - 16:28

    Merci sa va m'être utile !



    Hebihime
    FémininMessages : 201

    le Ven 18 Nov 2011 - 20:48

    Merci du partage :)
    Oxalyde
    FémininAge : 21Messages : 68

    le Dim 20 Nov 2011 - 15:47

    Merci beaucoup ! Les pages d’accueil présentées de cette façon sont très originale : D



    "Nous travestissons nos faiblesses en force. Nos frêles corps sont nos armures"
    Contenu sponsorisé

    Aujourd'hui à 0:06


      La date/heure actuelle est Sam 10 Déc 2016 - 0:06