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 accordéon horizonal [en CSS seulement !]

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 7 Oct - 11:28

    Rappel du premier message :

    Qu'est-ce que c'est ?


    Bonjour à tous !

    Ayant à peu près compris comment élaborer des blocs en accordéons pour vos PA (qui d'ailleurs peuvent servir aussi pour vos QEEL !! ^^) je vous propose le code. Ce n'est que du HTML/CSS ! Utilisant du CSS3 évidemment, aujourd'hui compris par la plupart des navigateurs et heureusement.
    Il est possible que ce code soit modifié/corrigé au fil du temps et de mon propre apprentissage. Le code est entièrement ma création (dans le sens où je ne me suis aidé de rien et où je suis parti de rien pour l'écrire, évidemment, sinon il contient les mêmes termes qu'ailleurs Razz) donc je vous demande de bien laisser le crédit se situant en dessous !! C'est ma seule exigence ^^

    Voici tout d'abord ce que ça donne, sur l'un de mes forums test (donc ne faites pas attention au design qui change selon les commandes que j'effectue ^^ :


    Plutôt sympa non ? Ca peut vous permettre de mettre vos partenaires/top sites, les infos du QEEL dans chaque parties, votre staff ou votre contexte dans la PA... bref, y'a de quoi remplir, mais pour ça je vous laisse faire !

    Sachez que vous pouvez modifier :
    - les couleurs/images de fond librement, les couleurs/images peuvent être différentes pour chaque onglet
    - la couleur de fond du contenu (ici le cadre blanc) et la couleur du texte.
    - la taille... mais attention tout de même car la modification de la taille ou le retrait d'un onglet peuvent décaler un peu le tout, les largeurs sont pour certaines à adapter un peu, rien de complexe cependant, contentez vous d'ajouter ou de retirer des pixels dans l'info "width" (=largeur).
    - ... et évidemment remplir l'intérieur comme bon vous semble, vous pouvez y afficher des tableaux, des images, des liens, ce que vous voulez. Je déconseille simplement d'utiliser la balise "marquee" pour le défilement, même si je pense qu'elle serait bien affichée, elle est parfois mal interprétée... mais c'est vous qui voyez Very Happy.

    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 -


    Il faut poster un message à la suite du topic pour voir le contenu de ce cadre, et donc le code.

    - Code CSS -


    Il faut poster un message à la suite du topic pour voir le contenu de ce cadre, et donc le code.


    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 - 21:37, édité 2 fois



    Linéa
    FémininAge : 22Messages : 14

    le Jeu 8 Oct - 7:52

    Thanks !
    avatar
    Shanoa
    FémininAge : 19Messages : 64

    le Jeu 29 Oct - 17:07

    belle astuce merci
    avatar
    LouetRinkin
    MasculinAge : 27Messages : 62

    le Ven 6 Nov - 14:45

    Merci.
    avatar
    suley
    MasculinAge : 21Messages : 13

    le Jeu 10 Déc - 14:25

    Merci :)
    avatar
    Youlia
    FémininAge : 24Messages : 28

    le Mar 15 Déc - 15:21

    Merci beaucoup pour le partage, je cherchais cet effet désespérément o:
    avatar
    P'tit loup
    MasculinAge : 35Messages : 436

    le Sam 26 Déc - 15:42

    Merci ^^



    avatar
    Guillamo
    MasculinAge : 20Messages : 13

    le Mar 29 Déc - 0:58

    Curieux de voir :)
    avatar
    Ju'd'pom
    FémininAge : 18Messages : 2

    le Mer 30 Déc - 16:25

    Merci pour le partage, elle est magnifique !
    avatar
    Myosotis
    FémininAge : 17Messages : 94

    le Ven 1 Jan - 14:45

    Merci !
    avatar
    BesidetheCrocodile
    FémininAge : 22Messages : 38

    le Lun 11 Jan - 15:53

    C'est un code super original Very Happy Merci !
    avatar
    Acynn
    FémininAge : 23Messages : 9

    le Mar 12 Jan - 15:19

    Merci :3
    avatar
    Dark Fairy
    FémininAge : 20Messages : 218

    le Mar 2 Fév - 8:49

    Merci!
    avatar
    Pau
    FémininAge : 27Messages : 37

    le Ven 12 Fév - 10:56

    super merci!
    avatar
    Apolarione
    MasculinAge : 18Messages : 5

    le Sam 13 Fév - 17:30

    Merci beaucoup !
    avatar
    erfs
    MasculinAge : 20Messages : 3

    le Mar 16 Fév - 19:13

    Merci pour ce partage
    avatar
    Givrix
    MasculinAge : 20Messages : 203

    le Jeu 5 Mai - 12:38

    C'est de toute beauuté, merci !



    avatar
    Junior.
    FémininAge : 20Messages : 78

    le Dim 15 Mai - 13:46

    Merci ! Very Happy
    avatar
    Flavien1309
    MasculinAge : 24Messages : 39

    le Jeu 2 Juin - 22:27

    merci :)
    avatar
    dean winchester
    MasculinAge : 23Messages : 85

    le Dim 17 Juil - 16:01

    merci
    avatar
    .Lucifer.
    MasculinAge : 44Messages : 167

    le Mer 3 Aoû - 10:42

    Merci beaucoup ! Wink



    avatar
    Nemesis
    FémininAge : 26Messages : 214

    le Mer 17 Aoû - 3:37

    ce dont j'avais besoin ! merci ! **
    avatar
    Nymeria.
    FémininAge : 22Messages : 297

    le Sam 19 Nov - 3:46

    Encore merci *w*
    avatar
    Loo
    FémininAge : 23Messages : 22

    le Mar 7 Mar - 13:44

    Merci :)
    avatar
    Mashi Hozuki
    MasculinAge : 20Messages : 28

    le Mer 8 Mar - 10:35

    merci!
    avatar
    ArgelTown
    MasculinAge : 18Messages : 23

    le Lun 13 Mar - 12:17

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 15 Déc - 16:09