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
    avatar
    Halloween
    FémininAge : 23Messages : 9740

    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 !
    avatar
    Fayzl4D
    MasculinAge : 20Messages : 84

    le Jeu 24 Juil - 17:54

    Merci
    avatar
    Banpaia
    FémininAge : 19Messages : 130

    le Mar 5 Aoû - 22:41

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

    le Dim 10 Aoû - 15:44

    classe !
    avatar
    Kreazen
    FémininAge : 20Messages : 45

    le Dim 10 Aoû - 22:08

    merci du partage Very Happy



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

    le Mer 20 Aoû - 1:03

    merci infiniment
    avatar
    Insanities
    FémininAge : 21Messages : 40

    le Jeu 11 Sep - 4:23

    Merci !



    avatar
    chouchounette
    FémininAge : 25Messages : 96

    le Mer 8 Oct - 13:15

    au top merci
    avatar
    Egyfu
    FémininAge : 23Messages : 46

    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.
    avatar
    Arisu
    FémininAge : 28Messages : 108

    le Lun 17 Nov - 23:44

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

    le Sam 22 Nov - 19:13

    magnifique !



    avatar
    petit lu
    FémininAge : 24Messages : 170

    le Ven 28 Nov - 10:50

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

    le Lun 19 Jan - 9:24

    Merci



    avatar
    Chocolakato
    FémininAge : 26Messages : 774

    le Jeu 21 Mai - 20:02

    Whoa o_o



    avatar
    Lakia
    FémininAge : 18Messages : 94

    le Dim 24 Mai - 15:42

    merci ! ♥
    avatar
    Luxuria
    FémininAge : 19Messages : 81

    le Jeu 25 Juin - 9:50

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

    le Dim 20 Déc - 20:48

    Thanks :3
    avatar
    Kelalin
    FémininAge : 24Messages : 1488

    le Dim 20 Déc - 20:49

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

    le Lun 21 Déc - 22:20

    merci :)
    avatar
    £ternal_$unshine
    FémininAge : 24Messages : 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 ♥
    avatar
    Coco-Lapin02
    MasculinAge : 48Messages : 147

    le Sam 19 Mar - 12:11

    Merci
    avatar
    Rudcash
    MasculinAge : 16Messages : 17

    le Mar 26 Avr - 7:45

    Merci
    avatar
    Inoue Musaki
    FémininAge : 27Messages : 147

    le Mar 28 Juin - 12:15

    merci
    avatar
    Mariana Greyson
    FémininAge : 18Messages : 61

    le Sam 22 Oct - 21:43

    Merci
    avatar
    Neya
    FémininAge : 18Messages : 164

    le Dim 23 Oct - 10:04

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Mai - 8:44