Espace entre haut et header

djodjo64 · 5 Janvier 2011

Bonsoir,

Je commence à coder et première impasse : j'ai mis un fond, puis le header et un espace se crée entre le haut de la page et le header.

J'ai essayé un margin-top à 0 du header mais rien n'y fait ; pourtant le code est vraiment tres simple :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" media="screen" type="text/css" title="Design glory hole" href="style.css" />
</head>

<body>
<div id="header"></div>
</body>

</html>

body
{
	font-family: Verdana, Arial, "Times New Roman", Times, sans-serif;
	background: url("images/fond.gif");

}

#header
{
	background: url("images/header.jpg");
	width: 850px;
	height: 129px;
	margin-left:auto;
	margin-right:auto;

}

Merci pour votre aide.

**Ernestine** · 5 Janvier 2011

Salut,

Il faut ajouter :

padding: 0;

aux styles du body. Sinon par défaut, la valeur du padding du body est de 8 pixels.

djodjo64 · 5 Janvier 2011

Je viens de faire la modif, mais rien ne bouge :wacko:

djodjo64 · 6 Janvier 2011

J'ai finalement mis un "margin-top:-8px;" et mon header est bien collé en haut.

Je reste comme ca si vous n'y voyez pas d'inconvénients.

Merci et bonne journée.

**Ernestine** · 6 Janvier 2011

Le padding:0 sur le body doit marcher. La valeur par défaut du padding du body est 8 pixels, voila pourquoi la quasi-totalité des intégrateurs au monde commencent systématiquement par mettre les choses à plat en lui mettant 0.

Personnellement, pour éviter d'avoir à fouiller sans arrêt les valeurs par défaut, je commence chaque feuille de style par :

* {
	margin:0px;
	padding:0px;
}

Comme ça on est tranquille, tous les padding et tous les margin de tous les éléments sont à 0, et on modifie les styles au cas par cas selon les besoins.

Si ça n'a pas fonctionné dans ton cas, c'est que tu as dû oublier quelque chose, un point virgule ou autre. Le coup du margin négatif sur le header, ça fonctionne, mais c'est quand même du bricolage, si au bout de dix lignes dans la feuille de styles tu commences à faire du bidouillage, imagine ce que ça va devenir quand tu auras quelques centaines de lignes. Ton margin-top négatif pourrait avoir des répercussions sur les marges des autres éléments, et bien vite, tu ne sauras plus du tout par quel bout prendre le problème pour ajuster les espaces. Juste pour savoir : le padding 0, tu l'as bien appliqué au body n'est-ce pas ? Pas au header ?

djodjo64 · 9 Janvier 2011

Merci, tout a tres bien fonctionné avec ton petit morceau de code !

Connexion

Espace entre haut et header

Sujets conseillés

djodjo64

Ernestine

djodjo64

djodjo64

Ernestine

djodjo64

Veuillez vous connecter pour commenter

Parcourir

Activité