AccueilDernières imagesRechercherS'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)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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 -

    Code:
    <div id="accueil"><div id="page1"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 1</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page2"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 2</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page3"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 3</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page4"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 4</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page5"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 5</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div>
    </div>
    <!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres ;) et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
    <span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>

    - Code CSS -

    Code:
    #accueil
    {
    width: 900px;
    height: 400px;
    overflow: hidden;
    background: url(http://img11.hostingpics.net/pics/181185imagedefond.jpg) center no-repeat;
    border: 3px solid #272727;
    }
    #page1
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background-color: #555555;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page1:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page2
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background-color: #777777;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page2:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page3
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background-color: #9b9b9b;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page3:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page4
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background-color: #bababa;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page4:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page5
    {
    width: 40px;
    height: 400px;
    float: left;
    overflow: hidden;
    background-color: #dcdcdc;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #page5:hover
    {
    width: 80%;
    height: 400px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }

    .contenu_page
    {
    width: 100%;
    height: 400px;
    }
    .page_titre
    {
    display: inline-block;
    height: 40px;
    width: 400px;
    color: #ffffff;
    margin-left: -180px;
    text-align: center;
    font-size: 24px;
    font-family: arial black;
    letter-spacing: 2px;
    text-shadow: 1px 1px 0px #5f5f5f;
    -webkit-transform: rotate(-90deg);   
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }
    .contenu
    {
    width: 0px;
    height: 0px;
    background-color: white;
    overflow: hidden;
    padding: 6px;
    opacity: 0;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    filter: alpha(opacity=0);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    #page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
    {
    width: 650px;
    height: 380px;
    margin-left: -180px;
    background-color: white;
    overflow: none;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }

    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }


    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
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:09, édité 1 fois



    sign
    P'tit Suisse
    P'tit Suisse
    MasculinAge : 22Messages : 86

    Ven 2 Aoû 2013 - 14:53

    Thanks ♥



    QEEL en accordéon horizontal (CSS seulement) - Page 6 248082Sanstitre1
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Sam 31 Aoû 2013 - 23:49

    Very Happy 
    Train123
    Train123
    MasculinAge : 23Messages : 40

    Sam 14 Sep 2013 - 13:09

    MaryChou a écrit:Merci pour le partage !
    Magda Sully
    Magda Sully
    FémininAge : 27Messages : 143

    Dim 15 Sep 2013 - 13:05

    Thanks Wink



    Gerbille ~
    Gerbille ~
    FémininAge : 28Messages : 31

    Lun 23 Sep 2013 - 12:57

    Ça c'est énorme ! super bow ! *-*
    Budapest
    Budapest
    FémininAge : 24Messages : 46

    Sam 5 Oct 2013 - 16:34

    Merci ! *Q*



    Rheah
    Rheah
    FémininAge : 27Messages : 148

    Jeu 10 Oct 2013 - 16:31

    Merci :3
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Mer 16 Oct 2013 - 12:45

    J'adore, encore merci
    soulscythe
    soulscythe
    MasculinAge : 33Messages : 19

    Jeu 17 Oct 2013 - 9:15

    Classe, merci !
    Fleur Laval
    Fleur Laval
    FémininAge : 30Messages : 8

    Jeu 31 Oct 2013 - 1:07

    Merci
    Lilandrile
    Lilandrile
    FémininAge : 38Messages : 60

    Mar 17 Déc 2013 - 11:24

    Merci pour ce code ^^
    Baka Kitsune Maaka
    Baka Kitsune Maaka
    FémininAge : 31Messages : 22

    Dim 29 Déc 2013 - 12:14

    Merci pour ce super tutoriel ! :)



    QEEL en accordéon horizontal (CSS seulement) - Page 6 554906BakaKitsuneMaaka1
    JonathanLeGrand
    JonathanLeGrand
    MasculinAge : 28Messages : 28

    Lun 30 Déc 2013 - 17:16

    gracias
    Etoile de Lumière
    Etoile de Lumière
    FémininAge : 23Messages : 4

    Ven 3 Jan 2014 - 15:34

    Merci beaucoup du partage !
    Geci
    Geci
    FémininAge : 32Messages : 69

    Dim 26 Jan 2014 - 2:25

    Merci ^^
    Azaral
    Azaral
    FémininAge : 27Messages : 69

    Dim 2 Fév 2014 - 0:14

    Merci du partage et du tutoriel :)
    webs
    webs
    MasculinAge : 30Messages : 1097

    Mer 12 Fév 2014 - 21:23

    Merci captain'



    QEEL en accordéon horizontal (CSS seulement) - Page 6 Img-0107360bb1h
    avatar
    jotherrien13
    MasculinAge : 31Messages : 34

    Jeu 27 Fév 2014 - 0:06

    marchi
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Dim 2 Mar 2014 - 17:39

    Merci pour le partage ^^




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Dim 2 Mar 2014 - 22:19

    Merci !!
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Lun 10 Mar 2014 - 18:40

    Oh merci capt'ain



    QEEL en accordéon horizontal (CSS seulement) - Page 6 Oyl7
    EverLiam
    EverLiam
    FémininAge : 35Messages : 1082

    Mer 12 Mar 2014 - 22:28

    J'adoreeeeee c'est trop magnifique ^^



    Egyfu
    Egyfu
    FémininAge : 30Messages : 56

    Ven 21 Mar 2014 - 16:41

    Super boulot. Merci pour ton travail ! =3
    Bonne continuation.
    avatar
    Luinette
    FémininAge : 23Messages : 34

    Mar 1 Avr 2014 - 16:46

    Merci !
    avatar
    Twedle
    MasculinAge : 28Messages : 19

    Mer 9 Avr 2014 - 9:26

    Merci beaucoup , très joli résultat que je m'en vais emprunter Razz
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:30