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 à ne pas rater :
Enceinte portable JBL Clip 4 Bluetooth Noir à 29€
29 €
Voir le deal

    PA simple façon pirates

    Hancok
    Hancok
    FémininAge : 40Messages : 1497

    Ven 24 Oct 2014 - 10:55

    Bonjour, je vous propose (ma toute première) PA simple qui peu aller partout en changeant les couleurs et images. En espèrent qu'elle vous sera utile.

    Voici pour vous un aperçu de la PA => Click et avec l'infobulle => Click


    L' HTML: (code à mettre sur la page d'accueil)

    Code:
    Code:
        <div class="cadre-principal">
                         
        <div align="center">
        <strong><em><span style="font-size: 18px;">BIENVENUE SUR "NOM DU FORUM"</span></em></strong>
        </div>
                                   
        <div class="contexte">
                                                                         
        <table>
                                                                         
        <tbody>
                                                                         
        <tr>
                                                                         
        <td>
                                                                         
        <div class="titre2">
                                          Le contexte                                 
        </div>
                                     
        <div style="overflow:auto;width:495px;height:145px;">
                    Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.        Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.           
        </div>
                                                                 
        </td>
                                                                         
        </tr>
                                                                         
        </tbody>
                                                                         
        </table>
                                                                         
        </div>
                                                           
        <div class="staff">
                                                                       
        <table>
                                                                       
        <tbody>
                                                                       
        <tr>
                                                                       
        <td>
                                                                       
        <div class="titre2">
                                          le staff                               
        </div>
                             
        <div class="infobulle">
                        <img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_14.png" /><span>Pseudo</span>               
        </div>
                         
        <div class="infobulle">
                        <img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_15.png" /><span>Pseudo</span>               
        </div>
                           
        <div class="infobulle">
                        <img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_16.png" /><span>Pseudo</span>               
        </div>
                      <br />     
        <div class="infobulle">
                        <img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_17.png" /><span>Pseudo</span>               
        </div>
                         
        <div class="infobulle">
                        <img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_18.png" /><span>Pseudo</span>               
        </div>
                             
        <div class="infobulle">
                        <img src="http://i39.servimg.com/u/f39/11/27/81/85/icone_19.png" /><span>Pseudo</span>               
        </div>
                                                       
        </td>
                                                                       
        </tr>
                                                                       
        </tbody>
                                                                       
        </table>
                                                           
        </div>
                                                           
        <div class="crédit">
                                                               
        <table>
                                                               
        <tbody>
                                                               
        <tr>
                                                               
        <td>
                                                               
        <div class="titre2">
                                      Les crédits                           
        </div>
                        <br />Forum @...  <br /> PA @<a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Hancok</a> <br />Catégorie @... <br /> Qeel @... <br /> Design @...  <br /> 
        </td>
                                                               
        </tr>
                                                               
        </tbody>
                                                               
        </table>
                                                           
        </div>
                                                         
        <div class="tops">
                                                                         
        <table>
                                                                         
        <tbody>
                                                                         
        <tr>
                                                                         
        <td>
                                                                         
        <div class="titre2">
                                          les top sites                                 
        </div>
                              <a target="_blank" href=" lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a>  <br /> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a> <a target="_blank" href="lien du site"><img class="image-top" src="http://i39.servimg.com/u/f39/11/27/81/85/annonc19.png" /></a>                                                                                                                                                       
        </td>
                                                                         
        </tr>
                                                                         
        </tbody>
                                                                         
        </table>
                                                                         
        </div>
                                                       
        <div class="image">
                                                                         
        <table>
                                                                         
        <tbody>
                                                                         
        <tr>
                                                                         
        <td>
                                                                         
        <div class="titre2">
                                          <img style="width: 150px; height: 150px;" src="http://i39.servimg.com/u/f39/11/27/81/85/3836711.png" />                                 
        </div>
                                                                         
        </td>
                                                                         
        </tr>
                                                                         
        </tbody>
                                                                         
        </table>
                                                                         
        </div>
                                           
        <div class="new">
                                                                         
        <table>
                                                                         
        <tbody>
                                                                         
        <tr>
                                                                         
        <td>
                                                                         
        <div class="titre2">
                                          Les nouveautés                                 
        </div>
                                   
        <div style="overflow:auto;width:210px;height:145px;">
                            ¤00/00/00: ... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />¤00/00/00 <br />¤00/00/00                 
        </div>
                                                                   
        </td>
                                                                         
        </tr>
                                                                         
        </tbody>
                                                                         
        </table>
                                                                         
        </div>
                                         
        <div class="partenaire">
                                                                         
        <table>
                                                                         
        <tbody>
                                                                         
        <tr>
                                                                         
        <td>
                                                                         
        <div class="titre2">
                                          Les Partenaires                                 
        </div>
                             
        <marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
                          <a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>-<a href="lien du forum"><img src="http://i39.servimg.com/u/f39/11/27/81/85/logo_811.png" /></a>         
        </marquee>
                                                                     
        </td>
                                                                         
        </tr>
                                                                         
        </tbody>
                                                                         
        </table>
                                                                         
        </div>
        </div>

    Code CSS:
    Code:
    /*....Page d'accueil....*/
    .cadre-principal {
      display:block;
      background-color:#302117 ;
      background-repeat: no-repeat;
      background-position: top center;
      width:800px;height:480px;}
    .contexte {
    float:left;
    display:block;
    background: #634f3d;
    height:150px;
    width:500px;
    position:relative;
    top: 40px; left: 20px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-right: 3px solid #434343;
    border-left: 3px solid #434343;
    }
    .staff {
    float:left;
    display:block;
    background: #634f3d;
    height:150px;
    width:200px;
    position:relative;
    top: 40px; left: 30px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-right: 3px solid #434343;
    border-left: 3px solid #434343;
    }
    .crédit {
    float:left;
    display:block;
    background: #634f3d;
    height:150px;
    width:100px;
    padding:5px;
    position:relative;
    top: 50px; left: 20px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-right: 3px solid #434343;
    border-left: 3px solid #434343;
    }
    .tops {
    float:left;
    display:block;
    background: #634f3d;
    height:150px;
    width:170px;
    padding:5px;
    position:relative;
    top: 50px; left: 30px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-right: 3px solid #434343;
    border-left: 3px solid #434343;
    }
    .image {
    float:left;
    display:block;
    background: ;
    height:150px;
    width:150px;
    padding:5px;
    position:relative;
    top: 50px; left: 40px;
    }
    .new {
    float:left;
    display:block;
    background: #634f3d;
    height:150px;
    width:215px;
    padding:5px;
    position:relative;
    top: 50px; left: 50px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-right: 3px solid #434343;
    border-left: 3px solid #434343;
    }
    .partenaire {
    float:left;
    display:block;
    background: #634f3d;
    height:50px;
    width:705px;
    padding:5px;
    position:relative;
    top: 60px; left: 20px;
    border-top: 1px dotted;
    border-bottom: 1px dotted;
    border-right: 3px solid #434343;
    border-left: 3px solid #434343;
    }
    .titre2 {
      color:#B38600;font-size:18px;
      text-align:center;text-shadow:1px 2px 1px #000;font-style: italic;
      font-family: 'Cinzel', serif;
      font-weight: 700;
      margin-top:-20px;}
    div.infobulle{
    position: relative;
    float: left ;
    }

    div.infobulle span{
    display: none;
    }

    div.infobulle:hover{
    background: none;
    z-index: 999;
    }

    div.infobulle:hover span
    {
    display: inline;
    position: absolute;
    top: 10px; left: 6px;
    }
    div.infobulle span{
      background: #434343;
      width: 45px;
      height: 45px;
      border: solid 1px black;}
    /*....fin page d'accueil....*/

    Vous pouvez également mettre une image en fond au lieu d'une couleur. Pour cela aller dans le CSS => cadre principal => background-color:#302117; , le remplacer par background-image: url ('lien de l'image'); . N'oublier pas le point-virgule à la fin, c'est important.


    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.




    PA simple façon pirates A67g
    Chocolakato
    Chocolakato
    FémininAge : 34Messages : 837

    Dim 26 Oct 2014 - 16:25

    Elle est super cool <3



    Hancok
    Hancok
    FémininAge : 40Messages : 1497

    Dim 26 Oct 2014 - 16:53

    Merci Very Happy .




    PA simple façon pirates A67g
    Anonymous
    Invité

    Jeu 30 Oct 2014 - 14:27

    Hey !

    Merci du partage ! En effet, c'est bien sympathique tout ça ! :3

    Je déplace Wink
    Dastan
    Dastan
    MasculinAge : 40Messages : 111

    Jeu 30 Oct 2014 - 17:49

    merci!
    Rynkka
    Rynkka
    FémininAge : 25Messages : 120

    Ven 31 Oct 2014 - 16:41

    Merci!



    PA simple façon pirates 48861711
    Féhéla
    Féhéla
    FémininAge : 51Messages : 238

    Dim 2 Nov 2014 - 17:07

    merci j'aime bien
    Hancok
    Hancok
    FémininAge : 40Messages : 1497

    Dim 9 Nov 2014 - 14:14

    Merci et de rien contente qu'elle vous serve :)




    PA simple façon pirates A67g
    Loukoum
    Loukoum
    FémininAge : 31Messages : 1506

    Dim 23 Nov 2014 - 22:51

    Merci du partage, trop mignon *-*



    Socrazy
    Socrazy
    FémininAge : 36Messages : 11

    Dim 14 Déc 2014 - 20:48

    Jolie et Originale, merci Wink
    Sid'
    Sid'
    MasculinAge : 34Messages : 73

    Dim 14 Déc 2014 - 21:11

    Merci !
    lexia2mars
    lexia2mars
    FémininAge : 25Messages : 15

    Dim 21 Déc 2014 - 18:06

    J'aime beaucoup ! *^* Merci !
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Mer 24 Déc 2014 - 17:41

    Très joli, merci !
    Hana Evali
    Hana Evali
    FémininAge : 34Messages : 195

    Jeu 1 Jan 2015 - 21:07

    Merci !



    PA simple façon pirates Ye49
    Carcajou
    Carcajou
    FémininAge : 35Messages : 59

    Jeu 1 Jan 2015 - 22:09

    Oh c'est joli ça ! Merci et bravo !
    Risa
    Risa
    FémininAge : 36Messages : 264

    Dim 11 Jan 2015 - 23:51

    Joli travail, j'aime beaucoup cette PA aussi :)
    Filou
    Filou
    FémininAge : 33Messages : 162

    Mer 14 Jan 2015 - 14:46

    Très sympathique Very Happy
    Adorable ce petit coffre ^^
    Hayate747
    Hayate747
    MasculinAge : 35Messages : 196

    Dim 1 Fév 2015 - 20:41

    Merci !!
    Sasha57
    Sasha57
    FémininAge : 30Messages : 35

    Dim 1 Fév 2015 - 22:20

    Merciii !
    okeane
    okeane
    FémininAge : 34Messages : 93

    Lun 2 Fév 2015 - 1:55

    MERCI :)
    Haniwa
    Haniwa
    FémininAge : 30Messages : 206

    Jeu 5 Fév 2015 - 11:25

    Merci
    Luxuria
    Luxuria
    FémininAge : 27Messages : 83

    Lun 16 Fév 2015 - 21:01

    Merci
    Celuna
    Celuna
    FémininAge : 34Messages : 133

    Mer 11 Mar 2015 - 13:42

    Merci beaucoup pour le partage
    Neilia
    Neilia
    FémininAge : 33Messages : 101

    Jeu 12 Mar 2015 - 17:42

    merci ^^
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Mer 15 Avr 2015 - 22:34

    sympa
    Contenu sponsorisé


      La date/heure actuelle est Lun 2 Déc 2024 - 12:14