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 :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

    QEEL en onglets [CSS3, sans javascript]

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

    Mer 13 Juin 2012 - 11:54

    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
    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:10, édité 1 fois



    sign
    L*
    L*
    FémininAge : 29Messages : 44

    Mer 7 Mai 2014 - 17:33

    Merci beaucoup pour le partage
    avatar
    Dada1779
    MasculinAge : 39Messages : 23

    Mer 11 Juin 2014 - 9:15

    Merci pour le partage
    Louzanes
    Louzanes
    FémininAge : 51Messages : 13

    Mer 18 Juin 2014 - 19:08

    Merci pour le partage



    QEEL en onglets [CSS3, sans javascript] - Page 6 96924774061336124177sign1
    Lamire
    Lamire
    FémininAge : 30Messages : 96

    Jeu 19 Juin 2014 - 10:40

    Merci~
    Taoro
    Taoro
    MasculinAge : 31Messages : 78

    Sam 12 Juil 2014 - 11:29

    Merci



    SatoruMasao
    SatoruMasao
    MasculinAge : 29Messages : 23

    Jeu 31 Juil 2014 - 16:13

    THANKS MAN!
    Joshua023
    Joshua023
    MasculinAge : 34Messages : 98

    Lun 4 Aoû 2014 - 16:28

    Ce code m'a l'air très sympathique, merci :) !



    QEEL en onglets [CSS3, sans javascript] - Page 6 Signat15
    Emy Liddell
    Emy Liddell
    FémininAge : 31Messages : 29

    Mar 16 Sep 2014 - 22:54

    mici :3



    1XMisterX1
    1XMisterX1
    MasculinAge : 25Messages : 423

    Sam 14 Fév 2015 - 12:40

    Un grand merci à toi Very Happy
    Nilù
    Nilù
    FémininAge : 24Messages : 8

    Dim 12 Avr 2015 - 21:15

    Danke ^^
    Melaly
    Melaly
    FémininAge : 29Messages : 91

    Lun 18 Mai 2015 - 22:42

    Arigato gozaimasu moo
    DC-Girl.
    DC-Girl.
    FémininAge : 28Messages : 5

    Jeu 11 Juin 2015 - 21:45

    merci!
    Pimousse
    Pimousse
    FémininAge : 27Messages : 3

    Ven 12 Juin 2015 - 13:53

    C'est exactement ce que je cherchais *O* !! Merci Very Happy
    Dream Land School
    Dream Land School
    FémininAge : 35Messages : 100

    Mer 2 Sep 2015 - 4:18

    Merci ^^
    Anonymous
    Invité

    Mer 2 Sep 2015 - 13:38

    Merci (>_<)
    lacoste
    lacoste
    MasculinAge : 30Messages : 30

    Lun 21 Déc 2015 - 5:07

    merci
    Kovu
    Kovu
    FémininAge : 22Messages : 257

    Jeu 24 Déc 2015 - 1:57

    Merci !
    Anviree
    Anviree
    FémininAge : 27Messages : 49

    Jeu 4 Fév 2016 - 14:43

    Merci :3
    Saia
    Saia
    FémininAge : 29Messages : 195

    Jeu 7 Sep 2017 - 13:56

    Merci pour le tutoriel Very Happy



    QEEL en onglets [CSS3, sans javascript] - Page 6 Finit10
    Nemesis
    Nemesis
    FémininAge : 32Messages : 218

    Jeu 26 Avr 2018 - 21:41

    merci :)
    Nobuko
    Nobuko
    MasculinAge : 30Messages : 48

    Mar 12 Juin 2018 - 1:13

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 8:42