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 :
PNY – Carte graphique – GeForce™ RTX 4080 SUPER 16Go
984.99 €
Voir le deal

    PA simple façon pirates

    Hancok
    Hancok
    FémininAge : 40Messages : 1492

    Ven 24 Oct 2014 - 10:55

    Rappel du premier message :

    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 - Page 2 A67g
    The Shiya
    The Shiya
    FémininAge : 34Messages : 77

    Jeu 16 Avr 2015 - 16:37

    merci



    PA simple façon pirates - Page 2 Test10
    Elwin Askal
    Elwin Askal
    MasculinAge : 31Messages : 7

    Jeu 23 Avr 2015 - 15:34

    PA très sympa, merci beaucoup
    Hancok
    Hancok
    FémininAge : 40Messages : 1492

    Jeu 23 Avr 2015 - 15:37

    Hello, de rien contente qu'elle vous plaît et qu'elle soit utile^^




    PA simple façon pirates - Page 2 A67g
    Kitty Kat.
    Kitty Kat.
    FémininAge : 30Messages : 86

    Jeu 23 Avr 2015 - 17:19

    J'aime beaucoup ! Very Happy
    Dydy
    Dydy
    FémininAge : 34Messages : 493

    Ven 12 Juin 2015 - 12:57

    Merci du partage ^^



    PA simple façon pirates - Page 2 27978_signature_never_utopia_dydy_2
    Snape.
    Snape.
    FémininAge : 27Messages : 55

    Sam 13 Juin 2015 - 14:41

    Merci du partage



    PA simple façon pirates - Page 2 Tumblr_mqz0udGEEI1sx2peuo4_250PA simple façon pirates - Page 2 Tumblr_mqz0udGEEI1sx2peuo6_250
    picka234
    picka234
    FémininAge : 59Messages : 636

    Lun 15 Juin 2015 - 9:06

    merci
    Afterglow
    Afterglow
    FémininAge : 29Messages : 138

    Mar 16 Juin 2015 - 14:07

    J'aime beaucoup merci



    How do you get up from an all time low?
    avatar
    Hane
    FémininAge : 26Messages : 70

    Lun 29 Juin 2015 - 1:57

    j'aime beaucoup! Merci beaucoup
    Pooni
    Pooni
    FémininAge : 26Messages : 39

    Lun 6 Juil 2015 - 21:12

    Simple mais très sympa !
    Merci beaucoup !
    lΔω
    lΔω
    FémininAge : 26Messages : 105

    Mar 7 Juil 2015 - 10:44

    Merci du partage ^^
    Nighthayah
    Nighthayah
    FémininAge : 37Messages : 69

    Jeu 30 Juil 2015 - 0:42

    Très joli, merci !
    Nominia
    Nominia
    FémininAge : 33Messages : 67

    Jeu 30 Juil 2015 - 12:29

    Merci !
    PuLs!oN
    PuLs!oN
    MasculinAge : 28Messages : 228

    Mar 4 Aoû 2015 - 1:37

    merci !
    Anonymous
    Invité

    Mar 4 Aoû 2015 - 14:12

    Merci ! ヽ(;▽;)ノ
    Pentacle
    Pentacle
    MasculinAge : 32Messages : 64

    Jeu 6 Aoû 2015 - 22:16

    merci
    Zoé
    Zoé
    FémininAge : 25Messages : 189

    Mar 17 Nov 2015 - 13:56

    merci



    PA simple façon pirates - Page 2 274643signaaaa
    Harmonia
    Harmonia
    FémininAge : 26Messages : 110

    Mer 23 Déc 2015 - 1:18

    Merci beaucoup *^*
    bubulle
    bubulle
    FémininAge : 37Messages : 76

    Dim 10 Jan 2016 - 16:58

    merci
    Sodabi
    Sodabi
    MasculinAge : 30Messages : 5

    Sam 5 Mar 2016 - 13:40

    Merci beaucouuuuuup
    Rodeuse
    Rodeuse
    FémininAge : 31Messages : 142

    Dim 20 Mar 2016 - 16:30

    Superbe merci du partage.
    Lovelymp
    Lovelymp
    FémininAge : 45Messages : 116

    Lun 21 Mar 2016 - 12:19

    simple et efficace j’adhère merci beaucoup;)
    Ennie
    Ennie
    FémininAge : 60Messages : 101

    Lun 11 Avr 2016 - 15:59

    Merci
    Anonymous
    Invité

    Ven 13 Mai 2016 - 15:51

    Beau travail Very Happy Merci du partage Very Happy
    Inoue Musaki
    Inoue Musaki
    FémininAge : 35Messages : 147

    Ven 13 Mai 2016 - 17:12

    merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 13 Oct 2024 - 12:44