28216 sujets

CSS et mise en forme, CSS3

Espace gênant au-dessus d'un header

Bonjour,
Pour mon nouveau site web, j'ai eu pour idée (et pourquoi pas pour ambition) de le créer aux normes W3C.
Pour ce faire, je désire un design pur css... Mais voilà un problème qui m'assaille et que je ne parviens pas à résoudre.


Pour simplifier les choses, je teste sur une page entièrement vierge et voici la parcelle de code qui nous interesse :
<body>
<div class="header"></div>
</body>



Le code du fichier css externe :

html, body {margin:0; padding:0;}

.header { background-image:url(images/v2/header.gif); height:157px; width:720px; margin:0 auto; }



Et toujours la même chose... Une dixaine de pixels en haut de mon header qui l'empêche de se coller en haut de la fenêtre du navigateur...
Help me please

Smiley lol
Modifié par Tool (28 Jan 2006 - 14:42)
Modérateur
bonjour,
et as tu essayer de calé les marges de html et body a zero par defaut ?
html, body {margin:0;padding:0;}

Je crois aussi qu'avec ou sans doctype, cela fait une difference aussi !?
a plus
gcyrilus > je crois que tu n'as pas bien lu mes posts précédents car ce que tu propose a déjà été intégré sur ma feuille de style Smiley biggrin
Bonjour Tool,

Tu dois avoir un autre problème, car ce code, isolé, ne donne pas de marge en haut.
Peut être dans tes onglets ?
Attention au "margin: auto" qui n'est pas compris par IE.
Modifié par papillon41 (28 Jan 2006 - 15:59)
Modérateur
Désole, (et a propos du doctype ?, l'as tu deja insere a ta page ?)

de plus au vu de ton css , l'image devrait se repeter, est tu certain de ne pas avoir une bande blanche dans ton image Smiley confused , as tu essayer de jouer sur la position de cette image ?
Si l'image est effectivement sans bande blanche , peut-etre as tu quand même laisser dans ton html, une balise de type <hn> dans l'element banniere ou juste aprés ?

Ton probleme me semble effectivement incomprehensible, car apparement un div seul dans body ne devrait pas provoquer de decallage due a des marges (comme peuvent le faire des balise hn ou p )de plus tu as bien pris soin de t'en defaire.
a plus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Pour ce qui est des problèmes liés à l'image : aucun... Ma page se monte autour sans autre problème... Smiley rolleyes
De plus, celle-ci ne peut pas se répéter puisque le background-image est sous contrainte de width et height...
Modifié par Tool (28 Jan 2006 - 16:02)
Modérateur
j'imagine que ta page de test est a peu pres comme ceci, au lieu de l'image j'ai mis une bordure et un fond de ccouleur, je n'ai pas reussi a reproduire ton "bug".


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {margin:0; padding:0;}
.header { background-image:url(header.gif); height:157px; width:720px; margin:0 auto;
background-color:red;border:1px solid #666; }
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>



(l'image qui se repete, c'est la valeur par defaut en css , en disant par exemple background:url(image.gif) 40px 40px ; tu la decalle de sa position d'origine et elle se trouve alors coupé, et a l'affichage ,les raccord haut bas et droite/gauche de l'image peuvent eventuellement mettre en evidence cette bande blanche si elle existe).
a plus, la verité est ailleurs ? Smiley smile
je te souhaite de ressoudre ce probleme.
Modifié par gcyrillus (28 Jan 2006 - 16:22)
Salut,

Pour éliminer tout problème de marge par défaut, désactive les marges de manière globale en début de ta CSS :


* {margin:0; padding:0}


Si ton problème persiste, il faudra alors nous donner plus d"éléments.
Smiley biggrin
Modérateur
Smiley smile je ne suis peut-etre pas seul a lire trop vite .....

Sinon, pour reproduire ton bug, en mettant une "virgule" a la place d'un" point virgule" dans le css juste apres :"margin:0", Smiley lol

.... ce qui ramene au meme point: Smiley smile mets tes marge a 0 ou verifies que tu n'as pas d'erreurs de frappes/syntaxes ....

a plus
Salut,

C'est souvent lié à la fusion des marges verticales. Si c'est ça, il n'y aura pas cet espace avec IE.
Sujet clos
Aller à