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
    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31713

    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



    Pomme d'amour
    FémininAge : 23Messages : 13

    le Sam 17 Déc 2011 - 21:43

    Moi je veux voir!
    killer999
    MasculinAge : 25Messages : 116

    le Sam 17 Déc 2011 - 23:29

    Merci beaucoup!
    Ayu-chan
    FémininAge : 22Messages : 4

    le Mar 20 Déc 2011 - 20:27

    Merci :)
    Sweet Pea
    FémininAge : 25Messages : 14

    le Mar 20 Déc 2011 - 21:04

    Merci beaucoup sparrow
    celianvdb
    MasculinAge : 16Messages : 28

    le Mer 21 Déc 2011 - 17:00

    merci pour ce partage
    Lady Doll
    FémininAge : 27Messages : 101

    le Jeu 22 Déc 2011 - 13:01

    Merci =)
    Kahlan
    FémininAge : 30Messages : 367

    le Jeu 22 Déc 2011 - 22:12

    Merci beaucoup =)
    ExceedGraphic
    MasculinAge : 22Messages : 57

    le Ven 23 Déc 2011 - 17:42

    Merci beaucoup !



    Bunny Lune
    FémininAge : 27Messages : 134

    le Ven 23 Déc 2011 - 20:12

    Ah merci beaucoup avec l'autre code j'ai trop eut de problème. Merci beaucoup
    Loris74
    MasculinAge : 26Messages : 11

    le Sam 24 Déc 2011 - 19:00

    Thanks
    Seth
    MasculinAge : 19Messages : 2012

    le Sam 24 Déc 2011 - 23:58

    merci, enfin un code sans javascript !



      Nal sanghanda haejohgo
      Dodaece eodiro ddeonangeoya nareul beorigo
      Jabeun nae du songgajido uri yaksokggajido
      Na beorigo ggabeorigo eoddeohge ddana
      f.t island ~ i hope

    http://eeteuk.labrute.fr
    Nath'
    MasculinAge : 22Messages : 5

    le Lun 26 Déc 2011 - 17:09

    Merci (:
    Pepsi.cola
    FémininAge : 23Messages : 9

    le Lun 26 Déc 2011 - 17:45

    Merci :3
    zébra
    FémininAge : 41Messages : 5

    le Jeu 29 Déc 2011 - 21:10

    purée j'en ai pour la nuit a tout découvrir sur ce superbe forum
    Inconnue
    MasculinAge : 32Messages : 29

    le Sam 31 Déc 2011 - 10:53

    Merci!



    Dydy
    FémininAge : 26Messages : 472

    le Mar 3 Jan 2012 - 20:29

    thanks!



    Perle
    FémininAge : 19Messages : 30

    le Mer 4 Jan 2012 - 18:56

    Merci d'avance :)
    Nexus|Coyote
    MasculinAge : 20Messages : 42

    le Mer 4 Jan 2012 - 22:28

    Yeah merci. C'est bon ça



    titou9322
    MasculinAge : 20Messages : 158

    le Jeu 5 Jan 2012 - 19:27

    merci
    PadForever
    MasculinAge : 24Messages : 1

    le Jeu 5 Jan 2012 - 19:35

    Merci l'ami
    Eil'liathan Tyan'Lirulin
    FémininAge : 25Messages : 305

    le Ven 6 Jan 2012 - 23:50

    Aller, je vais me lancer, ça fait des jours et des jours que je m'arrache les cheveux avec le js, limite si j'en dormais plus la nuit (non j'suis pas une obsédée, c'est pas vrai @.@) Si ça fonctionne, j'ai mon nouveau dieu !

    Edit : dans quelle église dois _ je aller ?? Ca marche !!!! J'y croyais plus *fond en larmes* Merci !!!
    Byakuya Kuonki
    MasculinAge : 17Messages : 107

    le Sam 7 Jan 2012 - 14:46

    Je vois pas moi. Sad
    MissBelphegor
    FémininAge : 20Messages : 6

    le Sam 7 Jan 2012 - 14:48

    I want to see ♥ Et merci beaucoup d'avance ♥
    Aureeliie
    FémininAge : 17Messages : 90

    le Sam 7 Jan 2012 - 14:52

    Merci beaucoup du partage 8D
    Ocean Lounge.
    FémininAge : 22Messages : 101

    le Sam 7 Jan 2012 - 19:19

    Merci du partage ^^
    Contenu sponsorisé

    Aujourd'hui à 15:08


      La date/heure actuelle est Mar 6 Déc 2016 - 15:08