Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31654

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    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


    MasculinAge : 19Message(s) : 48

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    -Hikaru-
    le Lun 2 Juin 2014 - 16:51
    thanks
    FémininAge : 25Message(s) : 18
    Lyly
    le Mar 10 Juin 2014 - 0:06
    Merci beaucoup, j'ai hâte de tester ^^
    FémininAge : 24Message(s) : 79
    Dark Dream
    le Jeu 12 Juin 2014 - 19:48
    Merci beaucoup pour ce partage ♥
    Je le pique ~
    FémininAge : 23Message(s) : 29
    -Dr3ams-
    le Lun 16 Juin 2014 - 22:23
    Merci :)
    FémininAge : 21Message(s) : 57
    Yesterday
    le Mar 24 Juin 2014 - 14:16
    merci! :)
    FémininAge : 18Message(s) : 285

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Siprano
    le Mer 25 Juin 2014 - 10:46
    Merchiiii
    MasculinAge : 19Message(s) : 47
    Alancar
    le Lun 30 Juin 2014 - 16:02
    Merci beaucoup :)
    FémininAge : 27Message(s) : 31
    Neytiri-Navi
    le Mar 1 Juil 2014 - 12:47
    Merci beaucoup Sparrow-Style !


    FémininAge : 18Message(s) : 53
    Lessyen
    le Mer 2 Juil 2014 - 17:04
    Merci beaucoup pour cet PA, elle est géniale, c'est exactement ce que je voulais! Very Happy
    FémininAge : 18Message(s) : 12
    Bim'
    le Mer 2 Juil 2014 - 20:32
    Merci beaucoup o/
    FémininAge : 16Message(s) : 293
    Lisou
    le Jeu 3 Juil 2014 - 14:00
    Merci ♥
    FémininAge : 22Message(s) : 2461

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Ven 4 Juil 2014 - 14:55
    Bouh !


    FémininAge : 22Message(s) : 2461

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    13/20  (13/20)
    Onyx
    le Ven 4 Juil 2014 - 14:56
    Damn, on peut pas éditer? J'voulais dire merci Razz


    FémininAge : 15Message(s) : 48
    Ziara
    le Ven 4 Juil 2014 - 17:39
    C'est hyper beau et moderne en plus ca ne prends pas beaucoup de place ! Bravo et merci pour le partage !
    MasculinAge : 19Message(s) : 10
    Supraz
    le Sam 5 Juil 2014 - 22:26
    Wouaaaaa, c'est trop beau *o* Merci
    MasculinAge : 28Message(s) : 90
    BlackNight
    le Dim 6 Juil 2014 - 4:33
    Merci
    FémininAge : 19Message(s) : 70
    Sépia
    le Lun 7 Juil 2014 - 11:12
    merci
    FémininAge : 19Message(s) : 181
    MsCrazy.E
    le Ven 11 Juil 2014 - 0:07
    Trop beau *-*


    FémininAge : 20Message(s) : 196
    Shuu-Shuu
    le Dim 13 Juil 2014 - 20:37
    merci beaucoup pour ces codes, ça m'aide Wink
    FémininAge : 23Message(s) : 207
    EthanHol
    le Dim 20 Juil 2014 - 16:32
    Merci pour ce partage !


    FémininAge : 23Message(s) : 197
    Stitch56
    le Mer 23 Juil 2014 - 14:02
    Merci beaucoup du partage !
    FémininAge : 20Message(s) : 54
    Toshiki
    le Sam 26 Juil 2014 - 20:22
    merci ♥
    MasculinAge : 23Message(s) : 64
    InkBoy
    le Dim 27 Juil 2014 - 9:48
    Merci pour cette astuce bien utile..


    FémininAge : 16Message(s) : 297

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Merwyn Arehdel
    le Jeu 14 Aoû 2014 - 15:16
    Merci ! o/


    Just want to be yours.
    FémininAge : 24Message(s) : 13
    Mimie valdroff
    le Dim 17 Aoû 2014 - 23:50
    Super malade !
    Contenu sponsorisé
    Aujourd'hui à 15:33

      La date/heure actuelle est Jeu 29 Sep 2016 - 15:33