[le code css de la page contact du cv]

[étape1. recopier les régles css de la page accueil]

Coller les régles dans la balise <style> de la page contact et supprimer les deus régles ( p ) et ( .titre )

		
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
   <meta http-equiv="Content-Type" content="text/html;
   charset=iso-8859-1"/>
   <meta name="author" content="votre nom " />
   <meta http-equiv="language" content="fr" /> 
   <meta name="description" content="Le contenu de mon site" />
   <meta name="Keywords" content="motclef1,motclef2,motclef3... " />
   <meta name="robots" content="index,follow" />

  <title>cv des stagiaires | contact</title>

<style type="text/css" media="screen">
   <!--
/* / balice <style> et CSS /*/

/* /////////////////////////////////////
        valeures à 0 pour toute la page
//////////////////////////////////////*/
*{
  padding: 0;
  margin: 0 ;
}   
/* /////////////////////////////////////
                     structure interface
//////////////////////////////////////*/

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#828586;
background-color:#FFFFFF;
padding:0;
margin: 20px 0 ;

}
#global{
width: 760px;
background-color:#FFFFFF;
padding:0;
border:1px solid #a8a994 ;
margin: 0 auto ;
}
#bandeau{
width: 100%;
padding:0px;
margin:0px;
}
#menu{
background-color:#F1ECE5;
height:30px;
padding:0px;
margin:15px 0;
}
#pied{
background-color:#CEC8B7;
}

#contenu{
background:#FFF url(image_site/image_guauche.png) repeat-y; 
margin-bottom:15px
}
/* /////////////////////////////////////
                    supprimer ces deus régles css
//////////////////////////////////////*/
p{
text-align:justify;
background-color:#F1ECE5;
padding:0 10px 10px 10px;
margin-left:240px
}
.titre{
font-size: 16px;
background:#F1ECE5 url(image_site/image_paragraphe.png) repeat-x;
padding:10px 10px 15px 10px;
margin-left:240px;
}
/* //////////////////////////////////////*/ 
h1{
float:left; /*/permet le déplacement de l'élément/*/
font-size: 14px;
background-color:#F1ECE5;
width:205px;
padding:5px 0px 5px 10px;
margin:10px 0 0 0;
}
#bandeau h1{
text-indent:-5000px;
font-size: 20px;
width:auto;
margin:0;
padding:0;
line-height:0;
}
/* /////////////////////////////////////
menu 
//////////////////////////////////////*/
.menu{
font-size: 12px;
font-weight:bold;
list-style-type:none;
padding:0;
margin:0; 
} 
.menu li{
display:inline; /*/transformer les éléments bloc en éléments en ligne/*/
float:left; /*/sortir les éléments du flux/*/
padding:0;
margin:7px 0px 0px 10px;
}
/*/positionner l'icone de l'imprimante /*/
.menu .icone{
display:inline; /*/transformer l' élément bloc en élément en ligne/*/
float:left; /*/sortir l' élément du flux/*/
padding:0;
margin:1px 0px 0px 290px;
}
/* /////////////////////////////////////
liens
//////////////////////////////////////*/
/*/couleur des liens /*/
#menu a {
text-decoration: none; 
color:#a8a994
}
/*/couleur des liens survolés /*/
#menu a:hover{
color:#828586 
}
/*/cadre de l'icone de l'imprimante/*/
#menu a .icone {
border:1px solid #828586 
}  

   -->
</style>

</head>

<body>
 <div id="global">
     <div id="bandeau">
     
       <img  src="image_site/bandeau.png" alt=" image du bandeau " 
       title=" image du bandeau "/>
	   
	    <h1> cv | nom - prenom - age </h1>
   
 </div><div id="menu">

       <ul class="menu">
          <li><a href="index.htm">accueil</a></li>
          <li>|</li>
          <li><a href="contact.htm">contact</a></li>
          <li class="icone"><a href="#" OnClick="window.print();"> 
           <img class="icone" src="image_site/icone.png" 
           alt=" imprimer la page " title=" imprimer la page "/>
          </a></li>
       </ul>
</div>

<div id="contenu">

     <h1>contact</h1>		  
		      
	    <form name="formulaire" action="envoie_mail.php" 
          method="post" class="formulaire" />

          <label>votre nom :</label>  
           <input name="nom" type="text" class="admin_form_bouton" 
            id="nom" maxlength="31" size="40"/>
	 
          <label>votre prénom :</label>
           <input name="prenom" type="text" class="admin_form_bouton" 
            id="prenom" maxlength="31" size="40"/>
	 
	       <label>votre adresse mail  :</label>
	       <input name="mail" type="text" class="admin_form_bouton"
            id="mail" size="40"/> 
		 
          <label>votre message :</label> 
	        <textarea name="message" cols="48" rows="8"
            class="admin_form_bouton"></textarea>
	<br /><br />
		  
	      <input name="annuler" type="reset" value="annuler"
          class="admin_form_bouton" /> 
	     <input name="Input" type="submit" value="valider" 
          class="admin_form_bouton"/>
	 
        </form>	 
		
   </div>
	 
     <div id="pied">
    
       <img  src="image_site/pied.png" alt=" image du pied " 
       title=" image du pied "/>
     </div>
	   
  </div>

</body>
</html>

voir le résultat

[étape2. mettre en forme le fomulaire]

#menu a .icone {
border:1px solid #828586
}
/* /////////////////////////////////////
formulaire
//////////////////////////////////////*/
.formulaire{
font-size: 16px;
background:#F1ECE5 url(image_site/image_paragraphe.png) repeat-x;
padding:10px;
margin-left:240px;
}
label{
display:block;
margin:5px 0;
}
.admin_form_bouton{
background-color:#FFF9F0;
color:#828586;
}

voir le résultat

http://www.neuro-graph.com