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 :
Cartes Pokémon 151 : où trouver le ...
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.
    Anonymous
    Invité

    Lun 21 Avr 2014 - 18:00

    Merci, très chouette, je vais prendre pour mon fofo.
    Frosty Blue
    Frosty Blue
    FémininAge : 28Messages : 162

    Mer 23 Avr 2014 - 16:40

    Merci beaucoup pour cette page d'accueil ^^
    Anonymous
    Invité

    Ven 25 Avr 2014 - 11:00

    Merci du partage x)
    Kallindra
    Kallindra
    FémininAge : 39Messages : 27

    Ven 25 Avr 2014 - 23:00

    Je recherche une nouvelle PA simple et celle ci me parait sympathique.
    Merci à sa créatrice.  :kdo: 



    Accueil Zen - onglets - Page 2 Kalli_46
    MsCrazy.E
    MsCrazy.E
    FémininAge : 26Messages : 183

    Dim 27 Avr 2014 - 20:27

    Merci *-*



    Accueil Zen - onglets - Page 2 Nu_a_b10
    ( Lou' )
    ( Lou' )
    FémininAge : 28Messages : 108

    Dim 27 Avr 2014 - 20:48

      Wahou ** Merci =)
    SNMitsuki
    SNMitsuki
    FémininAge : 26Messages : 63

    Lun 28 Avr 2014 - 17:13

    Merci ! *_*



    Accueil Zen - onglets - Page 2 250032Sanstitre1
    Aya Hanazawa
    Aya Hanazawa
    FémininAge : 32Messages : 72

    Mer 30 Avr 2014 - 18:29

    tres jolie merci
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Mer 30 Avr 2014 - 20:06

    C'est super beau ! Merci beaucoup !
    avatar
    Linéa
    FémininAge : 28Messages : 14

    Jeu 1 Mai 2014 - 16:02

    Merci :)
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Ven 2 Mai 2014 - 22:17

    Merci

    Eden.
    Eden.
    FémininAge : 31Messages : 201

    Dim 4 Mai 2014 - 1:43

    merci ! <3
    Titou2302
    Titou2302
    MasculinAge : 21Messages : 95

    Mar 13 Mai 2014 - 22:04

    Merci ! %)

    Anonymous
    Invité

    Mer 14 Mai 2014 - 16:53

    trop belle  :shock: 
    Yser
    Yser
    FémininAge : 25Messages : 46

    Dim 25 Mai 2014 - 0:23

    Merchi *o*
    avatar
    AQW
    FémininAge : 29Messages : 225

    Mar 27 Mai 2014 - 16:52

    Ohhh très jolie ! Je vais testé ça voir *^*
    Tweety
    Tweety
    FémininAge : 30Messages : 48

    Mar 27 Mai 2014 - 18:44

    merci :)
    avatar
    Eroik04
    MasculinAge : 26Messages : 22

    Dim 1 Juin 2014 - 17:49

    merci
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Dim 1 Juin 2014 - 18:22

    J'arrive pas à la voir dommage! :/
    Lakxi
    Lakxi
    FémininAge : 31Messages : 40

    Lun 2 Juin 2014 - 21:19

    super ! merci !
    chabus
    chabus
    FémininAge : 31Messages : 21

    Mar 3 Juin 2014 - 14:04

    Merci, c'est sublime^^
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Dim 8 Juin 2014 - 18:04

    Merci beaucoup :)



    ....
    Risa
    Risa
    FémininAge : 35Messages : 264

    Jeu 12 Juin 2014 - 18:05

    Merci !
    neverforever
    neverforever
    FémininAge : 23Messages : 12

    Sam 14 Juin 2014 - 16:22

    trop beau merci
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Ven 4 Juil 2014 - 0:05

    mercii



    Contenu sponsorisé


      La date/heure actuelle est Sam 20 Avr 2024 - 15:00