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.

-23%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS 44mm (plusieurs coloris)
199 € 259 €
Voir le deal

    Accueil Zen - onglets

    Aelita
    Aelita
    FémininAge : 31Messages : 278

    Mer 5 Mar 2014 - 15:25

    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é

    Mer 5 Mar 2014 - 15:27

    Très jolie félicitations Wink
    ( Lou' )
    ( Lou' )
    FémininAge : 29Messages : 108

    Dim 16 Mar 2014 - 11:33

    C'est exactement ce que je chercherais ** Merci beaucoup !
    Asaliah
    Asaliah
    FémininAge : 39Messages : 120

    Mar 18 Mar 2014 - 9:07

    Merci !!!



    Accueil Zen - onglets Signu10
    avatar
    .erin
    FémininAge : 29Messages : 28

    Jeu 20 Mar 2014 - 15:53

    merci
    Banpaia
    Banpaia
    FémininAge : 27Messages : 130

    Jeu 20 Mar 2014 - 17:41

    Merci !
    Doku
    Doku
    FémininAge : 29Messages : 70

    Sam 29 Mar 2014 - 16:43

    Joli, merci beaucoup !
    Araki
    Araki
    MasculinAge : 34Messages : 141

    Sam 29 Mar 2014 - 21:03

    Merci !
    Razbeline
    Razbeline
    FémininAge : 24Messages : 23

    Dim 30 Mar 2014 - 12:20

    Merci beaucoup !
    Petit Harfang
    Petit Harfang
    FémininAge : 24Messages : 80

    Dim 30 Mar 2014 - 13:31

    Merci, je vais l'utiliser pour un forum :)
    avatar
    Chromounette
    FémininAge : 26Messages : 10

    Dim 30 Mar 2014 - 16:18

    Merci beaucoup **
    Akito
    Akito
    MasculinAge : 32Messages : 73

    Lun 31 Mar 2014 - 22:11

    merci!
    DaZeli
    DaZeli
    FémininAge : 29Messages : 377

    Mar 1 Avr 2014 - 3:23

    Très jolie, merci!
    £ternal_$unshine
    £ternal_$unshine
    FémininAge : 31Messages : 69

    Ven 4 Avr 2014 - 0:49

    Merci beaucoup pour le partage ♥



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    Accueil Zen - onglets 78216279872221
    MOON LEE
    MOON LEE
    FémininAge : 30Messages : 149

    Ven 4 Avr 2014 - 15:03

    Merci!
    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Lun 7 Avr 2014 - 16:26

    Merci beaucoup du partage, c'est très joli !



    Accueil Zen - onglets 1
    Aki'
    Aki'
    FémininAge : 28Messages : 258

    Mar 8 Avr 2014 - 8:06

    Merci
    NathanaelSane
    NathanaelSane
    FémininAge : 31Messages : 73

    Jeu 10 Avr 2014 - 16:03

    merci :)
    avatar
    Yosh
    MasculinAge : 32Messages : 5

    Jeu 10 Avr 2014 - 23:42

    Merci^^
    nuanciel
    nuanciel
    FémininAge : 33Messages : 139

    Ven 11 Avr 2014 - 8:32

    merci beaucoup :p
    louha
    louha
    FémininAge : 37Messages : 219

    Ven 11 Avr 2014 - 15:59

    Merci !
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 30Messages : 46

    Sam 12 Avr 2014 - 15:06

    J'aime beaucoup, c'est très joli ! *-*
    Toutes mes félicitations :)



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    avatar
    ikichi
    MasculinAge : 36Messages : 5

    Mar 15 Avr 2014 - 16:21

    merci
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Dim 20 Avr 2014 - 19:06

    Très jolie ♥
    GraouxKimii
    GraouxKimii
    FémininAge : 32Messages : 14

    Dim 20 Avr 2014 - 20:42

    Très joli est simple.
    Merci =)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 16:49