body
{
   height: 80%;
   width: 900px;
   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 */
   background-color: black; /* Une petite image de fond pour éviter d'avoir un vieux fond blanc */
}
p,ul,h1,h2,h3,h4
{
  color: white;
  text-align: center;
}
 
/* L'en-tête */
 
#en_tete
{
   width: 900px;
   height: 120px;
   background-image: url("banner_2.jpg" );
   background-repeat: no-repeat;
   margin-bottom: 10px;
    border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
 
/* Le menu */
 
#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 110px; /* Très important : donner une taille au menu */
   height: 80%;
}
 
.element_menu
{
   background-color: rgb(119,0,0);
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   padding: 0px;
   padding-left: 30px;
   margin: 0px;
   margin-bottom: 43px;
   text-align: left;
}
 
.element_menu a
{
   color: #B3B3B3;
   text-decoration: none;
}
 
.element_menu a:hover
{
   text-decoration: underline;
   font-weight: bold;
   color: black;
   
}
 
 
/* Le corps de la page */
 
 
 
#corps h1 /* Tous les titres h1 du corps */
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
 
   height: 12px;
}
 
#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;
 
   background-image: url("images/titre.png" ); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}
 
 
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 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 */
   height: 65%;
   width: 750px;
   
   color: #B3B3B3;
   background-color: #242424; /* Une couleur de fond pour le corps */
   
   border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
   display : block;
}
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
   width: 892px;
   height: 40px;
 
   text-align: center;
 
   color: #B3B3B3;
   background-color: #626262;
 
   font-size: 11px;
   border: 1px solid white;
}
td,th,caption
{
  color: white;
}
td ,th,caption/* Toutes les cellules des tableaux... */
{
   border: 1px solid white; /* ... auront une bordure de 1px */
}
table
{
   border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
table
{
   margin: auto;
   border: 4px outset ;
   border-collapse: collapse;
}
 
 
 
input, textarea
{
   font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
   color: white;
}
 
input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
{
   background-color: black;
}
 
label
{
   color: white; /* Colorer en bleu tous les labels (bah oui, pourquoi pas en bleu ?) */
}
 
legend /* On met un peu plus en valeur les titres des fieldset */
{
   color: white;
   font-weight: bold;
}
 
fieldset
{
   margin-bottom: 15px; /* Une marge pour séparer les fieldset */
   background-color: black;
}
html
{
   height: 100%;
}
 
 
#titre
{
   margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 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 */
   width: 750px;
   
   color: #B3B3B3;
   background-color: #242424; /* Une couleur de fond pour le corps */
   
   border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>.::Umbrella DataBase-Accueil::.</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
   <body>
         <div id="en_tete">
   <!-- Ici on mettra la bannière -->
</div>
 
<div id="menu"> <!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
 
   <div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
       <h3>Umbrella DataBase</h3>
 
     
    <ul>
           <li><a href="index.html">Accueil</a></li> <!-- Liste des liens du sous-menu -->
           <li><a href="info.html">Information</a></li>
           <li><a href="download.html">Télécharger</a></li>
     <li><a href="participer.html">Participer</a></li>
     <li><a href="team.html">L'équipe</a></li>
       </ul>
 
   </div>
 
 
 
   </div>
 
</div>
 
 
<div id="titre">
<h1>Accueil</h1>
</div>
<div id="corps">
 
   
   
 
<p>
       Bonjour et bienvenue sur le site officiel de <strong>Umbrella DataBase</strong><br />
       Je vous souhaite une agréable visite...
   </p>
 
   <h3><center>Qu'est-ce que c'est Umbrella DataBase?</center></h3>    
   <p>
       C'est un logiciel <em>OpenSource</em> de création de base de donnée(BDD).
   </p>
 
 
 
   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
</div>
 
 
<div id="pied_de_page">
   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
   <p>Copyright "Diego Gelin Web And Design" 2008, tous droits réservés</p>
 
</div>
 
   </body>
</html>