[b][resolu]Coller mes boutons de menu à gauche[/b]

bonjour.

je n'arrive pas à aligner mes boutons de menu à gauche.

quel est la bonne ligne de code?

http://jeromei.phpnet.org/copie_de_travail/

voici mon code html de ma div "menu"

<div id="gauche">
	 <div id="menu">

     
        <ul>
		
		
			<li class="l1"><a href="#" alt="">Accueil</a></li>
			<li class="l2"><a href="#" alt="">Presentation</a></li>
			<li class="l3"><a href="#" alt="">Nos services</a></li>
			<li class="l4"><a href="#" alt="">Nos engagements</a></li>
			<li class="l5"><a href="#" alt="">Votre maison</a></li>

			<li class="l6"><a href="#" alt="">Contact</a></li>
			<li class="l7"><a href="#" alt="">Rejoignez Eligo</a></li>
			<li class="l8"><a href="#" alt="">Devenez Courtier</a></li>
			<li class="l9"><a href="#" alt="">Espace Partenaire</a></li>	   
					
			
			
        </ul>
      </div>
  	

et le code de mes css y compris mon menu

[code]body{
  margin:0;
  padding:0;
  background: #33CCFF url(../images/degrade-bleu.jpg) repeat-x;

}
#global{
  width:776px;
  background-color:#ffffff;
  margin-top:4%;
  margin-left:auto;
  margin-right:auto;
}
#header{
  
  height: 190px;
  width:776px;
  background-color:#ffffff;
}
#container{
	width: 776px;
	background-color: #ffffff;
	

}
#gauche{
  width:170px;
  height:525px;
  float:left;
   background: url(../images/fond-boutons-gauche.jpg) no-repeat;
}

#menu ul li {
	
	margin-bottom: 5px;/*espacement entre les differents rectangles du menu*/
	margin-right:20px;
	padding:0;
	width:169px;
	height:57px;
    border-style:none;
	list-style-type:none;		
	}



#menu ul li.l1 a {background:url(../images/accueil1.jpg) no-repeat 0 0;}
#menu ul li.l2 a {background:url(../images/presentation1.jpg) no-repeat 0 0;}
#menu ul li.l3 a {background:url(../images/nosservices1.jpg) no-repeat 0 0;}
#menu ul li.l4 a {background:url(../images/nosengagements1.jpg) no-repeat 0 0;}
#menu ul li.l5 a {background:url(../images/votremaison1.jpg) no-repeat 0 0;}
#menu ul li.l6 a {background:url(../images/contact1.jpg) no-repeat 0 0;}
#menu ul li.l7 a {background:url(../images/rejoignezeligo1.jpg) no-repeat 0 0;}
#menu ul li.l8 a {background:url(../images/devenezcourtier1.jpg) no-repeat 0 0;}
#menu ul li.l9 a {background:url(../images/espacepartenaire1.jpg) no-repeat 0 0;}


#menu ul li.l1 a:hover {background:url(../images/accueil2.jpg) no-repeat 0 0;}
#menu ul li.l2 a:hover {background:url(../images/presentation2.jpg) no-repeat 0 0;}
#menu ul li.l3 a:hover {background:url(../images/nosservices2.jpg) no-repeat 0 0;}
#menu ul li.l4 a:hover {background:url(../images/nosengagements2.jpg) no-repeat 0 0;}
#menu ul li.l5 a:hover {background:url(../images/votremaison2.jpg) no-repeat 0 0;}
#menu ul li.l6 a:hover {background:url(../images/contact2.jpg) no-repeat 0 0;}
#menu ul li.l7 a:hover {background:url(../images/rejoignezeligo2.jpg) no-repeat 0 0;}
#menu ul li.l8 a:hover {background:url(../images/devenezcourtier2.jpg) no-repeat 0 0;}
#menu ul li.l9 a:hover {background:url(../images/espacepartenaire2.jpg) no-repeat 0 0;}
      
		
#menu a{
		display:block;
		width:169px;
		height:57px;
        text-decoration: none;
		text-indent:-999em; 
		overflow:hidden  /*chasse tres loin le texte */
}
 
	#centre{
  width:478px;
  height:495px;
  float:left;
  font-family: Arial, verdana, sans serif;
  font-size:12px;
  color:#666666; 
  border-style:none; 
  background-color:#ffffff;
}



 p{
	padding-top:15px; 
	margin-left:20px;
	font-family: Arial, verdana, sans serif;
	font-size:14px;
	color:#666666;
	font-weight:bold;
	
  }
#nav ul li  {
        
		float:left;
        width: 60px;
		height:40px;
       
	}
	#nav li{
	margin-right:20px;
	}



#nav  a {
        display: block;
	    width: 60px;
		height:40px;
		
        text-decoration: none;	
       
	}

