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.


    QEEL en accordéon horizontal (CSS seulement)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mer 13 Juin 2012 - 11:06

    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 Jeu 28 Mar 2013 - 16:09, édité 1 fois



    avatar
    theendy
    MasculinAge : 27Messages : 2

    le Lun 15 Avr 2013 - 22:10

    peut-on avoir un accordéon sur le PA et un autre en Qeel??
    avatar
    AllianceShinobi
    MasculinAge : 24Messages : 71

    le Mar 23 Avr 2013 - 17:04

    merci
    avatar
    LightGlace
    FémininAge : 24Messages : 43

    le Jeu 25 Avr 2013 - 17:14

    c'est ce que je cherchais, je vais le tester de suite
    avatar
    Stanislava
    FémininAge : 22Messages : 102

    le Sam 27 Avr 2013 - 11:41

    Merci beaucoup pour ce partage :3



    avatar
    Capouccino
    FémininAge : 19Messages : 165

    le Mar 30 Avr 2013 - 20:20

    Merciiii o/



    "Espérer l'inespérable c'est croire en l'impossible."
    avatar
    AllianceShinobi
    MasculinAge : 24Messages : 71

    le Ven 3 Mai 2013 - 3:37

    salut pouvez vous me dire ou coller le code svp ? Je veut m'en servir comme QEEL, mais je sais pas l"inséré dans quel template? Merci beaucoup en espérant avoir un réponse assez vite :ggg1:
    avatar
    CaféOlé
    MasculinAge : 28Messages : 349

    le Mar 14 Mai 2013 - 22:51

    merci Sparrow :)




    avatar
    Pava
    FémininAge : 82Messages : 62

    le Dim 26 Mai 2013 - 20:04

    Merci beaucoup ! ^^
    avatar
    Liaminah
    FémininAge : 24Messages : 28

    le Dim 26 Mai 2013 - 21:20

    Merci !
    avatar
    Mlle Eléa
    FémininAge : 25Messages : 5

    le Ven 31 Mai 2013 - 20:23

    Merci
    avatar
    Doctor Who
    MasculinAge : 24Messages : 160

    le Dim 9 Juin 2013 - 20:07

    Merci du partage :)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Jagan
    MasculinAge : 32Messages : 25

    le Dim 9 Juin 2013 - 22:55

    merci
    avatar
    Apokalip'z
    MasculinAge : 24Messages : 290

    le Mer 12 Juin 2013 - 17:20

    merci de partager ton savoir Captain Very Happy



    avatar
    Morry
    FémininAge : 33Messages : 28

    le Lun 1 Juil 2013 - 12:57

    Merci ! Very Happy 



    avatar
    Runendoniel
    MasculinAge : 31Messages : 26

    le Lun 15 Juil 2013 - 10:21

    Merci bcp



    avatar
    Enoria
    MasculinAge : 21Messages : 9

    le Lun 15 Juil 2013 - 11:26

    Merci !
    avatar
    Senshine
    FémininMessages : 82

    le Jeu 18 Juil 2013 - 23:52

    Merci beaucoup ! ♥
    avatar
    mely28
    FémininAge : 18Messages : 23

    le Dim 21 Juil 2013 - 15:04

    Merci =)
    avatar
    Choko
    FémininAge : 17Messages : 61

    le Dim 21 Juil 2013 - 19:15

    Merci :3
    avatar
    Ekhö
    FémininAge : 21Messages : 9

    le Lun 22 Juil 2013 - 11:14

    Merci Very Happy
    avatar
    Azuriel
    FémininAge : 22Messages : 129

    le Mar 23 Juil 2013 - 5:25

    Je vais tester, merci !
    avatar
    Mugiwara no Luffy
    MasculinAge : 23Messages : 108

    le Mar 23 Juil 2013 - 18:20

    Merci du partage encore une fois ! =)




    Who in the blue hell are you ?!
    avatar
    Amaluna
    FémininAge : 26Messages : 103

    le Mar 23 Juil 2013 - 18:27

    :) Je veux m'en servir pour autre chose que la PA. mais je crédite tout de même NeverUtopia !
    avatar
    memoriam
    FémininAge : 25Messages : 71

    le Jeu 25 Juil 2013 - 1:36

    Merciii!
    avatar
    Ausana
    FémininAge : 26Messages : 14

    le Mar 30 Juil 2013 - 16:54

    Merci =)
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Juil 2017 - 6:31