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.

Le Deal du moment : -50%
-50% sur les sacs à dos pour ordinateur ...
Voir le deal
19.99 €

    QEEL en accordéon horizontal (CSS seulement)

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

    Mer 13 Juin 2012 - 11:06

    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
    Miradada
    Miradada
    FémininAge : 31Messages : 14

    Lun 18 Juin 2012 - 22:46

    Merci pour le partage :)
    Alehandra
    Alehandra
    FémininAge : 28Messages : 43

    Lun 18 Juin 2012 - 22:47

    Merci beaucoup !
    Soul
    Soul
    MasculinAge : 28Messages : 1723

    Mar 19 Juin 2012 - 0:17

    Merci à toi, Chef ! Wink
    Aiisu
    Aiisu
    FémininAge : 32Messages : 25

    Mer 20 Juin 2012 - 14:41

    Merci du tuto ♥



    QEEL en accordéon horizontal (CSS seulement) Aisu
    ©️apofiss.deviantart.com, pour l'image de mon kit
    Chaussette
    Chaussette
    FémininAge : 31Messages : 59

    Mer 20 Juin 2012 - 22:37

    Merci ! =D
    Okoia
    Okoia
    FémininAge : 30Messages : 30

    Jeu 21 Juin 2012 - 13:29

    Merci ^^
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Jeu 21 Juin 2012 - 15:32

    Merci pour le partage! c'est très pratique ♥



    QEEL en accordéon horizontal (CSS seulement) 27978_signature_never_utopia_dydy_2
    MaryChou
    MaryChou
    FémininAge : 27Messages : 16

    Jeu 21 Juin 2012 - 22:20

    Merci pour le partage !
    Saku'
    Saku'
    FémininAge : 33Messages : 5

    Sam 23 Juin 2012 - 17:31

    Merci pour le partage *-* ♥
    Hope-Tik
    Hope-Tik
    FémininAge : 29Messages : 10

    Mar 26 Juin 2012 - 13:57

    Je veux :)
    LickingBoot
    LickingBoot
    FémininAge : 25Messages : 503

    Jeu 28 Juin 2012 - 18:45

    Ohh :) Merci. Je l'ai déjà en t'en que P.A :/ Je ne sais pas si ... Mouai. Mais comment le mettre en t'en que QEEL que peut-on bien mettre en nom des "barres" et sa apparait comment dedans ?



    QEEL en accordéon horizontal (CSS seulement) 557826ilovedoudousign
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 28 Juin 2012 - 21:50

    Tu peux mettre les stats globales, puis les passés dans les 24 dernières heures dans un autre onglet, puis les anniversaires et enfin les groupes^^ tu peux aussi prévoir un espace pour les crédits, ou bien les partenaires pourquoi pas^^



    sign
    Anonymous
    Invité

    Ven 29 Juin 2012 - 6:34

    Thanks
    Ryosaki
    Ryosaki
    MasculinAge : 31Messages : 109

    Ven 29 Juin 2012 - 10:33

    merci



    QEEL en accordéon horizontal (CSS seulement) Tutog
    Melody L
    Melody L
    MasculinAge : 31Messages : 22

    Sam 30 Juin 2012 - 12:10

    Merci.
    Lirou21
    Lirou21
    FémininAge : 30Messages : 56

    Mar 3 Juil 2012 - 16:20

    Ze veux voirrr !!! Very Happy
    Merci d'avance ^^.



    QEEL en accordéon horizontal (CSS seulement) Lirou21
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Mar 3 Juil 2012 - 16:45

    Merci beaucouuup ! Very Happy



    féfé20
    féfé20
    FémininAge : 24Messages : 6

    Mer 4 Juil 2012 - 11:39

    Merci pour le partage, c'est un super tutoriel !
    Lenou
    Lenou
    MasculinAge : 28Messages : 20

    Jeu 5 Juil 2012 - 4:40

    Merci Beaucoup Very Happy
    Louzanes
    Louzanes
    FémininAge : 51Messages : 13

    Jeu 5 Juil 2012 - 16:55

    Merci pour le partage



    QEEL en accordéon horizontal (CSS seulement) 96924774061336124177sign1
    Reiõ
    Reiõ
    MasculinAge : 30Messages : 206

    Lun 9 Juil 2012 - 14:21

    Merci !
    Jimmy
    Jimmy
    MasculinAge : 28Messages : 166

    Mar 10 Juil 2012 - 13:06

    I want to see !
    Maya Seiko
    Maya Seiko
    FémininAge : 30Messages : 129

    Jeu 12 Juil 2012 - 15:02

    Merci beaucoup pour les codes ♪
    Anonymous
    Invité

    Ven 13 Juil 2012 - 15:03

    Bon à savoir, merci pour le partage.
    Contenu sponsorisé


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