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 : 9741

    le Mer 9 Juil 2014 - 14: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 déménage sur NMD o/
    Mon codebook
    avatar
    Fayzl4D
    MasculinAge : 21Messages : 84

    le Jeu 24 Juil 2014 - 19:54

    Merci
    avatar
    Banpaia
    FémininAge : 20Messages : 130

    le Mer 6 Aoû 2014 - 0:41

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

    le Dim 10 Aoû 2014 - 17:44

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

    le Lun 11 Aoû 2014 - 0:08

    merci du partage Very Happy



    Arrow
    avatar
    Féhéla
    FémininAge : 44Messages : 233

    le Mer 20 Aoû 2014 - 3:03

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

    le Jeu 11 Sep 2014 - 6:23

    Merci !



    avatar
    chouchounette
    FémininAge : 25Messages : 96

    le Mer 8 Oct 2014 - 15:15

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

    le Dim 12 Oct 2014 - 15: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 : 29Messages : 109

    le Mar 18 Nov 2014 - 0:44

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

    le Sam 22 Nov 2014 - 20:13

    magnifique !



    avatar
    petit lu
    FémininAge : 25Messages : 170

    le Ven 28 Nov 2014 - 11:50

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

    le Lun 19 Jan 2015 - 10:24

    Merci



    avatar
    Chocolakato
    FémininAge : 27Messages : 785

    le Jeu 21 Mai 2015 - 22:02

    Whoa o_o



    avatar
    Lakia
    FémininAge : 19Messages : 97

    le Dim 24 Mai 2015 - 17:42

    merci ! ♥
    avatar
    Luxuria
    FémininAge : 20Messages : 83

    le Jeu 25 Juin 2015 - 11:50

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

    le Dim 20 Déc 2015 - 21:48

    Thanks :3
    avatar
    Kelalin
    FémininAge : 25Messages : 1676

    le Dim 20 Déc 2015 - 21:49

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

    le Lun 21 Déc 2015 - 23:20

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

    le Jeu 24 Déc 2015 - 2: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 : 49Messages : 147

    le Sam 19 Mar 2016 - 13:11

    Merci
    avatar
    Rudcash
    MasculinAge : 16Messages : 17

    le Mar 26 Avr 2016 - 9:45

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

    le Mar 28 Juin 2016 - 14:15

    merci
    avatar
    Mariana Greyson
    FémininAge : 19Messages : 68

    le Sam 22 Oct 2016 - 23:43

    Merci
    avatar
    Neya
    FémininAge : 18Messages : 164

    le Dim 23 Oct 2016 - 12:04

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 0:05