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 à ne pas rater :
SAMSUNG Galaxy A14 5G Noir 64 Go à 98,49€
98.49 €
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
    avatar
    Eroik04
    MasculinAge : 26Messages : 22

    Dim 1 Juin 2014 - 17:32

    merci
    avatar
    Horus
    FémininAge : 27Messages : 56

    Lun 9 Juin 2014 - 16:42

    arigato tu me sauve la vie !
    Lylinee
    Lylinee
    FémininAge : 34Messages : 26

    Jeu 26 Juin 2014 - 19:28

    merci beaucoup pour cette page d'accueil =)



    PA en onglets [CSS3, sans javascript] - Page 26 Sign113
    avatar
    Alancar
    MasculinAge : 27Messages : 57

    Lun 30 Juin 2014 - 14:19

    Merci :)
    Kyuso Jiro
    Kyuso Jiro
    MasculinAge : 30Messages : 8

    Lun 21 Juil 2014 - 15:37

    Merci bien :) !



    PA en onglets [CSS3, sans javascript] - Page 26 1405548572-jiro-ops
    Kora
    Kora
    FémininAge : 22Messages : 45

    Mer 23 Juil 2014 - 1:35

    merci
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Ven 8 Aoû 2014 - 3:41

    Merci <3
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Sam 30 Aoû 2014 - 12:40

    Coucou!
    Merci pour ce petit code.
    A trés vite!
    Tchii!
    Wrung Jah
    Wrung Jah
    MasculinAge : 30Messages : 59

    Jeu 4 Sep 2014 - 0:33

    Merci :)
    Sitahy
    Sitahy
    FémininAge : 24Messages : 19

    Ven 5 Sep 2014 - 0:03

    Merci ! -



    PA en onglets [CSS3, sans javascript] - Page 26 1-56
    Saphire
    Saphire
    FémininAge : 26Messages : 146

    Dim 7 Sep 2014 - 15:43

    merci :)
    Nanou0001
    Nanou0001
    FémininAge : 40Messages : 50

    Mar 23 Sep 2014 - 12:06

    merci
    Valeriane
    Valeriane
    FémininAge : 39Messages : 29

    Ven 3 Oct 2014 - 13:08

    Merciiiii :)
    BloodyMoony
    BloodyMoony
    FémininAge : 31Messages : 76

    Ven 24 Oct 2014 - 11:49

    Merci pour le tuto :)
    EmYasmina
    EmYasmina
    FémininAge : 24Messages : 85

    Ven 24 Oct 2014 - 16:07

    Merciii !
    Kira de Shola
    Kira de Shola
    FémininAge : 27Messages : 60

    Ven 24 Oct 2014 - 22:02

    thks. <3
    wiise
    wiise
    FémininAge : 31Messages : 50

    Mar 28 Oct 2014 - 12:57

    Merci beaucoup du partage !



    PA en onglets [CSS3, sans javascript] - Page 26 140051NUban
    0smose
    0smose
    FémininAge : 28Messages : 167

    Mar 28 Oct 2014 - 16:29

    Merci pour ce beau travail ! Je vais personnaliser les onglets pour en faire une magnifique PA ! Very Happy



    PA en onglets [CSS3, sans javascript] - Page 26 Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Nalex
    Nalex
    FémininAge : 34Messages : 154

    Dim 2 Nov 2014 - 18:53

    Je vais tester ça pour mon staff. Merci!



    PA en onglets [CSS3, sans javascript] - Page 26 567962k6yx
    Choubakawa
    Choubakawa
    MasculinAge : 31Messages : 87

    Jeu 6 Nov 2014 - 21:36

    Merci



    PA en onglets [CSS3, sans javascript] - Page 26 Witche13
    Daydream
    Daydream
    FémininAge : 27Messages : 44

    Mar 25 Nov 2014 - 23:41

    Merci !
    DarkMasamune
    DarkMasamune
    FémininAge : 32Messages : 63

    Sam 13 Déc 2014 - 14:52

    Merci beaucoup ^^
    Sachikou
    Sachikou
    FémininAge : 24Messages : 48

    Dim 14 Déc 2014 - 16:37

    Merci beaucoup Very Happy



    PA en onglets [CSS3, sans javascript] - Page 26 Signa111
    Arisu
    Arisu
    FémininAge : 36Messages : 119

    Mer 17 Déc 2014 - 1:51

    Beau travail, merci !
    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Mar 10 Fév 2015 - 22:13

    Superbe, merci !



    PA en onglets [CSS3, sans javascript] - Page 26 Ye49
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 12:11