.blanc{color:#FFFFFF;font-weight:bolder;}
.jaune{color:yellow;font-size:12pt;text-decoration: underline; background:none; font-weight: bolder;}
.jaunegros{color:yellow;font-size:25pt;text-decoration: underline; background:none; font-weight: bolder;}
.jaune2{color:yellow;text-decoration: none; background:none; font-weight: bolder;}
.jaune2gros{color:yellow;font-family: Comic ms;text-decoration: underline;font-size:18pt; background:none; font-weight: bold;}
.bleu{color:blue;text-decoration: none; background:yellow;}
.vert{color:green;text-decoration: none; background:none;}
.bleu2{color:navy;text-decoration: none; background: none;}
.police1 { font-family: Comic sans ms;font-size: 30pt;color:black;}
.police3 {font-family: Comic ms;font-size: 13pt; font-weight: bold; color: grey; margin-left: 20px; text-decoration:underline}
.noir2{color:black;text-decoration: none; background:none; font-weight: bolder;}
.noir2gros{color:black;font-family: Comic ms;text-decoration: underline;font-size:18pt; background:none; font-weight: bold;}



a    {
    text-decoration: underline;
       
   }
   
a:hover {
     color: green;
         text-decoration: underline overline ;
        
          }

a img {
      border: none
         }

h2 {
    font-family: Comic ms;
    font-size:12pt;
    color: yellow;
        text-decoration : underline ;
   }

h4 {
  font-family: Ms sherif;
  font-size:10pt;
  color: green;
  font-weight: bold;
   }
   
p:first-letter /* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
   color: navy; /* En bleu */
}

p
{
   text-indent: 20px;
}

body {
  background-color:#E8F0F4 ;
  background-image:none;
  background-repeat:all ; 
  background-position: center;
  background-attachment: fixed;
  width: 760px;
  margin: auto; /* Pour centrer notre page */
  margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
  margin-bottom: 20px;    /* Idem pour le bas du navigateur */
     }

ul
        {
  list-style-image: url("puce_windows.gif");
  list-style-position: outside;
}       
.puce {
  list-style-image: url("puce_windows.gif");
  list-style-position: outside;
        }
.pied_de_page
{
   background-color: #F8F8F8;
   margin-top:80px ;
   color:black;
   text-align: center;
   border: 2px solid black;
}
        
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: none;
   background-repeat: no-repeat;
   margin-bottom: 75px;
   margin-left: 110px ;
}

.menu
{
   float: left; /* Le menu flottera à gauche */
   width: 140px; /* Très important : donner une taille au menu */
   
}

.element_menu
{
   background-image: url("essai_fond.png");
   background-repeat: repeat;
   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
   margin-left: 5px;
   padding-top: 0px;
   padding-bottom: 0px;
}

.element_menu img
{
position:relative;
top: -10px;
margin-left: 0px;
}

}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("puce_windows.gif"); /* On change l'apparence des puces */
   padding-right: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 30px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   padding-top: 10px;
   padding-bottom: 5px;
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* Tous les liens se trouvant dans un menu */
{
   color: navy;
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: red;
   color: yellow;
}

.element_menu_bas
{
bottom: 33px;
position: relative;
left:5px;
}

.corps
{
   width: 600px;
   margin-top: 0px;
   margin-left: 170px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   background-image: url("fond_corps.png");
   background-repeat: repeat; /* Une petite image de fond qui se répètera horizontalement en haut */
}

.corps img
{
position:relative;
top: -10px;
left:-5px;
}

.corps_bas
{
   margin-left: 170px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: -20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
}

.cadre
        {
        border:4px double maroon;
        background-color: black;
        text-align: justify;
        margin: 25px; /* Marge extérieure de 25px */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Bienvenue sur mon site!</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" media="screen" type="text/css" title="indexxav.css" href="indexxav.css" />
               
    </head>
                <body>

<div id="en_tete">
</div>

<div class="menu">
        <div class="element_menu">
                <img src="barre_element_menu.png" title="bordure top" alt="bordure superieure">
                        <br><span class="police3">Qui je suis?</span>
        <ul>
           <li><a href="qui_je_suis/ma_famille.php" title="Les presentations d'abord" >Ma famille</a></li>
           <li><a href="qui_je_suis/ou_j_habite.php" title="Ma maison est en carton...pirouette,cacahuéte!">Ou j'habite</a></li>
           <li><a href="qui_je_suis/mes_amis.php" title="Les ANCIENS amis et les nvx(ça va aller vite!)">My friends</a></li>
        </ul> 
    </div>
<div class="element_menu_bas">
                <img src="bas_menu.png" title="bordure top" alt="bordure superieure">
</div>

    <div class="element_menu">
                <img src="barre_element_menu.png" title="bordure top" alt="bordure superieure">
                        <br><span class="police3">My hobbies</span>
        <ul>
           <li><a href="my_hobbies/jv.php" title="Mon plus fidele compagnon!">Jeux-vid&eacute;os</a></li>
           <li><a href="my_hobbies/le_sport.php" title="Tout est dans le titre">Le sport</a></li>
           <li><a href="my_hobbies/les_autres.php" title="Toutes mes autres passions que je n'ai pu referencer">Les autres!</a></li>
        </ul>
    </div>
<div class="element_menu_bas">
   <img src="bas_menu.png" title="bordure top" alt="bordure superieure">
</div>

    <div class="element_menu">
                <img src="barre_element_menu.png" title="bordure top" alt="bordure superieure">
                        <br><span class="police3">Humour</span>
        <ul>
           <li><a href="humour/images.php" title="images droles et insolites!">Images</a></li>
           <li><a href="humour/videos.php" title="videos toujours plus dingues!">Vid&eacute;os</a></li>
           <li><a href="humour/goodies.php" title="tout ce qui n'est pas imge,ni video mais qui est quand meme drole!">Goodies</a></li>
        </ul>
    </div>
<div class="element_menu_bas">
        <img src="bas_menu.png" title="bordure top" alt="bordure superieure">
</div>
   
    <div class="element_menu">
                <img src="barre_element_menu.png" title="bordure top" alt="bordure superieure">
                        <br><span class="police3">Divers</span>
        <ul>
           <li><a href="divers/divers.php" title="Interdit aux parents!!!">Acces direct!</a></li>
           <li><a href="divers/contact.php" title="Ce que vous pensez de mon site">Contact</a></li>
           <li><a href="admin/accueil.php" title="Espace interdit aux visiteurs">Admin</a></li>
        </ul>
    </div>
<div class="element_menu_bas">
<img src="bas_menu.png" title="bordure top" alt="bordure superieure">
</div>

</div>


<div class="corps">
<img src="barre_menu.png" alt="haut_corps">
essai<br>essai<br>essai<br>essai<br>essai<br>essai
</div>

</body>

</html>