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 du moment : -45%
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre ...
Voir le deal
339 €

    page d'accueil simple

    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Dim 19 Jan 2014 - 16:53

    Bonjour ! Suite à une commande qui n'a pas abouti je vous propose donc le code.

    Comme vous pouvez le voir, c'est assez simple, et le code est plus un LS de structure selon moi. M'enfin faites en bonne utilisation =3

    Code CSS
    Code:
        /*PA*/
        #entete {
        text-align:center;
          height:200px;
          width:780px;
          margin-bottom:20px;
            border-style:solid;
          border-width:3px;
        }
        #main {
        margin:auto;
          max-width:780px;
        }
        #menu  {
        float:left;
        width:240px;
          padding: 5px;
          height:190px;
       
        }
        #contenu {
          float:left;
          width:500px;
        margin-left:20px;
          height:200px;
        }
        #footer {
          max-width:780px;
        margin:auto;
        }

        #pacadre1, #pacadre2, #pacadre3{
          width:240px;
          height:100px;
          margin-top:20px;
        }
        #pacadre1{
          background-color:cyan;
        float:left;}
        #pacadre2{background-color:red;
        margin-left:20px;
        float:left;}
        #pacadre3{background-color:black;
        margin-left:20px;
        float:left;}

        #pacadre3, #pacadre2, #pacadre1, #contenu, #menu, #entete  {
          border-radius: 25px;
          background-color:#E8F0F4;
          border-color:orange;
          font-color:black;
         
        }

        #pacadre3, #pacadre2, #pacadre1, #contenu, #menu  {
          border-style:dotted;
          border-width:1px;
        }

        #patexte{padding:10px;
        font-family:Georgia;
        text-align:justify;}


        #pafastlink
        {
          display: block;
          padding: 3px;
          margin-bottom: 1px;
          text-align: center;
          background: #E8F0F4;
          color: #A12D2D !important;
          font-weight: bold;
          font-size: 12px;
          text-transform: uppercase;
          transition: 500ms;
          -webkit-transition: 500ms;
          border-radius: 25px;
       
        }

        #pafastlink:hover
        {
          background: #79BAEC;
          color:
        #cc0000 !important;
          transition: 500ms;
          -webkit-transition: 500ms;
        }

    Code HTML
    Code:

        <div id="entete">
        <div id=patexte>TON TEXTE></div>
        </div><div id="main">
        <div id="menu">
        <div id="pafastlink">Lien 1</div><div id="pafastlink">Lien 1</div><div id="pafastlink">Lien 1</div><div id="pafastlink">Lien 1</div><div id="pafastlink">Lien 1</div><div id="pafastlink">Lien 1</div><div id="pafastlink">Lien 1</div>

        </div>
        <div id="contenu">
        <div id=patexte>TON TEXTE></div>
        </div>
        </div><div id="footer"><div id="pacadre1"><div id=patexte>TON TEXTE></div></div><div id="pacadre2"><div id=patexte>TON TEXTE></div></div><div id="pacadre3"><div id="patexte" style="font-size:10px" >© Page d'accueil par <a href="http://pokemon-legends.pokemonrpg.org/">Len Kagamine - PL:R</a> sur <a href="http://www.never-utopia.com/forum" href="_blank">Never Utopia</a></div></div>
        </div>

    Edit A-Lice : Voici un aperçu du rendu et au passage de la souris, le "fond" vert ne fait pas parti du code.

    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.
    katia06
    katia06
    FémininAge : 54Messages : 203

    Lun 27 Jan 2014 - 10:42

    merci pour le tuto
    bisous



    Bowtie
    Bowtie
    FémininAge : 34Messages : 62

    Mar 28 Jan 2014 - 18:03

    Merci pour le partage =)
    Otulissa
    Otulissa
    FémininAge : 27Messages : 24

    Mar 28 Jan 2014 - 20:09

    J'aime bien cette PA, elle est simple et jolie (: merci du partage !
    -Mishirame-
    -Mishirame-
    FémininAge : 30Messages : 26

    Jeu 30 Jan 2014 - 14:41

    coucou et merci
    Zibeline
    Zibeline
    FémininAge : 38Messages : 84

    Mar 4 Fév 2014 - 22:16

    Merci pour le partage  :friends: 
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Mer 12 Fév 2014 - 15:13

    J'aime beaucoup ! Merci !
    Masterweb80
    Masterweb80
    FémininAge : 35Messages : 129

    Mer 12 Fév 2014 - 16:56

    Je regarde.
    Lust Caution
    Lust Caution
    FémininAge : 29Messages : 79

    Sam 15 Fév 2014 - 16:55

    merci =3
    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Lun 17 Fév 2014 - 19:23

    merci Very Happy
    Noizy.
    Noizy.
    MasculinAge : 25Messages : 43

    Lun 17 Fév 2014 - 23:50

    Merci.
    avatar
    Sayate
    FémininAge : 30Messages : 6

    Mar 18 Fév 2014 - 18:44

    Thanks!
    avatar
    Valens
    MasculinAge : 35Messages : 53

    Mer 19 Fév 2014 - 22:35

    Merci pour le partage
    RainOrigami
    RainOrigami
    FémininAge : 24Messages : 22

    Lun 24 Fév 2014 - 21:41

    Merci du partage Very Happy
    Odanno
    Odanno
    MasculinAge : 30Messages : 11

    Mar 25 Fév 2014 - 1:15

    Sympas ton tuto merci!
    avatar
    jotherrien13
    MasculinAge : 31Messages : 34

    Mer 26 Fév 2014 - 10:33

    merci
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 30Messages : 156

    Dim 2 Mar 2014 - 17:56

    Merci beaucoup pour le codage.
    Ryu-Kin
    Ryu-Kin
    FémininAge : 36Messages : 125

    Lun 3 Mar 2014 - 1:30

    j'essaie merci
    Ayane Jun
    Ayane Jun
    FémininAge : 31Messages : 81

    Mer 5 Mar 2014 - 11:59

    Coucou et merci pour le partage surtout ! :)
    Laara
    Laara
    FémininAge : 24Messages : 40

    Mer 5 Mar 2014 - 16:11

    Ouf, enfin un truc facile auquel j'ai compris quelque chose. Merci beaucoup énormément ! ♥
    *Est française, c'est difficile à croire, mais est française*
    Elyade
    Elyade
    FémininAge : 38Messages : 53

    Jeu 6 Mar 2014 - 23:06

    Une PA simple et épurée !
    Merci pour le partage !
    .SaKou.
    .SaKou.
    FémininAge : 28Messages : 57

    Sam 8 Mar 2014 - 17:56

    Merci



    page d'accueil simple 1351184429-smile
    lutecia
    lutecia
    FémininAge : 29Messages : 13

    Mar 11 Mar 2014 - 8:59

    *-* merci à toi !
    Crystal Isiliur
    Crystal Isiliur
    FémininAge : 27Messages : 16

    Dim 23 Mar 2014 - 21:53

    Merci beaucoup du tuto ^^
    emilie84
    emilie84
    FémininAge : 39Messages : 6

    Mer 26 Mar 2014 - 12:33

    merci
    Contenu sponsorisé


      La date/heure actuelle est Sam 27 Avr 2024 - 5:05