page d'accueil simple

Rappel du premier message :

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.

Merci :)

mrci

Merci beaucoup :3

Merci ( ´ ▽ ` )ﾉ

Merci beaucoup

Merci c'est exactement ce que je recherchait

Merci pour le partage ^^

Merci :)

merci

Trop beau :3

Voyons voir ce que tu proposes Whitemoon

Merci

Sympa merci :)
EDIT : Chez moi elle fonctionne pas ...

Nathaël a écrit:Il faudrait réactualiser la démo du code, le forum de démonstration n'existe plus :)

En effet...

Comme je suis une newbie blonde, j'ai collé le code HTML dans PA / Affichage / Page d'accueil / Généralités / Message sur la Page d'accueil
mais je ne vois que le code...

ou le mettre ce fameux code HTML, svp ?

Merci.

Merci pour le partage !

Merki !

Kawawi

Hello.
Merci pour cette jolie PA. :)

merci :)