AccueilFAQRechercherMembresGroupesS'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.


    La jungle vous accueille \o/

    Partagez
    Halloween
    FémininAge : 22Messages : 9733

    le Mer 9 Juil - 12:54

    Plop,

    Un nouveau LS basé sur une demande de Filou, c'est la jungle *-*

    Comme toujours, un merci donne accès aux codes, ça fait toujours plaisir et ça prend pas 20 minutes de vos vies =3

    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Page d'accueil


    HTML & CSS ▬ Les ronds au survol de l'hippopotame représentent le staff

    Aperçu ▬ Simple & Au survol de l’hippo'


    CSS
    Code:
        /******************************************** PA ********************************************/

        .contexte_PA {
          width: 650px;
          height: 100px;
          overflow: auto;
          padding: 20px;
          text-align: justify;
          background-color: #897550;
          border: 2px solid #3E5728;
          color: #3F3625;
          position: relative;
          top: -2.1em;
          left: 0.15em;
        }

        .navigation {
          width: 150px;
          height: 170px;
          padding: 20px;
          overflow: auto;
          text-align: justify;
          background-color: #897550;
          border: 2px solid #3E5728;
          color: #3F3625;
          position: relative;
          top: -3.5em;
        }

        .annonces {
          width: 150px;
          height: 170px;
          padding: 20px;
          overflow: auto;
          text-align: justify;
          background-color: #897550;
          border: 2px solid #3E5728;
          color: #3F3625;
          position: relative;
          top: -3.5em;
        }

        .top_sites {
          width: 260px;
          height: 70px;
          padding: 10px;
          background-color: #897550;
          border: 2px solid #3E5728;
          color: #3F3625;
          position: relative;
          top: -3.5em;
        }

        .prédéfinis {
          width: 260px;
          padding: 10px;
          background-color: #897550;
          border: 2px solid #3E5728;
          color: #3F3625;
          position: relative;
          top: -3.5em;
        }

        .partenaires {
          width: 650px;
          height: 40px;
          overflow: auto;
          padding: 20px;
          text-align: justify;
          background-color: #897550;
          border: 2px solid #3E5728;
          color: #3F3625;
          position: relative;
          top: -3.5em;
        }

        .titres_PA {
          font-family: 'Lemon', cursive;
          font-size: 18px;
          color: #000000;
          border: none;
          z-index: 1;
          text-align: left;
          background: none;
          position: relative;
          left: 1em;
          top: -0.1em;
          display: block;
        }

        /* Info-bulle du staff */
        a.info{
          position: relative;
          z-index: 24;
          text-decoration: none;
        }
       
        a.info:hover{
          z-index: 25;
        }
       
        a.info span{
          display: none;
        }
       
        /* Intérieur de l'info-bulle (apparition des ronds du staff) */
        a.info:hover span{
          display: block;
          position: absolute;
          top: -26.7em;
          left: 0em;
          width: 400px;
          font-weight: none;
          padding: 5px;
          background-color: #A38E61;
        }

        /******************************************** FIN PA ********************************************/


    PA
    Code:
     <div style="background-color: rgb(163, 142, 97);">
       
       <table>
          
          <tbody>
             
             <tr>
                
                <td>
                    <img src="http://img15.hostingpics.net/pics/493530Branche.png" style="height: 500px; position: relative; left: -0.1em; top: -23.2em;" />
                </td>
                
                <td>
                   
                   <p align="right">
                       <img src="http://img15.hostingpics.net/pics/951077Vautour.png" style="width: 400px;" />
                   </p>
                    <fieldset class="contexte_PA"> <legend class="titres_PA"> Contexte</legend> <span style="display: block;">Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. Tullius latebrosis nullis ideoque etiam confinia homines occultantes plerumque confinia plerumque eum cum iniectantes avertebant per quae ut velut etiam nauticos ad viles etiam ne cum fame merces cum etiam repugnantibus noctes cum parcendo omnibus tum pastae fame quidem impeditis convallibusque viles latebrosis nullis per mari observabant repugnantibus mari luna diu cedentium nauticos merces et per loca per homines passibus convallibusque ubi monitae et sunt haecque instar ubi Tullius ait occultantes cum repugnantibus nihil per observabant ait ulli cornuta quae et etiam pastae et per noctes plerumque effusos nihil petivere arduis ad noctes viis obtruncatis cum mari ferae observabant confinia. <a href="#" style="color: #3F3625 !important;">La suite ?</a> </span></fieldset> <br />
                   <table>
                      
                      <tbody>
                         
                         <tr>
                            
                            <td>
                                <fieldset class="navigation"> <legend class="titres_PA"> Navigation </legend> <span style="display: block;">UN </span></fieldset>
                            </td>
                            
                            <td>
                                <fieldset class="annonces"> <legend class="titres_PA">Annonces </legend> <span style="display: block;">Annonces </span></fieldset>
                            </td>
                            
                            <td>
                                <fieldset class="top_sites"> <legend class="titres_PA"> Top-sites </legend> <span style="display: block; text-align: center;"> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a><br /><a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/36604430x29px.png" style="width: 25px;" /></a> </span> </fieldset> <fieldset class="prédéfinis"> <legend class="titres_PA"> Prédéfinis </legend> <span style="display: block; text-align: center;"> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/45745540x70px.png" /></a> </span> </fieldset>
                            </td>
                            
                         </tr>
                         
                      </tbody>
                      
                   </table>
                    <fieldset class="partenaires"> <legend class="titres_PA"> Partenaires</legend> <span style="display: block; text-align: center;"> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> <a href="#" target="_blank"><img src="http://img15.hostingpics.net/pics/923111100x35px.png" /></a> </span> </fieldset> <a class="info"><img src="http://img15.hostingpics.net/pics/346481Hippo1.png" /><span> <nobr><img src="http://img15.hostingpics.net/pics/907645Hippo2.png" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /> <img src="http://img15.hostingpics.net/pics/115687imagestaff.png" style="position: relative; top: -10em;" /></nobr> </span></a>
                </td>
                
             </tr>
             
          </tbody>
          
       </table>
       
       <p style="font-size: 9px; position: relative; top: -1.5em; color: #463C28;" align="right">
           © Halloween sur <a href="http://www.never-utopia.com/" style="color: #463C28 !important; text-decoration: none !important;">Never Utopia</a>
       </p>
    </div><link href="http://fonts.googleapis.com/css?family=Lemon" rel="stylesheet" type="text/css" />






    Je mets les voiles, que le vent te soit favorable matelot !
    Fayzl4D
    MasculinAge : 20Messages : 84

    le Jeu 24 Juil - 17:54

    Merci
    Banpaia
    FémininAge : 19Messages : 127

    le Mar 5 Aoû - 22:41

    AH génial ! J'adore, merci. :)
    Kiki85
    MasculinAge : 22Messages : 372

    le Dim 10 Aoû - 15:44

    classe !
    Kreazen
    FémininAge : 20Messages : 45

    le Dim 10 Aoû - 22:08

    merci du partage Very Happy



    Arrow
    Féhéla
    FémininAge : 43Messages : 232

    le Mer 20 Aoû - 1:03

    merci infiniment
    Insanities
    FémininAge : 21Messages : 40

    le Jeu 11 Sep - 4:23

    Merci !



    chouchounette
    FémininAge : 24Messages : 96

    le Mer 8 Oct - 13:15

    au top merci
    Egyfu
    FémininAge : 23Messages : 31

    le Dim 12 Oct - 13:33

    J'aime beaucoup le système de l’hippopotame qui ouvre la gueule pour montrer le staff ! C'est original Very Happy
    Simple, mais jolie comme P.A !
    Merci pour ces codes :3.
    Arisu
    FémininAge : 28Messages : 108

    le Lun 17 Nov - 23:44

    Merci ! Very Happy
    Foxe
    FémininAge : 16Messages : 122

    le Sam 22 Nov - 19:13

    magnifique !



    petit lu
    FémininAge : 24Messages : 163

    le Ven 28 Nov - 10:50

    Merci du partage, la pa est trop belle
    Angy38
    FémininAge : 46Messages : 201

    le Lun 19 Jan - 9:24

    Merci



    Chocolakato
    FémininAge : 26Messages : 764

    le Jeu 21 Mai - 20:02

    Whoa o_o



    Lakia
    FémininAge : 18Messages : 87

    le Dim 24 Mai - 15:42

    merci ! ♥
    Luxuria
    FémininAge : 19Messages : 72

    le Jeu 25 Juin - 9:50

    Merciii ^-^
    Yelonia
    FémininAge : 22Messages : 46

    le Dim 20 Déc - 20:48

    Thanks :3
    En ligne
    Kelalin
    FémininAge : 24Messages : 1423

    le Dim 20 Déc - 20:49

    Merci pour le partage ! (●´∀`●)
    bubulle
    FémininAge : 29Messages : 76

    le Lun 21 Déc - 22:20

    merci :)
    £ternal_$unshine
    FémininAge : 23Messages : 69

    le Jeu 24 Déc - 1:26

    J'adore cette PA, elle correspond parfaitement au thème de mon forum. Razz
    merci :)



    Ce Joli Kit a été créé par ma coupine Soihra ♥
    Coco-Lapin02
    MasculinAge : 48Messages : 147

    le Sam 19 Mar - 12:11

    Merci
    Rudcash
    MasculinAge : 15Messages : 17

    le Mar 26 Avr - 7:45

    Merci
    Inoue Musaki
    FémininAge : 27Messages : 147

    le Mar 28 Juin - 12:15

    merci
    Mariana Greyson
    FémininAge : 18Messages : 39

    le Sam 22 Oct - 21:43

    Merci
    Neya
    FémininAge : 17Messages : 161

    le Dim 23 Oct - 10:04

    merci
    Contenu sponsorisé

    Aujourd'hui à 17:11


      La date/heure actuelle est Lun 16 Jan - 17:11