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.

Le Deal du moment : -34%
Note d’Espresso – Oro di Napoli Lot 48 ...
Voir le deal
5.73 €

    PA en onglets [CSS3, sans javascript]

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

    Dim 9 Oct 2011 - 17:47

    Rappel du premier message :

    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
    Vegvisir
    Vegvisir
    FémininAge : 21Messages : 411

    Mer 11 Fév 2015 - 11:23

    Merci Very Happy



    PA en onglets [CSS3, sans javascript] - Page 27 1
    Kokoa
    Kokoa
    FémininAge : 21Messages : 57

    Mar 24 Fév 2015 - 20:47

    Merci ça pourra me servir ^^



    PA en onglets [CSS3, sans javascript] - Page 27 Cheerleader_by_CookiemagiK

    « Tous cet espace pour moi ? Fallait pas ! »
    Vee
    Vee
    FémininAge : 22Messages : 24

    Jeu 26 Fév 2015 - 21:08

    merci ♥
    Krager
    Krager
    MasculinAge : 25Messages : 67

    Sam 7 Mar 2015 - 23:17

    @Seo. a écrit:Je veux voir :3
    Youp
    Youp
    FémininAge : 26Messages : 579

    Ven 15 Mai 2015 - 0:01

    C'est exactement ce qu'il me faut, merci captain !



    PA en onglets [CSS3, sans javascript] - Page 27 262632clip20160315at092522
    Imaginarium
    Imaginarium
    FémininAge : 32Messages : 7

    Mer 8 Juil 2015 - 11:17

    Merci pour ce code sans javascript !
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 26Messages : 162

    Ven 31 Juil 2015 - 17:31

    C'est super classe!!!! **

    MErciiiii ♥
    Merino
    Merino
    MasculinAge : 25Messages : 55

    Mer 12 Aoû 2015 - 13:28

    Merci d'avance Very Happy
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2433

    Mer 12 Aoû 2015 - 13:37

    Merci (・◇・)
    Emi.
    Emi.
    FémininAge : 29Messages : 82

    Jeu 13 Aoû 2015 - 15:47

    merci :)
    Karooji
    Karooji
    FémininAge : 31Messages : 92

    Dim 16 Aoû 2015 - 17:24

    Je cherchais justement qqch avec des onglets comme ça ! Merci pour le code !! :3
    Wayz
    Wayz
    MasculinAge : 29Messages : 73

    Mer 19 Aoû 2015 - 20:55

    Merci pour le tuto Wink
    Katell
    Katell
    FémininAge : 27Messages : 18

    Sam 3 Oct 2015 - 19:03

    J'aime beaucoup la simplicité, qui appelle à la créativité ! Merci pour ce partage !
    Shanoa
    Shanoa
    FémininAge : 22Messages : 64

    Jeu 29 Oct 2015 - 18:50

    pratique merci
    Arkaline
    Arkaline
    FémininAge : 30Messages : 195

    Ven 6 Nov 2015 - 7:45

    Merci! :)



    Arkaline
    blade li britannia
    blade li britannia
    MasculinAge : 29Messages : 90

    Dim 13 Déc 2015 - 16:22

    merci



    PA en onglets [CSS3, sans javascript] - Page 27 Vpzr10
    Seiden
    Seiden
    MasculinAge : 27Messages : 23

    Jeu 17 Déc 2015 - 17:04

    Merci ! Very Happy
    Anonymous
    Invité

    Lun 28 Déc 2015 - 16:21

    Merci pour ce partage !! :)
    Nishiki
    Nishiki
    FémininAge : 23Messages : 325

    Lun 28 Déc 2015 - 19:41

    merci



    PA en onglets [CSS3, sans javascript] - Page 27 Head19
    Pito
    Pito
    MasculinAge : 24Messages : 127

    Lun 28 Déc 2015 - 20:38

    Merci, vu que j'ai du mal à comprendre comment marchent les onglets...
    Kovu
    Kovu
    FémininAge : 19Messages : 256

    Dim 24 Jan 2016 - 9:10

    Merci !
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 52Messages : 167

    Dim 20 Mar 2016 - 18:21

    Merci
    ALYS
    ALYS
    MasculinAge : 25Messages : 16

    Mer 23 Mar 2016 - 16:14

    Merciiii ! :hug:
    Kimberlay *
    Kimberlay *
    FémininAge : 31Messages : 161

    Sam 2 Avr 2016 - 20:52

    Merci
    Loeva
    Loeva
    FémininAge : 26Messages : 7

    Mar 19 Avr 2016 - 22:49

    Merci !
    Contenu sponsorisé


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