28172 sujets

CSS et mise en forme, CSS3

Bonjour, tout d'abord je tiens à vous remerciez d'avance pour votre aide et votre temps précieux. J'ai un petit soucis avec mon menu :sous Firefox il n'y a pas de bug; sous ie, ce n'est pas du tout la même chose.
Les marges sont décalés. J'ai bien compris le problème avec ie qui considère les marges à l'intérieur, mais je n'ai pas encore réussi à le déboger, c'est donc ainsi que je viens demander de l'aide sur ce forum. Merci beaucoup.

Voici le HTML:

<!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" lang="fr">
					
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title> Forum de la nutrition </title>

	<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

</head>
<body>

	<div id="conteneur">
	<div id="header">
	</div>
	
	<ul id="menu">
			<li style="margin-left: 10px; Position: Absolue; "><a href="#">PRESENTATION</a></li>
			<li style="margin-left: 42px"><a href="#">PROGRAMME</a></li>
			<li style="margin-left: 52px"><a href="#">ATELIER CUISINE</a></li>
			<li style="margin-left: 56px"><a href="#">PARTENAIRE</a></li>
			<li style="margin-left: 50px"><a href="#">INFOS PRATIQUES</a></li>
	</ul>
</div>

</body>
</html>


Voici le Css:


body
{
	padding: 0 ;
	text-align: center ;
	margin: auto; /* Pour centrer notre page */
	background: #fff ;
	font-family:"verdana";
	}


div#conteneur
{
	width: 800px ;
	height : 600px;
	margin: 0 auto ;
	text-align: left ;
	
	
}

div#header
{
   width: 800px;
   height: 100px;
   background-image: url(../images/banniere2.jpg);
   background-repeat: no-repeat;
}
/* On définit la hauteur de la partie header, contenant le titre du site */



ul#menu
{
	width : 800 px;
	height: 25px;
	background: url(../images/menu.jpg) no-repeat;
	margin: auto;
	
}

ul#menu li
{
	margin-top : 1px;
	float: left ;
	list-style-type: none ;

}
/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	font-size: small ;
	color : #fff; 
	text-decoration: none; 
}

ul#menu li a:hover, #menu li a:focus, #menu li a:active 
{
	color: #dfdb00  ;
en
}

Merci pour tout.

P.S.: J'ai mis le style dans les balises <li>, car on me l'a demandé... :s
Modifié par Natedorns (25 May 2009 - 12:10)