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.

-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
Voir le deal

    PA simple façon pirates

    Hancok
    Hancok
    FémininAge : 39Messages : 1466

    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 3 A67g
    Lone wanderer
    Lone wanderer
    MasculinAge : 32Messages : 176

    Mer 18 Mai 2016 - 22:59

    merci !
    Ronron
    Ronron
    FémininAge : 23Messages : 70

    Mer 1 Juin 2016 - 14:53

    Merci !
    Dragonia
    Dragonia
    FémininAge : 35Messages : 24

    Lun 6 Juin 2016 - 21:23

    Très joli ^^
    Madras
    Madras
    FémininAge : 39Messages : 285

    Dim 12 Juin 2016 - 16:43

    Merci
    TenebreuseRP
    TenebreuseRP
    FémininAge : 24Messages : 248

    Jeu 16 Juin 2016 - 13:04

    merci... En espérant que celui la ne bug pas



    Spoiler:

    PA simple façon pirates - Page 3 1469119071-signature
    cali60
    cali60
    FémininAge : 38Messages : 58

    Jeu 16 Juin 2016 - 19:39

    :)
    Bilandie
    Bilandie
    FémininAge : 27Messages : 24

    Sam 16 Juil 2016 - 23:45

    Merci beaucoup^^ c'est pile-poil ce qu'il me fallait ^-^
    Sandym
    Sandym
    FémininAge : 37Messages : 27

    Sam 16 Juil 2016 - 23:47

    merci
    Kai Parker
    Kai Parker
    FémininAge : 25Messages : 154

    Mer 23 Nov 2016 - 21:45

    Merci !!

    Bunny Lune
    Bunny Lune
    FémininAge : 34Messages : 145

    Mer 23 Nov 2016 - 21:51

    Merci beaucoup du partage :)
    Tink ♥
    Tink ♥
    FémininAge : 31Messages : 66

    Jeu 24 Nov 2016 - 13:30

    Merci beaucoup !!
    Monaka
    Monaka
    FémininAge : 31Messages : 137

    Ven 25 Nov 2016 - 10:05

    merci du partage :)
    Delena
    Delena
    FémininAge : 40Messages : 100

    Sam 17 Déc 2016 - 5:57

    Wouah ! Merci !



    PA simple façon pirates - Page 3 8s6x
    Chadot
    Chadot
    FémininAge : 35Messages : 248

    Dim 8 Jan 2017 - 11:56

    Merci



    PA simple façon pirates - Page 3 2mo6y5k
    Necrolythia
    Necrolythia
    FémininAge : 36Messages : 580

    Mar 23 Mai 2017 - 21:44

    wahou, pile ce que je voulais ,merci



    PA simple façon pirates - Page 3 KKEVK8u
    Kizuro hoki
    Kizuro hoki
    MasculinAge : 28Messages : 45

    Dim 4 Juin 2017 - 23:34

    Il est très beau
    Malizia.
    Malizia.
    FémininAge : 28Messages : 90

    Mer 2 Aoû 2017 - 1:27

    merci!
    IReezor
    IReezor
    MasculinAge : 34Messages : 10

    Mer 2 Aoû 2017 - 3:45

    cimer
    destinysnow17
    destinysnow17
    FémininAge : 34Messages : 2

    Mer 11 Oct 2017 - 14:02

    Sublime!
    Siroco
    Siroco
    FémininAge : 24Messages : 68

    Dim 19 Nov 2017 - 21:12

    Joli !



    PA simple façon pirates - Page 3 1signa10
    avatar et signature par TamberElla
    Doriand
    Doriand
    MasculinAge : 33Messages : 91

    Sam 17 Fév 2018 - 15:37

    merci
    missmarie
    missmarie
    FémininAge : 33Messages : 24

    Dim 25 Fév 2018 - 23:32

    Merci ♥ Toute en simplicité et très jolie !
    Noir Black
    Noir Black
    FémininAge : 38Messages : 62

    Dim 15 Avr 2018 - 2:39

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:45