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 2011 - 13:28

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

    >>> lien apperçu <<<

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



    avatar
    Virg68
    FémininAge : 28Messages : 7

    le Mer 2 Nov 2011 - 14:29

    Merci beaucoup pour ce partage, j'ai toujours chercher à comprendre ce code qui rends plus que bien




    JE SOUTIENS LONDON'S DARK SIDE
    Vous cherchez un forum original ? Avec plusieurs races surnaturelles ? Venez nous rejoindre dans le Londres de Jack l'éventreur, c'est par ici ! • by Lilie
    avatar
    Metamorphe
    FémininAge : 23Messages : 17

    le Sam 5 Nov 2011 - 14:51

    Merci Wink
    avatar
    Drysfer
    MasculinAge : 27Messages : 71

    le Sam 5 Nov 2011 - 16:29

    Merci beaucoup



    avatar
    Pheles
    MasculinAge : 25Messages : 7

    le Sam 5 Nov 2011 - 16:49

    Ouaw... Genial, merci pour le partage.
    avatar
    Bae Sung Gi
    FémininAge : 18Messages : 9

    le Dim 6 Nov 2011 - 14:20

    Merci :)
    avatar
    Roule_Aspara
    MasculinAge : 21Messages : 255

    le Dim 6 Nov 2011 - 16:00

    HOLLY YEAH, j'ai vu ça sur un forum, ça déboite.
    Thanks ^^



    [/center]
    avatar
    Tyraël
    Age : 27Messages : 26

    le Dim 6 Nov 2011 - 19:56

    merci




    Le monde est imparfait, c'est pourquoi il est intéressant d'y vivre
    avatar
    WizzyFree
    MasculinAge : 23Messages : 1994

    le Jeu 10 Nov 2011 - 22:04

    Merci pour le tuto :)



    avatar
    People Are Strange
    FémininAge : 30Messages : 29

    le Ven 11 Nov 2011 - 0:46

    merci :top:
    avatar
    Genesis
    MasculinAge : 26Messages : 31

    le Ven 11 Nov 2011 - 1:46

    Merci :)





    Tu es né poussière et tu redeviendras poussière.
    avatar
    Sangokudufeu
    MasculinAge : 22Messages : 9

    le Lun 5 Mai 2014 - 20:39

    Merci
    avatar
    lilissa
    FémininAge : 23Messages : 30

    le Lun 5 Mai 2014 - 22:44

    merci beaucoup ♥
    avatar
    Cruelly
    FémininAge : 24Messages : 2524

    le Mar 6 Mai 2014 - 21:38

    Merci



    Absente pour le moment. Je reviens bientôt c'est promis :ange:
    avatar
    Etoile Du Phenix
    FémininAge : 14Messages : 14

    le Mar 6 Mai 2014 - 22:27

    ces vraiment trés original *p*
    avatar
    Joshua023
    MasculinAge : 27Messages : 98

    le Mer 7 Mai 2014 - 13:36

    super, merci pour se super code :)



    avatar
    Aya Hanazawa
    FémininAge : 26Messages : 72

    le Mer 7 Mai 2014 - 16:19

    merci
    avatar
    Myu-uu
    FémininAge : 24Messages : 115

    le Ven 9 Mai 2014 - 20:31

    Merciiiii ^^




    avatar
    Ren haring
    MasculinAge : 22Messages : 990

    le Dim 11 Mai 2014 - 23:22

    Fantastique
    avatar
    Mlle Eléa
    FémininAge : 25Messages : 5

    le Mer 14 Mai 2014 - 16:52

    Merci de ton aide
    avatar
    Deed01
    MasculinAge : 39Messages : 275

    le Jeu 15 Mai 2014 - 6:11

    merci Very Happy
    avatar
    Canibal
    FémininAge : 25Messages : 26

    le Jeu 15 Mai 2014 - 15:01

    Merciii Very Happy 
    avatar
    Yser
    FémininAge : 19Messages : 46

    le Lun 19 Mai 2014 - 23:01

    Merchi beaucoup :3
    avatar
    Trenz
    MasculinAge : 14Messages : 44

    le Sam 31 Mai 2014 - 14:34

    Merci beaucoup c'est magnifique !
    Eroik04
    MasculinAge : 19Messages : 22

    le Dim 1 Juin 2014 - 15:32

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Mai 2017 - 22:33