28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voila j'ai un probleme avec mon pied de page et mon menu, le pied de page ne veut pas allez plus bas que mon menu mais passe par dessus!

pour que ce soit plus clair voici mon adresse http://pressagny.canin.free.fr

et les codes!
le css
[code]body
{
   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-image: url("fond/fondecran.jpg") ;
   font-size: 15px;   
}
/* L'en-tête */

#en_tete
{
   width: 900px;
   height: 100px;
   background-image: url("fond/backround.jpg");
   background-repeat: repeat-x; /* Le fond ne se répètera que sur la première colonne, verticalement */
   margin-bottom: 10px;
   text-align: center;
   border: 2px solid black;
}

#image_header {
background: url(logo/logo_club.jpg) no-repeat;
position: absolute;
top: 10px;
left: 10px;
}

/* Le menu */

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 170px;  /*Très important : donner une taille au menu */
  height : 35px;
  margin: 0;
  padding : 0;
  list-style-type : none;
}

.element_menu
{
   background-image: url("fond/backround.jpg");
   background-repeat: repeat-x;
   
   border: 2px solid black;
   
   margin-bottom: 10px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
* Quelques effets sur les menus */

.element_menu li
{
	float : left;
	text-align : center;
}

.element_menu h3 /* Tous les titres de menus */
{    
   color: black;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-type: none; /* On change l'apparence des puces */
   
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   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: black;
   text-decoration: none;
   /*width : 130px;
   line-height : 25px;
   font-size :1.2em;
   font-weight: bold;
   letter-spacing : 2px;
   color : black;
   display : block;*/
   
}

.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
   color: blue;
}
/* Le corps de la page */

#corps
{
   margin-left: 190px; /* 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 */
   
   color: black;
   background-color: #626262; /* Une couleur de fond pour le corps */
   background-image: url("fond/backround.jpg");
   background-repeat: repeat-y-x; /* Une petite image de fond qui se répètera horizontalement en haut */
   
   border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#corps h1 /* Tous les titres h1 du corps */
{
   color: black;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;   
   padding-left: 30px;
   color: black;
   text-align: left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   position: relative;
   bottom:0px; 
   text-align: center;
   font-size: 11px;
   color: black;
   background-color: #626262;
   background-image: url("fond/backround.jpg");
   background-repeat: repeat-x;
   
   border: 2px solid black;
}


et le html
[/code]
<!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>Amicale Canine de Pressagny</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>

       <!-- L'en-tête -->

       <div id="en_tete">
	<img alt="logo club" src="logo/logo_club.jpg" width="100" height="100">
      Site en construction
	   Toutes nos F&eacute;licitations &agrave; TEDDY et UKE pour avoir remport&eacute; la finale du GPF 2006
       </div>

       <!-- Les menus -->

       <div id="menu">        
           <div class="element_menu">
               <h3>Le Club</h3>
               <ul>
                   <li><a href="page1.html">Historique</a></li>
                   <li><a href="page2.html">Le bureau</a></li>
                   <li><a href="page3.html">Les horaires</a></li>
				   <li><a href="page3.html">Plan d'accés</a></li>
               </ul>
           </div>
       
           <div class="element_menu">
               <h3>Agility</h3>
               <ul>
                   <li><a href="page4.html">Le réglement</a></li>
                   <li><a href="page5.html">Manifestations du club</a></li>
                   <li><a href="page6.html">Résultats du club</a></li>
				   <li><a href="page6.html">Les agilitistes</a></li>
               </ul>
           </div> 
		   
           <div class="element_menu">
               <h3>Ring</h3>
               <ul>
                   <li><a href="page4.html">Le réglement</a></li>
                   <li><a href="page5.html">Manifestations du club</a></li>
                   <li><a href="page6.html">Résultats du club</a></li>
				   <li><a href="page6.html">Les ringeurs</a></li>
               </ul>
           </div>

		   <div class="element_menu">
               <h3>Pistage</h3>
               <ul>
                   <li><a href="page4.html">Le réglement</a></li>
                   <li><a href="page5.html">Manifestation du club</a></li>
                   <li><a href="page6.html">Résultats du club</a></li>
				   <li><a href="page6.html">Les pisteurs</a></li>
               </ul>
           </div>
       </div>

       <!-- Le corps -->

       <div id="corps">
           <h1>L'Amicale Canine de Pressagny</h1>
       
           <p>
               Bienvenue sur le site !<br />
               Vous allez adorer ici, c'est un site génial qui va parler de notre association.
           </p>
       
           <h2>A qui s'adresse ce site ?</h2>    
           <p>
               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
               Que vous soyez expérimentés ou de simple curieux!!!!!
           </p>
           
           <h2>L'auteur</h2>    
           <p>
               L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
               Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
               Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
           <br /><br /><br /><br /><br /><br /><br /><br /></p>
       </div>

       <!-- Le pied de page -->

       <div id="pied_de_page">
           <p>Copyright "ACP" 2007, tous droits réservés<br/>
		   Dernière mise à jour le 20 Février 2007</p>
		   <p>Pour toutes suggestions, n'h&eacute;sitez 
  pas &agrave; me contacter : <em><a href="mailto:pressagny.canin@free.fr">pressagny.canin@free.fr</p>
       </div>

   </body>
</html>


je vous remercie par avance de votre aide!