28234 sujets

CSS et mise en forme, CSS3

[résolu] Mise en page ie5.5 et ie6 (pas d'autre browser au boulot !)

Bonjour,

J'aimerais comprendre pourquoi, dans l'exemple ci-dessous, j'ai un décalage dans la partie centrale comme si j'avais défini marge ou padding !?

En remerciant d'avance les puits de science CSS qui répondront à cette question Smiley cligne 

<!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" lang="en" xml:lang="en">

<head>
	<title>Test page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		#left {
		border: 1px solid red;
		left: 0;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		width: 150px;
		}
		
		#center {
		border: 1px solid black;
		margin: 0 160px 0 160px;
		overflow: auto;
		padding: 0;
		width: auto;
		}
		
		#right {
		border: 1px solid green;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 150px;
		}	
	</style>
</head>

<body>

<div id="left">
<h1>Left</h1>
Lorem ipsum dolor sit amet, ... left part
</div>
<div id="center">
<h1>Center</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</div>
<div id="right">
<h1>Right</h1>
Lorem ipsum dolor sit amet, ... right part
</div>

</body>
</html>

Modifié le 17 Nov 2004 - 14:49
Administrateur
Oui en effet, tu n'as pas supprimé les marges du document.
Les éléments en position absolue n'en tiennent pas compte (ils s'affichent quand-même à l'endroit déterminé), mais le flux courant tient compte des marges par défaut.
Sujet clos
Aller à