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.

-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
Voir le deal

    PA en onglets [CSS3, sans javascript]

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 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
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Sam 7 Jan 2012 - 20:33

    Et voilà... Je vais encore passer pour un boulet (c'est pas comme si j'avais pas l'habitude)
    Malgré le fait que j'ai bien suivis les instruction pour éviter que le contenu de l'onglet 1 ne déborde pas sur les autre...et ben, ça arrive quand même >< Quelqu'un serait me dire pourquoi ? T.T
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Dim 8 Jan 2012 - 15:52

    Personne pour m'aider ? Siouplait
    Darkyfrite
    Darkyfrite
    MasculinAge : 111Messages : 595

    Dim 8 Jan 2012 - 22:55

    Merci beaucoup !



    PA en onglets [CSS3, sans javascript] - Page 6 734710tumblrlr3y3p5zdz1qlqscio1500
    Yui
    Yui
    FémininAge : 35Messages : 334

    Dim 8 Jan 2012 - 23:31

    Eil'liathan Tyan'Lirulin a écrit:Et voilà... Je vais encore passer pour un boulet (c'est pas comme si j'avais pas l'habitude)
    Malgré le fait que j'ai bien suivis les instruction pour éviter que le contenu de l'onglet 1 ne déborde pas sur les autre...et ben, ça arrive quand même >< Quelqu'un serait me dire pourquoi ? T.T

    Bonsoir ^^
    Probablement une petite erreur dans ton code, il faudrait que tu nous montres ton template ^^ (je ne lis presque jamais ces sujets, alors il y a de fortes chances pour que j'oublie totalement ton problème... Poste carrément une demande d'aide si tu n'arrives pas à le résoudre et que ça traîne ^^)



    ~ Yui ~
    Mikoweed
    Mikoweed
    FémininAge : 27Messages : 47

    Lun 9 Jan 2012 - 17:38

    Je cherchais ce code depuis un moment, merci beaucoup ! Very Happy



    PA en onglets [CSS3, sans javascript] - Page 6 Tumblr_lqh59dY2qn1qelmnbo1_500
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Lun 9 Jan 2012 - 18:41

    Yui a écrit:

    Bonsoir ^^
    Probablement une petite erreur dans ton code, il faudrait que tu nous montres ton template ^^ (je ne lis presque jamais ces sujets, alors il y a de fortes chances pour que j'oublie totalement ton problème... Poste carrément une demande d'aide si tu n'arrives pas à le résoudre et que ça traîne ^^)

    Han >< j'ai trouvé y a une heure ce qui n'allait pas XD Juste une mauvaise copie des codes ><
    Merci quand même ^^
    Niinoh
    Niinoh
    MasculinAge : 29Messages : 4

    Mer 11 Jan 2012 - 14:24

    thx
    {Appolo-polochon}
    {Appolo-polochon}
    FémininAge : 28Messages : 14

    Mer 11 Jan 2012 - 22:26

    Merci beaucoup ^^
    Melon ♫
    Melon ♫
    FémininAge : 29Messages : 19

    Mer 11 Jan 2012 - 22:42

    Merci beaucoup, désoler de poster si je n'es pas le droit, je supprime mon message si tel est le cas
    coeurdelait
    coeurdelait
    FémininAge : 45Messages : 18

    Jeu 12 Jan 2012 - 14:00

    Merci beaucoup pour toutes tes tutos.
    fafa
    fafa
    MasculinAge : 33Messages : 34

    Dim 15 Jan 2012 - 11:16

    merci
    Kakuu
    Kakuu
    MasculinAge : 28Messages : 30

    Dim 15 Jan 2012 - 16:01

    Merci :)



    PA en onglets [CSS3, sans javascript] - Page 6 Signa
    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Mar 17 Jan 2012 - 10:54

    merci
    Morpheus
    Morpheus
    MasculinAge : 32Messages : 386

    Mar 17 Jan 2012 - 14:01

    God Bless me. Cool

    Ah sorry, You too. Thanks Cool



    PA en onglets [CSS3, sans javascript] - Page 6 740731signmorpheus
    Beaummont
    Beaummont
    FémininAge : 37Messages : 19

    Mar 17 Jan 2012 - 16:15

    Merci!



    PA en onglets [CSS3, sans javascript] - Page 6 Irisfff1
    Jay No Shi
    Jay No Shi
    MasculinAge : 27Messages : 631

    Ven 20 Jan 2012 - 18:45

    Merci pour le partage



    PA en onglets [CSS3, sans javascript] - Page 6 303026HeiYin
    Styl'men
    Styl'men
    MasculinAge : 28Messages : 56

    Ven 20 Jan 2012 - 19:03

    Sa ma beaucoup aidé merci !



    PA en onglets [CSS3, sans javascript] - Page 6 Oussam10
    Skyleen
    Skyleen
    FémininAge : 31Messages : 476

    Ven 20 Jan 2012 - 19:42

    J'ai une petite question pour cette commande. Si vous voulons ajouter une image dans l'onglet ( pas à l'intérieur mais dans la partie ou nous mettons la souris pour afficher une autre partie ), quel est le code à utiliser et ou la placer ? :)

    Merci beaucoup ♥
    lolita68623
    lolita68623
    FémininAge : 29Messages : 27

    Ven 20 Jan 2012 - 22:52

    merci : je cherché le code !
    avatar
    DarkNemi
    FémininAge : 31Messages : 17

    Sam 21 Jan 2012 - 16:01

    Merci merci >w<
    StrawBerru
    StrawBerru
    FémininAge : 32Messages : 15

    Sam 21 Jan 2012 - 16:03

    merci!
    Eibhleen
    Eibhleen
    FémininAge : 32Messages : 130

    Sam 21 Jan 2012 - 16:28

    Merci !
    LuunaTsuki
    LuunaTsuki
    FémininAge : 33Messages : 32

    Dim 22 Jan 2012 - 16:33

    Je veux bien jeter un coup d'oeil =)



    PA en onglets [CSS3, sans javascript] - Page 6 Signat10
    Aeilan
    Aeilan
    FémininAge : 34Messages : 20

    Lun 23 Jan 2012 - 14:16

    Thanks !
    Keora
    Keora
    FémininAge : 25Messages : 27

    Mar 24 Jan 2012 - 20:26

    Merci beaucoup ^o^
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 3:14