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.


    PA en accordéon horizonal [en CSS seulement !]

    Okhmhaka
    Okhmhaka
    FémininAge : 34Messages : 31851

    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 -

    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

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:37, édité 2 fois



    PA en accordéon horizonal [en CSS seulement !] - Page 6 Unchai10
    Ornicar
    Ornicar
    MasculinAge : 23Messages : 37

    le Lun 8 Mai 2017 - 11:03

    Merci !
    Kiryuu02
    Kiryuu02
    FémininAge : 30Messages : 32

    le Ven 12 Mai 2017 - 6:19

    merci pour ce partage
    Pandinou
    Pandinou
    MasculinAge : 27Messages : 26

    le Dim 21 Mai 2017 - 15:27

    Merci
    Jupanda
    Jupanda
    FémininAge : 18Messages : 72

    le Ven 16 Juin 2017 - 16:34

    je vais tester, merci Very Happy
    Madras
    Madras
    FémininAge : 34Messages : 281

    le Ven 21 Juil 2017 - 11:29

    Merci du partage
    Hadès.
    Hadès.
    MasculinAge : 20Messages : 42

    le Lun 24 Juil 2017 - 0:21

    Merci beaucoup pour ce partage, j'ai toujours chercher à comprendre ce code qui rends plus que bien
    Professeur
    Professeur
    FémininAge : 21Messages : 13

    le Ven 11 Aoû 2017 - 22:05

    Merci bien Very Happy
    Nyls
    Nyls
    MasculinAge : 18Messages : 28

    le Jeu 24 Aoû 2017 - 18:03

    c'est super génial :lovebomb:
    Doomdom
    Doomdom
    MasculinAge : 34Messages : 25

    le Ven 22 Sep 2017 - 10:51

    merci <3
    Adein
    Adein
    MasculinAge : 28Messages : 46

    le Mar 19 Déc 2017 - 11:03

    merci cheers
    Charly0
    Charly0
    Messages : 14

    le Sam 23 Déc 2017 - 12:24

    merci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 51Messages : 167

    le Mer 7 Fév 2018 - 0:37

    Merci
    Amacky
    Amacky
    FémininAge : 27Messages : 135

    le Mar 15 Mai 2018 - 18:26

    merci beaucoup
    FlyingPower
    FlyingPower
    FémininAge : 26Messages : 1

    le Jeu 28 Mar 2019 - 12:05

    merci <3
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Aoû 2019 - 19:40