28172 sujets

CSS et mise en forme, CSS3

bonjour,

j'ai un menu horizontal que je n'arrive pas à centré sur firefox.

d'ou peut venir le soucis?

je n'ai que mon header flash au dessus.mes images font 60*40 et une qui fait 70*40

http://jeromei.phpnet.org/Copie de travail[/url

les cssl:

#nav ul li a {
        display: inline;
        width: 330px;
        height: 40px;
		float:left ; 
}

#nav ul {
        list-style-type: none; 

		margin:0; padding:0;

}

        #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/calculatrice1.jpg) no-repeat 0 0;}
		#nav ul li.l4 a {background:url(../images/espaceclient1.jpg) no-repeat 0 0;}
		#nav ul li.l5 a {background:url(../images/devis1.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/calculatrice2.jpg) no-repeat 0 0;}
		#nav ul li.l4 a:hover {background:url(../images/espaceclient2.jpg) no-repeat 0 0;}
		#nav ul li.l5 a:hover{background:url(../images/devis2.jpg) no-repeat 0 0;}
		
        #nav ul li a span {display:none;} /*On cache le texte qui nous sert juste à remplir le lien*/

	nav a{
        text-decoration: none;
}
 
#nav img{
        border-style: none;
}


le html



<div id="nav">
    <ul>
       
<li class="l1"><a href="#" alt=""><span>nos offres</span></a></li>
<li class="l2"><a href="#" alt=""><span>implantation</span></a></li>
<li class="l3"><a href="#" alt=""><span>calculatrice</span></a></li>
<li class="l4"><a href="#" alt=""><span>espace client</span></a></li>
<li class="l5"><a href="#" alt=""><span>devis en ligne</span></a></li>
		
    </ul>
</div>

Modifié par jeromei (23 Jun 2008 - 09:17)
ça ne viendrait-il pas de ça - float:left ; - tu lui dit d'être à gauche...
sinon met dans le css - margin: auto; - à tas div

je dis ça mais je connais pas grand chose Smiley cligne
j'ai un peu changé le code. sous firefox maintenant c'est ok



mais sous IE c'est une catastrophe.

a écrit :
Les CSS




#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 a {

        display: inline;
        width: 60px;
		height:40px;
		margin-right:20px;
        float:left ;

	}


#nav ul {

		
		/*overflow:hidden; /*casse le float left qui suit*/
        list-style-type: none; 
		zoom:1;


}

        #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 a{
        text-decoration: none;
}
 
	#nav img{
        border-style: none;
}



a écrit :
Le HTML


<div centre>

<div nav>
</div nav>

</div centre>

Modifié par jeromei (20 Jun 2008 - 14:25)