28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je fais mes première armes en CSS et je découvre en même temps la joie des différences de prise en compte selon les navigateurs.

Je suis en train de créer un menu à l'horizontale. J'ajoute un "hover" pour faire un événement au passage d'un lien. Cela fonctionne nickel sur Firefox mais sur IE6 cela modifie carrément la mise en page en plaquant le tout côté gauche alors que les éléments étaient centrés dans la page.

Voila l'url de la page incriminée : http://www.cinespagne.com/testCinespagne.html

Voila le code de ma page :


<title>Document sans nom</title>
<style type="text/css">
body {
	width:780px;
	padding-left: 50%;
	}
#cadre {
	width: 780px;
	margin-left: -390px;
	}
#logo img {
margin-right: 20px;}
#sitenav ul {
	margin: 0 0 7px 0;
	margin-top:20px;
	padding:0;
	font-family:"Courier New", Courier, monospace;
	font-weight:bold;
	font-size:15px;
	}
#sitenav ul li {
	list-style:none;
	margin:0;
	display: inline;
	}

#sitenav ul li a {
padding: 5px;
margin-left: -2px;
margin_right: -2px;
text-decoration:none;
color: black;
background: #FFFFFF;}
#sitenav ul li a:hover {background:#FF0000;
}
</style>
</head>

<body>
<div id="cadre">
	<div id=logo>
		<img src="photoindex/logocinespagne2.jpg" width="140" height="90" />
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=		"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" 	height="90" title="banni&egrave;re promotionnele">
  		<param name="movie" value="flash/cinespagne1.swf" />
  		<param name="quality" value="high" />
 		<embed src="flash/cinespagne1.swf" quality="high" pluginspage=	"http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="90"></embed>
</object>
</div>
  <div id="sitenav">		<ul>
			<li><a href="az">Accueil</a></li>
			<li><a href="ds">Actualités</a></li>
			<li><a href="ds">A l'affiche</a></li>
			<li><a href="dsd">DVD</a></li>
			<li><a href="vcxv">Livres</a></li>
			<li><a href="cxc">Portraits</a>
			<li><a href="dqs">Dossiers</a></li>
			<li><a href="navigation1.html">Bande-Annonce</a></li>
		</ul>

  </div>
</div>

</body>
</html>
Salut,

Bah c'est normal...
Evite de dimensionner ton body, ça risque de créer plus de problèmes qu'autre chose... Et utilise ton bloc #cadre comme conteneur en le centrant d manière automatique et ça devrait être bon...
body {

	}
#cadre {
	width: 780px;
	margin: auto;
	}