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.

-50%
Le deal à ne pas rater :
Friteuse sans huile – PHILIPS – Airfryer HD9200/90 Série 3000
54.99 € 109.99 €
Voir le deal

    Accueil Zen - onglets

    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 5 Mar 2014 - 15:25

    Rappel du premier message :

    Voici une petite page d'accueil Zen. En espérant qu'elle vous plaise.



    Code:
    /*Onglets*/
    .ongls{
       margin: -300px 5px 70px 0px;
    }
       .ongl1, .ongl2, .ongl3, .ongl4
    {
    display: inline-block;
    width: 80px;
    height: 18px;
    margin-left: 7px;
    background-color: #b4c385;
    border: 1px solid #808489;
    border-radius: 10px;
    text-align: center;
    }
    .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
    {
    background-color: #c8e75f;
    }
    .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
    {
    display: block;
    padding-top: 2px;
    font-weight: bold;
    text-decoration: none !important;
    color: #e5fae4 !important;
    font-size: 12px;
    }
    .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
    {
    color: #446291 !important;;
    }

    /*Clics*/
    #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    margin-right: 10px;
    margin-top: -35px;
    }
    #content2, #content3, #content4
    {
    display: none;
    }
    #accueil1:target #content1
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    font-size: 11px;
    color: #b5e61d;
    opacity: 1;
    }
    #accueil2:target #content2
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    opacity: 1;
    }
    #accueil3:target #content3
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    font-size: 11px;
    color: #3c506f;
    }
    #accueil4:target #content4
    {
    display: block;
    height: 200px;
    width: 360px;
    overflow: hidden;
    background: #b5e61d;
    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;
    }

    /*All*/
    .corps{
       width: 600px;
       height: 344px;
       border: 3px black solid;
       margin: 40px 10px 10px 40px;
    }
    .table{
       margin: -20px 0 0 -20px;
    }
    .img1{
       width: 100px;
       height: 100px;
       border-radius: 100px;
       background-image: url(http://2img.net/i/fa/pbucket.gif);
       border: 1px solid black;
    margin-right: 50px;
    text-indent:-9999px;
    }
    .img2{
       width: 100px;
       height: 100px;
       border-radius: 100px;
       background-image: url(http://2img.net/i/fa/pbucket.gif);
       border: 1px solid black;
       margin-left: -50px;
    text-indent:-9999px;
    }
    .img1:hover{
       width: 100px;
       height: 100px;
       border-radius: 10px;
       background-color: gray;
    background-image: none;
       border: 1px solid black;
    margin-right: 50px;
    z-index: 3;
    font-size: 10px;
    position: relative;
    text-indent:4px;
    }
    .img2:hover{
       width: 100px;
       height: 100px;
       border-radius: 10px;
       background-color: gray;
    background-image: none;
       border: 1px solid black;
       margin-left: -50px;
    z-index: 3;
    font-size: 10px;
    position: relative;
    text-indent:4px;
    }
    .noms1{
       margin: -15px 0 0 0;
       font-size: 20px;
       width: 100px;
       text-align: center;
       text-shadow: 0px 0px 5px #000;
       color: #FFF;
    }
    .noms2{
       margin: -15px 0 0 -50px;
       font-size: 20px;
       width: 100px;
       text-align: center;
       text-shadow: 0px 0px 5px #000;
       color: #FFF;
    }
    .news{
       margin: 0px 10px 10px 10px;
       width: 130px;
       height: 170px;
       border: 2px solid black;
       text-align: justify;
       padding: 0px 2px 2px 2px;
       font-size: 11px;
       overflow: hidden;
    }
    .newstitle{
       text-align: center;
       font-weight: bold;
       font-size: 22px;
    }
    .partmsg{
       background-color: #98d9ea;
       margin: -15px 10px 5px 10px;
       height: 40px;
       padding: 10px 5px 2 5px;
    }
    .partitle{
       margin-top: 38px;
       text-align: center;
       font-weight: bold;
       font-size: 22px;
    }
    .partenaire{
    width: 75px;
    height: 25px;
    border: 1px dotted black;
    margin: 10px 5px 0 5px;}

    Code:
    <div class="corps">
     
    <table class="table">
     
    <tbody>
     
    <tr>
     
    <td>
     
    <div class="img1">
     Blabla1
    </div>
     
    </td>
     
    <td>
     
    <div class="img2">
     Blabla2
    </div>
     
    </td>
     
    </tr>
     
    <tr>
     
    <td>
     
    <div class="noms1">
     NOM
    </div>
     
    </td>
     
    <td>
     
    <div class="noms2">
     NOM
    </div>
     
    </td>
     
    </tr>
     
    </tbody>
     
    </table>
     
    <div class="news">
     
    <center>
     <span class="newstitle">NEWS</span>
    </center>
     <marquee direction="up" scrollamount="2">icez ifezj ifoe zanjckraioe iazjic znjcrenauiecnz jc zenjcenz j cnjk ez njkc eznjiceu i fnjkf enzjk nez jk cnzjkc enzkjc nejzkndejkejaiov ekoa vnfio rnejkvfnjkv frnz vnfrjk vfrnzk vrfznkv frizog riolv,fklzv fioz nklv fdnjk v</marquee>
    </div>
     
    <div align="right">
     
    <div id="accueil1">
     
    <div id="accueil2">
     
    <div id="accueil3">
     
    <div id="accueil4">
     
    <div class="ongls">
     <span class="ongl1"><a href="#accueil1">Accueil</a></span> <span class="ongl2"><a href="#accueil2">Contexte</a></span> <span class="ongl3"><a href="#accueil3">Prédéfinie</a></span> <span class="ongl4"><a href="#accueil4">Events</a></span>
    </div>
     
    <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">
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    </div>
     
    <div align="center">
     
    <div class="partitle">
     Partenaires
    </div>
     
    <div class="partmsg">
     <marquee scrollamount="2"><img src="" class="partenaire" /><a src=""><img src="" class="partenaire" /></a><a src=""><img src="" class="partenaire" /></a><a src=""><img src="" class="partenaire" /></a><a src=""></a></marquee>
    </div>
     
    </div>
    </div>

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Kraken
    Kraken
    FémininAge : 31Messages : 137

    Dim 26 Avr 2015 - 20:00

    merci pour le partage
    Wolf Valley
    Wolf Valley
    FémininAge : 24Messages : 72

    Sam 6 Juin 2015 - 17:11

    Merci !
    White Lady
    White Lady
    FémininAge : 32Messages : 28

    Jeu 2 Juil 2015 - 20:29

    merci !
    Kazumi
    Kazumi
    FémininAge : 24Messages : 45

    Sam 26 Sep 2015 - 6:07

    Merci !
    Anonymous
    Invité

    Sam 26 Sep 2015 - 18:43

    Merci (☆^O^☆)
    Arisu
    Arisu
    FémininAge : 36Messages : 119

    Mer 24 Fév 2016 - 22:33

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

    Sam 19 Mar 2016 - 14:23

    Merci !!!
    RPG Maker
    RPG Maker
    FémininAge : 30Messages : 53

    Mar 19 Avr 2016 - 11:39

    Cette PA est magnifique, merci de nous l'avoir fait partager. ^^
    Liintu
    Liintu
    FémininAge : 35Messages : 67

    Mar 12 Juil 2016 - 19:51

    Simple et efficace, merci c'est top !
    Anonymous
    Invité

    Mar 8 Nov 2016 - 12:33

    trop mimi :)
    Dariel
    Dariel
    FémininAge : 54Messages : 69

    Mar 8 Nov 2016 - 21:54

    cheers Ben oui, elle me plaît ta petit PA... !!!
    Merci pour ton partage

    :popcorn:



    C'est la vie Invité ! Pas le paradis.
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Sam 12 Nov 2016 - 5:20

    merci
    vaness123
    vaness123
    FémininAge : 33Messages : 12

    Lun 19 Déc 2016 - 17:36

    Oh, c'est très jolie **
    Melle Lena
    Melle Lena
    FémininAge : 49Messages : 308

    Mer 26 Avr 2017 - 17:45

    Merci, simple mais joli.
    msfeettoes
    msfeettoes
    MasculinAge : 44Messages : 46

    Ven 12 Mai 2017 - 9:28

    merci c cool Very Happy
    Suna
    Suna
    FémininAge : 19Messages : 33

    Jeu 29 Juin 2017 - 9:53

    Trop beau !!



    Salut à tous, mon nom est Suna en rapport avec Suna (un village de Ninja dans Naruto)
    Mes surnoms son Gaga, Erza et Gaara. j'aime beaucoup les mangas et en particulier Fairy Tail. Je suis fort en rpg, mnof e, codage et nulle à chier en graphisme.

    Accueil Zen - onglets - Page 4 Url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwi90cbPor_SAhXHiRoKHe5MAGIQjRwIBw&url=https%3A%2F%2Ffr.pinterest.com%2Fpin%2F286049013812562888%2F&bvm=bv.148747831,d
    Tomoe
    Tomoe
    FémininAge : 24Messages : 13

    Jeu 29 Juin 2017 - 19:05

    merci
    Anonymous
    Invité

    Lun 3 Juil 2017 - 6:38

    merci
    Hasuko77
    Hasuko77
    MasculinAge : 32Messages : 17

    Mar 28 Nov 2017 - 20:32

    merci !
    wally the bully
    wally the bully
    MasculinAge : 25Messages : 58

    Jeu 3 Mai 2018 - 21:57

    lul
    Ookami Shiroi
    Ookami Shiroi
    FémininAge : 32Messages : 90

    Sam 5 Mai 2018 - 16:16

    Merci pour ce partage très sympathique Very Happy
    soulscythe
    soulscythe
    MasculinAge : 34Messages : 19

    Mar 15 Mai 2018 - 20:37

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 11:22