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
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Ven 7 Oct 2011 - 13: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 ^^ :

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



    Ariane
    FémininAge : 24Messages : 13

    le Dim 21 Déc 2014 - 14:00

    Merci pour cette belle Page d'acceuil
    Synny
    FémininAge : 15Messages : 55

    le Mar 3 Fév 2015 - 8:53

    Cette PA m'a l'air utile, merci du partage!
    Mr. Shidokaz
    MasculinAge : 20Messages : 162

    le Lun 9 Fév 2015 - 21:59

    Merci beaucoup ! :)
    Agalion
    MasculinAge : 24Messages : 5

    le Mer 25 Fév 2015 - 13:59

    Merci de ce partage Okhmhaka ! Décidément tu as toujours de très bonnes idée , encore merci !
    Mangédéfruiélégumeuh
    MasculinAge : 19Messages : 82

    le Ven 27 Fév 2015 - 21:40

    Merci Very Happy
    Rudein
    FémininAge : 20Messages : 80

    le Sam 28 Fév 2015 - 22:59

    Merci beaucoup !
    DanJack
    FémininAge : 22Messages : 155

    le Lun 16 Mar 2015 - 12:56

    merci =)!
    Pikabouh
    FémininAge : 15Messages : 115

    le Mar 17 Mar 2015 - 16:30

    Merci beaucoup ♥
    Satyrix
    MasculinAge : 19Messages : 18

    le Lun 23 Mar 2015 - 15:24

    @Bae Sung Gi a écrit:Merci :)
    Suika
    FémininAge : 22Messages : 28

    le Jeu 16 Avr 2015 - 10:37

    merci
    Shacoham
    MasculinAge : 23Messages : 82

    le Dim 26 Avr 2015 - 15:50

    Merci :)
    Kraken
    FémininAge : 23Messages : 129

    le Dim 26 Avr 2015 - 19:37

    Merci beaucoup ♥
    Mecat
    FémininAge : 27Messages : 55

    le Mer 29 Avr 2015 - 10:18

    Merci Very Happy



    TiGraou
    MasculinAge : 23Messages : 148

    le Ven 15 Mai 2015 - 12:13

    Merci !!
    Youmu
    FémininAge : 21Messages : 5

    le Sam 16 Mai 2015 - 14:34

    Merci beaucoup ! *-*
    Illusion d'un Rêve
    FémininAge : 15Messages : 32

    le Dim 24 Mai 2015 - 11:49

    Trop belle ♥...MERCI BEAUCOUP !
    Luirio
    MasculinAge : 26Messages : 57

    le Dim 24 Mai 2015 - 15:59

    Merci
    Luirio
    MasculinAge : 26Messages : 57

    le Dim 24 Mai 2015 - 16:16

    J'ai essayé ton code pour mettre du html et ça n'as pas marché.
    Alekk
    MasculinAge : 26Messages : 24

    le Lun 25 Mai 2015 - 13:01

    Merci beaucoup ! :friends:





    Aeronauths' crew member


    Wolf Valley
    FémininAge : 16Messages : 60

    le Lun 25 Mai 2015 - 13:58

    Cool !
    erika02
    FémininAge : 20Messages : 253

    le Jeu 4 Juin 2015 - 13:19

    merci



    Samiki
    FémininAge : 18Messages : 84

    le Sam 25 Juil 2015 - 21:30

    Waaaw, merci !




    Dakeris RPG ♦ Un monde nouveau régi par la peur
    Le forum ouvre ses portes, nous vous attendons nombreux !

    Allèle
    FémininAge : 23Messages : 55

    le Mar 28 Juil 2015 - 11:21

    Merci
    Ayfoth
    MasculinAge : 26Messages : 1216

    le Lun 7 Sep 2015 - 17:45

    Merci cap'tain



    Kelalin
    FémininAge : 24Messages : 1405

    le Lun 7 Sep 2015 - 17:51

    Merci beaucoup pour le partage ! \(>o<)ノ
    Contenu sponsorisé

    Aujourd'hui à 0:08


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