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 à ne pas rater :
WD Green SN350 – Disque SSD interne NVMe M.2 – 2 To
99.99 €
Voir le deal

    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
    Eleania Madena
    Eleania Madena
    FémininAge : 26Messages : 90

    Ven 11 Avr 2014 - 19:08

    Merci :3




    Crimmson Bounty
    Crimmson Bounty
    MasculinMessages : 229

    Mer 30 Avr 2014 - 15:04

    Merci ! Je vais essayer ça aussi ^^



    QEEL en accordéon horizontal (CSS seulement) - Page 7 Flod10
    Shinju.dot
    Shinju.dot
    FémininAge : 34Messages : 88

    Ven 13 Juin 2014 - 18:14

    Chaussette a écrit:Merci ! =D
    moumoune
    moumoune
    FémininAge : 33Messages : 62

    Dim 31 Aoû 2014 - 19:38

    J'aimerai voir les codes aussi ^^
    Sentenza
    Sentenza
    MasculinAge : 39Messages : 95

    Dim 21 Sep 2014 - 21:32

    Merci!!
    LHOOQ
    LHOOQ
    MasculinAge : 31Messages : 20

    Mar 23 Sep 2014 - 23:56

    Merci!
    âme
    âme
    FémininAge : 58Messages : 154

    Jeu 4 Déc 2014 - 15:17

    Ça c'est beau !
    Un grand merci :)



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    xGauthierx
    xGauthierx
    MasculinAge : 26Messages : 75

    Dim 11 Jan 2015 - 1:18

    Magnifique. Je bave.
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Sam 7 Mar 2015 - 23:11

    superbe! thanks
    ghostasylum
    ghostasylum
    FémininAge : 29Messages : 27

    Mer 11 Mar 2015 - 18:49

    cheers



    QEEL en accordéon horizontal (CSS seulement) - Page 7 Signature-daevasfashion-7562
    Lakia
    Lakia
    FémininAge : 25Messages : 138

    Dim 15 Mar 2015 - 11:12

    merci !
    Nox
    Nox
    FémininAge : 24Messages : 8

    Ven 24 Avr 2015 - 15:28

    Merci !



    QEEL en accordéon horizontal (CSS seulement) - Page 7 226103Signanoxutopia
    mary legna
    mary legna
    FémininAge : 28Messages : 12

    Sam 25 Avr 2015 - 15:25

    J'adore !
    Nutop
    Nutop
    FémininAge : 21Messages : 254

    Mar 2 Juin 2015 - 12:46

    Merci beaucoup ! Je vais tenter de le mettre ^^




    QEEL en accordéon horizontal (CSS seulement) - Page 7 Mini_597402Sceaufinal

    Chione
    Chione
    MasculinAge : 23Messages : 397

    Mer 24 Juin 2015 - 14:59

    merci!



    QEEL en accordéon horizontal (CSS seulement) - Page 7 1435969469-signd
    FEZ!FEZ!
    QEEL en accordéon horizontal (CSS seulement) - Page 7 150804081846482087
    Crystaline
    Crystaline
    FémininAge : 24Messages : 5

    Sam 27 Juin 2015 - 20:34

    Super sympa, j'aime beaucoup le système d'onglet Very Happy
    Anonymous
    Invité

    Mar 30 Juin 2015 - 17:21

    Merci ! Ca va m'aider à corriger ma commande ^^
    Wiss
    Wiss
    FémininAge : 19Messages : 53

    Mer 16 Sep 2015 - 13:10

    Trop trop beau, merciii!



    QEEL en accordéon horizontal (CSS seulement) - Page 7 Wiss11
    Autre signa:
    Anonymous
    Invité

    Dim 20 Sep 2015 - 22:34

    Merci (*≧▽≦)
    Zomega
    Zomega
    FémininAge : 33Messages : 31

    Dim 25 Oct 2015 - 22:46

    Merci pour le partage :)
    EthanHol
    EthanHol
    FémininAge : 30Messages : 218

    Mer 13 Jan 2016 - 18:43

    Merci pour le partage !



    QEEL en accordéon horizontal (CSS seulement) - Page 7 Sans_t14
    LittleChan
    LittleChan
    FémininAge : 33Messages : 62

    Jeu 3 Mar 2016 - 23:11

    Thanks



    QEEL en accordéon horizontal (CSS seulement) - Page 7 34ex18y
    Asa Ikeda
    Asa Ikeda
    FémininAge : 29Messages : 36

    Ven 14 Avr 2017 - 23:38

    Merci pour le partage de cette PA tout a fait sympatique Very Happy
    Athéna
    Athéna
    FémininAge : 63Messages : 29

    Sam 13 Mai 2017 - 7:17

    C'est super joli, merci pour le partage Wink



    "L'esprit est un instrument de musique avec une certaine gamme de tons,
    au-deLà desquels s'étend un silence infini."
    AryaS-
    AryaS-
    FémininAge : 24Messages : 15

    Mar 3 Oct 2017 - 18:02

    Merci !
    Contenu sponsorisé


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