AccueilRechercherS'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.

-25%
Le deal à ne pas rater :
Appareil Photo Instantané Fujifilm Instax (Divers Coloris)
59.99 € 79.99 €
Voir le deal

    PA en onglets [CSS3, sans javascript]

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

    Dim 9 Oct 2011 - 17:47

    Qu'est-ce que c'est ?

    Il s'agit une zone comportant différents onglets et permettant chacun d'afficher une information différentes dans cette même zone. Par exemple, en cliquant sur le premier onglet vous affichez le contexte, sur le second le staff, etc... et le tout dans le même encadré, permettant d'éviter les pages d'accueil trop longues ou bien de faire de votre QEEL un espace plus sympathique que le QEEL d'origine. Ce code peut être utilisé pour l'un ou l'autre, il suffit dans le second cas d'enlever le code du QEEL de base, d'y mettre ce code, et de remplir avec les informations de votre QEEL de base. Il faut cependant un petit peu de connaissances dans les templates, histoire de savoir où et comment mettre les choses, mais c'est très facile à apprendre ! Wink

    Voici l'aperçu :

    >>> Aperçu du résultat <<<

    Vous allez me dire que ce code a déjà été fait, qu'il existe déjà... oui certes le résultat est ressemblant, mais ce code que je vous donne là vous permet de faire des onglets SANS javascript. Le code est donc plus simple, il ne comporte que deux partie : un code html et un code css.

    Il vous suffit ensuite de mettre ce que vous voulez dans chaque zone de texte, y compris une image de fond différente pour chacune Wink

    Vous constaterez qu'il y a un espace au dessus du bloc d'accueil, c'est pour éviter qu'en se recentrant sur l'accueil à cause de l'ancre placé en codage la page ne remonte trop. Si ma phrase vous parait être du chinois, essayez-donc d'enlever la série de "< br / >" et vous comprendrez mieux Very Happy. Pour combler ce "vide" je vous conseille de faire une image ou de mettre un titre en assez gros, avec simplement "Accueil" ou "Online" (selon l'utilisation) ou encore un "Welcome [username]" Wink



    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="accueil1"><div id="accueil2"><div id="accueil3"><div id="accueil4">
    <br /><br /><br /><br /><br /><br />
    <span class="ongl1"><a href="#accueil1">Onglet 1</a></span><span class="ongl2"><a href="#accueil2">Onglet 2</a></span><span class="ongl3"><a href="#accueil3">Onglet 3</a></span><span class="ongl4"><a href="#accueil4">Onglet 4</a></span><div id="content1"><div id="content2"><div class="info_accueil">Ici se trouve le contenu de votre second onglet.</div></div><div id="content3"><div class="info_accueil">Ici se trouve le contenu de votre troisième onglet.</div></div><div id="content4"><div class="info_accueil">Ici se trouve le contenu de votre quatrième onglet.</div></div><div class="info_accueil">Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite. </div></div>
    </div></div></div></div><span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>


    - Code CSS -

    Code:
    .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 120px;
    height: 30px;
    margin-left: 20px;
    background-color: #abb8cd;
    border-top: 1px solid #808489;
    border-left: 1px solid #808489;
    border-right: 1px solid #808489;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #d3dce9;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #8b9cb8 !important;
    text-shadow: 1px 1px 0px #eef1f6;
    font-size: 18px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;
    text-shadow: 1px 1px 0px #23334c;
    }
    #content1
    {
    display: block;
    height: 300px;
    overflow: hidden;
    background: #8799b6;
    border: 1px solid #596b87;
    font-size: 11px;
    color: #3c506f;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 300px;
    overflow: hidden;
    border: 1px solid #596b87;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil2:target #content2
    {
    display: block;
    height: 300px;
    overflow: hidden;
    background: #8799b6;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }
    #accueil3:target #content3
    {
    display: block;
    height: 300px;
    overflow: hidden;
    background: #8799b6;
    font-size: 11px;
    color: #3c506f;
    }
    #accueil4:target #content4
    {
    display: block;
    height: 300px;
    overflow: hidden;
    background: #8799b6;
    font-size: 11px;
    color: #3c506f;
    }
    .info_accueil
    {
    padding: 10px;
    text-align: justify;
    }

    .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:39, édité 2 fois



    sign
    Wind
    Wind
    MasculinAge : 30Messages : 18

    Dim 9 Oct 2011 - 17:53

    Moins casse-tête que l'autre ? God, thanks ! xD
    On va voir ça !

    Et merci Spa. (:

    Edit : Que Dieu te bénisse tu as sauvé ma soirée u_u. *se mélangeait partout avec l'autre*


    Dernière édition par Wind le Dim 9 Oct 2011 - 17:58, édité 1 fois
    Sakura Sumeragi
    Sakura Sumeragi
    FémininAge : 30Messages : 62

    Dim 9 Oct 2011 - 17:56

    Merci sparrow =)
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Dim 9 Oct 2011 - 18:00

    Avec plaisir ^^

    Il ne vous reste plus qu'à changer les couleurs ou à mettre des images de fond, puis à tout remplir^^ Donc est-ce qu'il est plus facile ou pas je ne sais pas, mais il est moins complexe à la base donc l'utilisation doit être plus simple aussi. J'ai du mal avec le javascript donc ce que je peux faire sans je le fais...



    sign
    Sakura Sumeragi
    Sakura Sumeragi
    FémininAge : 30Messages : 62

    Dim 9 Oct 2011 - 18:19

    Niveau utilisation , c'est plus différent que plus simple (il ne faut pas se mélanger dans l'HTLM), mais ça fait du bien de pas à avoir à se casser la tête avec le java. Encore merci, j'en ferais bon usage =)
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Dim 9 Oct 2011 - 18:48

    Oui c'est bien ce qu'il me semblait^^ enfin à mes yeux ça reste plus simple Very Happy

    Okay Wink



    sign
    Yeon
    Yeon
    FémininAge : 32Messages : 12

    Dim 9 Oct 2011 - 22:14

    Merci beaucoup ^^
    Sachi
    Sachi
    FémininAge : 27Messages : 50

    Lun 10 Oct 2011 - 9:06

    merci beaucoup ♥
    Kerington
    Kerington
    FémininAge : 29Messages : 25

    Lun 10 Oct 2011 - 16:18

    Tu es génial Sparrow sache le !
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Lun 10 Oct 2011 - 16:21

    Merci merci Cool XD



    sign
    Sysy
    Sysy
    FémininAge : 28Messages : 131

    Mar 11 Oct 2011 - 20:25

    Merci beaucoup, c'est super !
    Seo.
    Seo.
    MasculinAge : 26Messages : 290

    Jeu 13 Oct 2011 - 22:07

    Je veux voir :3
    GaaraXGaara
    GaaraXGaara
    MasculinAge : 31Messages : 49

    Ven 14 Oct 2011 - 18:34

    Je veut voir ! Razz



    Je préfère avoir la maladie de parkinson que la maladie Alzheimer, pourquoi?
    Parce que je préfère renverser une goutte de mon verre que d'oublié de le boire.


    :nawak:
    Bleufi
    Bleufi
    FémininAge : 25Messages : 311

    Ven 14 Oct 2011 - 18:44

    Merci beaucoup, c'est très gentil et c'est ce que je recherchais parce que le javascript c'est pas trop trop mon truc ^^"



    PA en onglets [CSS3, sans javascript] 875686Asuna
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Ven 14 Oct 2011 - 18:52

    Avec plaisir^^ J'suis dans le même cas que toi concernant le js, c'est pourquoi j'essaie de compenser par le css quand c'est possible...



    sign
    Ready To Go
    Ready To Go
    FémininAge : 26Messages : 11

    Ven 14 Oct 2011 - 23:09

    merci beaucoup pour le tuto !




    I waited all this time to see you and then... I.. want to take you to a place
    Where love is something more than you imagined, yeah. I.. put it right in your face. Girl, it’s yours. All you got to do is reach out and grab it. You waited all this time. You waited all this time. I put it right in your face. Girl, it’s yours. All you got to do is reach out and grab it !
    Joe Jonas, All This Time
    Spoiler:
    Ziktaon
    Ziktaon
    MasculinAge : 28Messages : 843

    Sam 15 Oct 2011 - 15:17

    Tout d'abord merci Capt'ain :)

    ensuite comment fait on pour mettre les onglets sur le coté droit ou gauche ?

    Car je suis dans la construction de mon forum op et j'aimerai faire un thème vraiment " Pirate " ^^ et pour cela je sollicite votre bienveillance :)



    PA en onglets [CSS3, sans javascript] 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

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

    Sam 15 Oct 2011 - 15:24

    il faut que tu mettes les onglets en float right je suppose ^^, mais ça complique tout car il te faut tourner les titres dans l'autre sens, faire les marges inverses aussi...



    sign
    Ziktaon
    Ziktaon
    MasculinAge : 28Messages : 843

    Sam 15 Oct 2011 - 16:45

    Hmm si cest par rapport au rotation, je pourrais m'en sortir mais j'en suis pas sur d'être a la hauteur mdr.

    En tout cas merci a toi :)



    PA en onglets [CSS3, sans javascript] 719846zikisigna



    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    Lyi
    Lyi
    FémininAge : 23Messages : 11

    Sam 15 Oct 2011 - 16:50

    Merci ^^
    French_fantasy
    French_fantasy
    FémininAge : 29Messages : 6

    Sam 15 Oct 2011 - 23:53

    Je suis curieuse de voir les codes pour essayer de comprendre =)
    Skyleen
    Skyleen
    FémininAge : 28Messages : 476

    Mar 18 Oct 2011 - 18:43

    Ce codage m'interesse beaucoup. Merci pour le partage :)
    Wanted
    Wanted
    FémininAge : 25Messages : 113

    Mar 18 Oct 2011 - 20:39

    Merci ! ♥

    J'ai une petite question, on ne peut rien faire pour que la page ne bouge pas lorsque l'on clique sur un onglet ?
    Anonymous
    Invité

    Mer 19 Oct 2011 - 19:41

    Je peux voir le code toplait ♥
    Merci d'avance
    Qare
    Qare
    MasculinAge : 29Messages : 32

    Mer 19 Oct 2011 - 22:27

    j'espère pouvoir fusionner ce tableau avec l'autre mais c'est tout bonnement nickel ^^ merci encore!



    ♪♬ ♩ ♭♪ Never Cry ♪ Never Shine ♫ Never Die ♪♬ ♩ ♭♪

    PA en onglets [CSS3, sans javascript] Sans-t68
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 3:10