28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème de marges interne et flottants (IE)

Bonjour,

Je suis en train de refaire une page selon les standards pour un copain mais j'ai un problème avec IE : il ne calcule pas les marges de la même manière que les autres et mes flottants se balade un peu n'importe où. Ma page est valide et IE ne devrait donc pas passer en mode quirk, je ne vois pas où est le problème.

Capture d'écran avec IE6
Capture d'écran avec FF

Voici le code xhtml :

<!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>
<title>Hind Boukli</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
<!--
body {
	margin: 0 0;
	background-color: #000;
	font-family: helvetica, arial, "sans serif";
	font-size: 80%;
}
h1 {
	left: -5000px;
	top: -5000px;
	text-indent: -5000px;
	font-size: 1px;
}
#image {
	position: absolute;
	margin: 0 0;
	padding: 0 0;
    left: 50%; 
    top: 50%;
	width : 300px;
	height: 425px;
	list-style : none;
	margin-top: -300px;
	margin-left: -400px;
	border: 1px dotted white;
	padding: 175px 250px 0px 250px;
	background: url(index.jpg) center center no-repeat;
}
#image li {
	float: left;	
	height: 73px;
	width: 73px;
	margin-right: 14px;
	margin-bottom: 12px;
	padding: 2px;
	border: 1px dotted white;
}
#image a {
	display: block;
	height: 100%;
	width: 100%;
	color: #fff;
	padding-left: 0.5em;
}
#image a.noir {
	color: #000;
}
#image a {
	text-indent: -5000px;
}
#image a:hover {
	text-indent: 0px;
}
p.avertissement {
	position: absolute;
	margin: 0 auto 0.5em auto;
	bottom: 0px;
	color: #777;
	font-size: small;
}
-->
</style>
</head>
<body>
<h1>Hind Boukli</h1>
<ul id="image">
	<li><a href="page1.html"><span>Page 1</span></a></li>
	<li><a href="page2.html"><span>Page 2</span></a></li>
	<li><a class="noir" href="page3.html"><span>Page 3</span></a></li>
	<li><a href="page1.html"><span>Page 4</span></a></li>
	<li><a href="page2.html"><span>Page 5</span></a></li>
	<li><a href="page3.html"><span>Page 6</span></a></li>
	<li><a href="page1.html"><span>Page 7</span></a></li>
	<li><a href="page2.html"><span>Page 8</span></a></li>
	<li><a href="page3.html"><span>Page 9</span></a></li>
</ul>
<p class="avertissement">Ce site nécessite d'avoir les images activées pour naviguer</p>
</body>
</html>

Modifié par Patidou (05 Nov 2007 - 12:04)
Bonjour,
Commences par mettre des liens en float:left et vois si cela règle ton problème.
Ceci dit tu as une manière de procéder qui me semble un peu fragile (compter sur des padding pour déterminer une largeur allouée aux items de list).
Peut-être devrais tu préciser una largeur à l'ul sans padding et imbriquer le tout dans un div.

A propos tu peux écrire padding: 175px 250px 0px 250px comme ceci:
padding: 175px 250px 0. Le chiffre du milieu correspond aux padding latéraux.
Le width:100% des liens est inutile ici.
Modifié par Hermann (02 Nov 2007 - 16:48)
Tu as raison : je vais refaire une page avec un div et un ul sans padding. je vous tiens au courant. Smiley cligne

Merci. Smiley jap
Voilà, youpie ça marche, fallait donner aussi une largeur à l'ul :

<!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>
<title>Hind Boukli</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" media="screen">
<!--
body {
	margin: 0 0;
	background-color: #000;
	font-family: helvetica, arial, "sans serif";
	font-size: 80%;
}
h1 {
	left: -5000px;
	top: -5000px;
	text-indent: -5000px;
	font-size: 1px;
}
#image {
	position: absolute;
    left: 50%; 
    top: 50%;
	width : 300px;
	height: 425px;
	margin-top: -300px;
	margin-left: -400px;
	/*border: 1px dotted white;*/
	padding: 175px 250px 0px;
	background: url(index.jpg) center center no-repeat;
}
#image ul {
	margin: 0 0;
	padding: 0 0;
	/*width: 285px; si on met les filets sinon*/
	width: 285px;
	list-style : none;
}
#image li {
	float: left;	
	height: 73px;
	width: 73px;
	margin-right: 14px;
	margin-bottom: 12px;
	padding: 2px;
	/*border: 1px dotted white;*/
}
#image a {
	display: block;
	height: 100%;
	color: #fff;
	padding-left: 0.5em;
}
#image a.noir {
	color: #000;
}
#image a {
	text-indent: -5000px;
}
#image a:hover {
	text-indent: 0px;
}
p.avertissement {
	position: absolute;
	margin: 0 auto 0.5em auto;
	bottom: 0px;
	color: #777;
	font-size: small;
}
-->
</style>
</head>
<body>
<h1>Hind Boukli</h1>
<div id="image">
	<ul>
		<li><a href="page1.html"><span>Page 1</span></a></li>
		<li><a href="page2.html"><span>Page 2</span></a></li>
		<li><a class="noir" href="page3.html"><span>Page 3</span></a></li>
		<li><a href="page1.html"><span>Page 4</span></a></li>
		<li><a href="page2.html"><span>Page 5</span></a></li>
		<li><a href="page3.html"><span>Page 6</span></a></li>
		<li><a href="page1.html"><span>Page 7</span></a></li>
		<li><a href="page2.html"><span>Page 8</span></a></li>
		<li><a href="page3.html"><span>Page 9</span></a></li>
	</ul>
</div>
<p class="avertissement">Ce site nécessite d'avoir les images activées pour naviguer</p>
</body>
</html>
Sujet clos
Aller à