Discussion :

[Leclandestin]

Bonjour tout le monde!

Je vous expose mon problème:

Je veux définir un div newsletter dans mon div header sans que celui ci se retrouve decaler par rapport au top de la page:

Voici mon code:

HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<!--DEBUT HEADER-->
<div id="header">
    <div id="newsletter">
    #
        #
    </div>    
</div>
<!--FIN HEADER-->

Mon CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
body{ 
    background-image: url(images/body_bg.gif);
    background-repeat: repeat-x;
    margin-bottom: 0px;
    }
#header {
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
    height:193px;
    margin-top:0px;
    }
#newsletter{
    width: 220px;
    height: 80px;
    margin-left:500px;
    margin-top:40px;
 
    }

En visuel cela donne ceci:



Je cherche a supprimer la marge en rouge.

En mettant un margin-top:0px; a mon body, le probleme a disparu sous Explorer mais pas sur Firefox.

Je me retrouve avec un header qui ne touche pas au haut de la page.

Vous y voyez une solution?

Merci bien.

[Kerod]

C'est pas au header qu'il faut mettre à 0 c'est au body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body
{
   padding: 0;
}

Histoire de déconner : Comment veux-tu qu'il t'écoute le pauvre ?

[Leclandestin]

J'ai deja essayer cette solution auparavant mais sans succès.

Je vais vous montrer le problème en direct: vous comprendrez surement mieux que mes petit croquis fais sur paint.


www**.avataravatar.com/test.html Otez les **

Avec le padding: 0px; sur le body comme tu me la indiqué.

Ça ne marche ni sous FF ni sous IE

Pour déconner: Je crois bien qu'il y a une vraie cloison anti-bruit entre nous la..

[Erwan31]

En mettant un margin-top:0px; a mon body, le probleme a disparu sous Explorer mais pas sur Firefox.
Je me retrouve avec un header qui ne touche pas au haut de la page.

Bizarre, firefox comme IE ont tous les 2 des margins par default de 8px, le margin-top:0 devrait donc avoir aussi de l'effet sur Firefox.

@Kerod: Pour info il n'y a que sur les anciennes versions d'Opera que le body a un padding par default (s'agissant uniquement des navigateurs principaux).

[Leclandestin]

Bizarre, firefox comme IE ont tous les 2 des margins par default de 8px, le margin-top:0 devrait donc avoir aussi de l'effet sur Firefox.

J'ai changer le padding par un margin top sur mon body.

C'est la 1ere fois que FF me pose un pépin dans ce genre, d'habitude il se conduit bien.

La version en ligne maintenant est celle avec le margin-top:0px; Sous IE, ca fonctionne.
Il doit surement y avoir une erreur cachée quelque part.

[Kerod]

Visiblement ça vient du margin-top de 40px que tu as donné à #newsletter.

Déconne : Il faut abattre cette cloison alors.

[Erwan31]

Ca vient exactement d'un problème de fusion des marges que tu dois corriger en créant ce qu'on appelle un contexte de formatage bloc sur le div header via un overflow:hidden (par exemple):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#header {
    overflow:hidden;
    background: url(images/header.jpg) no-repeat;
    height:193px;
    }

Ne pas oublier le margin:0 sur le body

[Leclandestin]

Ca vient exactement d'un problème de fusion des marges que tu dois corriger en créant ce qu'on appelle un contexte de formatage bloc sur le div header via un overflow:hidden (par exemple):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#header {
    overflow:hidden;
    background: url(images/header.jpg) no-repeat;
    height:193px;
    }

Ne pas oublier le margin:0 sur le body

Balaise, ça marche.

Le probleme est resolu mais la je veux comprendre!

Tu m'expliques d'ou t'es venu l'idée? Un lien vers de la doc ne serait pas de refus.

Merci

[Leclandestin]

Visiblement ça vient du margin-top de 40px que tu as donné à #newsletter.

Déconne : Il faut abattre cette cloison alors.

Exact,

Le problème est apparu quand j'ai ajouter le div newsletter.

Au lieu de mettre un margin sur la news, je met un padding sur le header, vous pensez que ca peut aider. Mais d'un point de vu sémantique, je pense avoir bien declarer mon div newsletter...non?

Il faut le faire autrement?