28173 sujets

CSS et mise en forme, CSS3

[auto résolu] marge en haut de page

Bonjour à tous! Smiley smile
J'ai lu l'article Vous avez dit height=100% ?, mais le comportement décris dans le tuto ne se reproduit pas chez moi sur ma page. Partant du principe que le tuto fonctionne, je n'arrive pas à trouver le bug dans ma page.
CSS:

html {
  direction: ltr;
}
body {
  font-family: calibri, sans-serif;
  background-color: green;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
a img {
  border: none;
}
div.conteneur {
  height: 100%;
  background-color: red;
}
div.top {
  height: 100px;
  background-color: #66CDAA; /* MediumAquaMarine */ 
}
div.center {
  height: 500px;
}
div.center div {
  height: 100%;
  float: left;
}
div.center div.centerleft {
  width: 10%;
  background-color: #40E0D0; /* Turquoise */
}
div.center div.centermiddle {
  width: 80%;
  background-color: #48D1CC; /* MediumTurquoise */
}
div.center div.centerright {
  width: 10%;
  background-color: lime;
  background-color: #87CEFA; /* LightSkyBlue */
}
div.bottom {
  height: 100px;
  background-color: teal;
}

& page HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>test squellette div</title>
  <link rel="stylesheet" type="text/css" href="css/main-stylesheet.css" />
</head>
<body>
<div class="conteneur">
	<div class="top">
		<h1>test squellette div</h1>
	</div>
	<div class="center">
		<div class="centerleft">
		left
		</div>
		<div class="centermiddle">
		middle
		</div>
		<div class="centerright">
		right
		</div>
	</div>
	<div class="bottom">
	bottom
	</div>
</div>
</body>
</html>

Sur IE6, pas de problème.
http://img205.imageshack.us/img205/6245/goodil5.png
Sur Firefox (2.0.0.7), Opera (9.23) & Safari (3.0.3), une méchante bande verte (donc balise <body>) en haut de quelques pixels.
http://img520.imageshack.us/img520/2645/badwd8.png
Je précise que je veux éviter tout positionnement non static. Smiley ravi
[u]add:[/u] j'ai trouvé entre temps la solution; c'est mon titre (<h1>test squellette div</h1>) qui imposait une marge, en supprimant le <h1>, le problème est résolu.
Voilà, pas taper les modérateurs, je partage mes connaissances avec un joli post, du code propre & des captures d'écran. Smiley lol
Modifié par PacteNovation (04 Oct 2007 - 18:09)
Sujet clos
Aller à