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 : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

    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.
    Immortaly
    Immortaly
    FémininAge : 23Messages : 10

    Mer 9 Juil 2014 - 23:04

    MERCIIII
    Ryoma
    Ryoma
    MasculinAge : 36Messages : 420

    Dim 13 Juil 2014 - 14:01

    Merci.
    mitsu
    mitsu
    MasculinAge : 30Messages : 47

    Mer 16 Juil 2014 - 13:03

    Merci du partage :)



    Accueil Zen - onglets - Page 3 100831094517613609
    Mikasa
    Mikasa
    FémininAge : 26Messages : 162

    Lun 21 Juil 2014 - 17:13

    trop jolie!



    Accueil Zen - onglets - Page 3 Miksa210
    Signa:
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Sam 30 Aoû 2014 - 15:57

    J'aime beaucoup, c'est sympa :)
    Pokebip
    Pokebip
    MasculinAge : 26Messages : 69

    Mer 3 Sep 2014 - 13:39

    merci!
    Flaura
    Flaura
    FémininAge : 21Messages : 152

    Dim 28 Sep 2014 - 14:05

    Merci
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Sam 11 Oct 2014 - 21:53

    Merci ♥
    SooJaeHee
    SooJaeHee
    FémininAge : 28Messages : 50

    Jeu 23 Oct 2014 - 17:51

    Merci ^^
    Nevr0z
    Nevr0z
    FémininAge : 35Messages : 74

    Dim 9 Nov 2014 - 22:55

    Merci ! :)
    Pillonis
    Pillonis
    MasculinAge : 27Messages : 11

    Jeu 13 Nov 2014 - 21:19

    Merci, j'en cherchais un comme ça =)
    1charlotte
    1charlotte
    FémininAge : 22Messages : 196

    Ven 14 Nov 2014 - 17:11

    Merci !
    Avallon
    Avallon
    FémininAge : 31Messages : 48

    Ven 14 Nov 2014 - 20:53

    Bravo & merci :)
    Skylighty
    Skylighty
    FémininAge : 94Messages : 100

    Sam 15 Nov 2014 - 20:16

    merciiii
    Whitye
    Whitye
    FémininAge : 38Messages : 13

    Dim 16 Nov 2014 - 20:11

    Tout simple et complet, perso , j'adore.
    Très joli taf ^^
    Merci à toi !
    meolyne
    meolyne
    FémininAge : 40Messages : 74

    Mar 18 Nov 2014 - 12:46

    Merci à toi :)
    Venise
    Venise
    FémininAge : 40Messages : 270

    Jeu 20 Nov 2014 - 21:33

    Oh toi je t'aime et merci ^^
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Mer 26 Nov 2014 - 19:18

    Merci !
    .sapphire
    .sapphire
    FémininAge : 29Messages : 39

    Sam 29 Nov 2014 - 0:00

    Merci pour ce code ♥
    Calypso Luciano
    Calypso Luciano
    FémininAge : 33Messages : 333

    Sam 29 Nov 2014 - 13:30

    merci ^^
    Foxe
    Foxe
    FémininAge : 23Messages : 122

    Sam 29 Nov 2014 - 15:39

    Waouh, sensationnel !



    Accueil Zen - onglets - Page 3 Wet_ha10
    Drizzle
    Drizzle
    FémininAge : 25Messages : 135

    Mer 4 Mar 2015 - 19:54

    Merci ^^.



    Accueil Zen - onglets - Page 3 800961Drizzle
    AsHElsa
    AsHElsa
    FémininAge : 30Messages : 53

    Jeu 16 Avr 2015 - 22:50

    Merci !
    Celuna
    Celuna
    FémininAge : 33Messages : 133

    Ven 17 Avr 2015 - 7:35

    Il est vraiment très joli. Félicitation ... remarquable !
    avatar
    Sépia
    FémininAge : 27Messages : 70

    Sam 25 Avr 2015 - 16:01

    Merci!
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:03