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 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 mets les voiles, que le vent te soit favorable matelot !
    Fayzl4D
    MasculinAge : 20Messages : 84

    le Jeu 24 Juil 2014 - 19:54

    Merci
    Banpaia
    FémininAge : 19Messages : 130

    le Mer 6 Aoû 2014 - 0:41

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

    le Dim 10 Aoû 2014 - 17:44

    classe !
    Kreazen
    FémininAge : 20Messages : 45

    le Lun 11 Aoû 2014 - 0:08

    merci du partage Very Happy



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

    le Mer 20 Aoû 2014 - 3:03

    merci infiniment
    Insanities
    FémininAge : 21Messages : 40

    le Jeu 11 Sep 2014 - 6:23

    Merci !



    chouchounette
    FémininAge : 24Messages : 96

    le Mer 8 Oct 2014 - 15:15

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

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

    le Mar 18 Nov 2014 - 0:44

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

    le Sam 22 Nov 2014 - 20:13

    magnifique !



    petit lu
    FémininAge : 24Messages : 163

    le Ven 28 Nov 2014 - 11:50

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

    le Lun 19 Jan 2015 - 10:24

    Merci



    Chocolakato
    FémininAge : 26Messages : 766

    le Jeu 21 Mai 2015 - 22:02

    Whoa o_o



    Lakia
    FémininAge : 18Messages : 93

    le Dim 24 Mai 2015 - 17:42

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

    le Jeu 25 Juin 2015 - 11:50

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

    le Dim 20 Déc 2015 - 21:48

    Thanks :3
    Kelalin
    FémininAge : 24Messages : 1444

    le Dim 20 Déc 2015 - 21:49

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

    le Lun 21 Déc 2015 - 23:20

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

    le Sam 19 Mar 2016 - 13:11

    Merci
    Rudcash
    MasculinAge : 15Messages : 17

    le Mar 26 Avr 2016 - 9:45

    Merci
    Inoue Musaki
    FémininAge : 27Messages : 147

    le Mar 28 Juin 2016 - 14:15

    merci
    Mariana Greyson
    FémininAge : 18Messages : 39

    le Sam 22 Oct 2016 - 23:43

    Merci
    Neya
    FémininAge : 17Messages : 161

    le Dim 23 Oct 2016 - 12:04

    merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 27 Fév 2017 - 21:18