#nav ul {
		
		 
        list-style-type: none; 
		zoom:1;		 
		overflow:hidden;
		 margin-left:15px;
}

        #nav ul li.l1 a {background:url(../images/offres1.jpg) no-repeat 0 0;}
        #nav ul li.l2 a {background:url(../images/implantation1.jpg) no-repeat 0 0;}        
		#nav ul li.l3 a {background:url(../images/espaceclient1.jpg) no-repeat 0 0;}
		#nav ul li.l4 a {background:url(../images/devis1.jpg) no-repeat 0 0;}
		#nav ul li.l5 a {background:url(../images/calculatrice1.jpg) no-repeat 0 0;}
		

        #nav ul li.l1 a:hover {background:url(../images/offres2.jpg) no-repeat 0 0;}
        #nav ul li.l2 a:hover {background:url(../images/implantation2.jpg) no-repeat 0 0;}       
		#nav ul li.l3 a:hover {background:url(../images/espaceclient2.jpg) no-repeat 0 0;}
		#nav ul li.l4 a:hover{background:url(../images/devis2.jpg) no-repeat 0 0;}
		#nav ul li.l5 a:hover {background:url(../images/calculatrice2.jpg) no-repeat 0 0;}
		
        #nav ul li a span {display:none;} /*On cache le texte qui nous sert juste à remplir le lien*/


 
	#nav img{
        border-style: none;
}

#droite{
  width:125x;
  /*height:525px;*/
 
  margin:auto;
  border-style:none;

  float:left;
 
  
  padding:auto;
   background-color:#ffffff;
}

#pied{

margin:auto;
padding:auto;	
height:15px;
width:776px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	clear:both;

}
#pied a,
#pied a:link,
#pied a:active,
#pied a:visited{
  color:#106488;
	text-decoration:none;
}
#pied a:hover{
  color:#797979;
	
}

Modifié par jeromei (23 Jun 2008 - 13:15)

Bonjour,
Afin de coller tes boutons de menu à gauche, il faut que tu appliques le style suivant à ton ul :

ul {
    padding: 0;
}

Cela va permettre de supprimer le padding de gauche de la balise ul.

merci pour ta réponse.

par contre, je suis obligé de mettre un padding 8px sur mozilla (sinon ça collait trop!!)

mais sur IE, que je mette 0; ou 8px; le menu ne bouge pas?

#menu ul li {
	
	margin-bottom: 31px;/*espacement entre les differents rectangles du menu*/	
	width:130px;
	height:28px;
	border-style:none;
	list-style-type:none;		
	}

#menu ul {
    padding: 8px;
	}


#menu ul li.l1 a {background:url(../images/accueil1.jpg) no-repeat 0 0;}
#menu ul li.l2 a {background:url(../images/presentation1.jpg) no-repeat 0 0;}
#menu ul li.l3 a {background:url(../images/nosservices1.jpg) no-repeat 0 0;}
#menu ul li.l4 a {background:url(../images/nosengagements1.jpg) no-repeat 0 0;}
#menu ul li.l5 a {background:url(../images/votremaison1.jpg) no-repeat 0 0;}
#menu ul li.l6 a {background:url(../images/contact1.jpg) no-repeat 0 0;}
#menu ul li.l7 a {background:url(../images/rejoignezeligo1.jpg) no-repeat 0 0;}
#menu ul li.l8 a {background:url(../images/devenezcourtier1.jpg) no-repeat 0 0;}
#menu ul li.l9 a {background:url(../images/espacepartenaire1.jpg) no-repeat 0 0;}


#menu ul li.l1 a:hover {background:url(../images/accueil2.jpg) no-repeat 0 0;}
#menu ul li.l2 a:hover {background:url(../images/presentation2.jpg) no-repeat 0 0;}
#menu ul li.l3 a:hover {background:url(../images/nosservices2.jpg) no-repeat 0 0;}
#menu ul li.l4 a:hover {background:url(../images/nosengagements2.jpg) no-repeat 0 0;}
#menu ul li.l5 a:hover {background:url(../images/votremaison2.jpg) no-repeat 0 0;}
#menu ul li.l6 a:hover {background:url(../images/contact2.jpg) no-repeat 0 0;}
#menu ul li.l7 a:hover {background:url(../images/rejoignezeligo2.jpg) no-repeat 0 0;}
#menu ul li.l8 a:hover {background:url(../images/devenezcourtier2.jpg) no-repeat 0 0;}
#menu ul li.l9 a:hover {background:url(../images/espacepartenaire2.jpg) no-repeat 0 0;}
      
		
#menu a{
		display:block;
		width:130px;
		height:28px;
        text-decoration: none;
		text-indent:-999em; 
		overflow:hidden  /*chasse tres loin le texte */
}

Salut,

jeromei a écrit :
mais sur IE, que je mette 0; ou 8px; le menu ne bouge pas?

Voir ce point de la FAQ.

merci à vous tous.

ça fonctionne.

Me reste plus que le probleme de mes div qui ne sont pas à la même hauteur.

Merci pour le [résolu]...

Sinon, comme je te l'avais déjà fait remarquer : les balises [ b] et [ /b] sont inutiles dans ton titre !