18041 sujets

Questions générales et questions de débutants

[resolu] Decalage avec margin-top

Bonjour j'ai un problème avec un css tout simple pourtant

Voici mon code html

<div id="content">
	<div id="conteneurPhoto">
		&nbsp;
	</div>
	test
</div>


Et mon css

#content {
position:relative;
margin:auto;
margin-top:0;
background-color:#F00;
}
#conteneurPhoto {
margin-top:150px;
border:1px solid #000;
}


Mon problème est que au lieu que ce soit le div "conteneurPhoto" qui descende de 150px c'est le div "content" qui descend...
Je n'arrive pas à comprendre pourquoi...
Modifié par maniT4c (26 Apr 2007 - 16:30)
Salut,

a ce css^^ a mon avis c un bug car si dans le div content tu place qquelquechose avant le div conteneurphoto alors la ton margin apparait.

pour un premier div intérieur tu mets padding-top:150px dans le content. et pour d'eventuels div conteneurphoto2 3 ,etc.. la le margin-top marche....

A le CSS plus j'en vois moins je comprends^^
CPascal a écrit :
a mon avis c un bug
Non non, c'est un comportement tout à fait normal de la part du butineur. Comme tu dis, il faut effectivement jouer sur un padding-top pour effectuer le premier déclage vertical grâce aux marges, sans quoi la marge sera appliquée au conteneur entier.
Admettons que tu places en premier élément un h1 dans le body, si tu attribues à ton titre une marge supérieure, c'est tout le body qui descend. Tu peux remarquer ce comportement en appliquant des couleurs de fond différentes pour les éléments html et body par exemple.
Modifié par Benjamin D.C. (26 Apr 2007 - 16:17)
CPascal a écrit :
a ce css^^ a mon avis c un bug car si dans le div content tu place qquelquechose avant le div conteneurphoto alors la ton margin apparait.

It's not a bug, it's a feature.

Plus sérieusement, c'est un comportement tout à fait normal et détaillé dans les spécifications CSS 2.1. Seul Internet Explorer a parfois du mal à l'appliquer, à cause de bugs internes. Quoi qu'il en soit, ça s'appelle la fusion des marges, ça peut s'avérer fort pratique dans certains cas (gestion d'un flux d'éléments de contenu), mais dans d'autres il faudra s'en prémunir.

La référence qui va bien :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Bonne continuation (et ne pas oublier de marquer le sujet comme [Résolu] dès que ça sera le cas Smiley smile ).


Edit : grillé par Benjamin. Smiley biggol
Pas grave, comme je suis modo je vais lui supprimer son message, et comme ça je serai le premier à avoir répondu ! Smiley diablo
Modifié par Florent V. (26 Apr 2007 - 16:19)
je ne vois pas pourquoi ce comportement est normal ?

Par contre en effet seul le premier element est affecté une autre solution (car ca m'ennui d'appliqué un padding à mon div content qui sera réutiliser plutard sans padding sans doute) est de mettre &nbsp; et la ça fonctionne ....

allez savoir pourquoi Smiley smile
Bonjour,

Sinon, un padding-top: 1px a ton content sera efficace dans ton contexte pour les Ie FF et opera.
a écrit :

Edit : grillé par Benjamin. Smiley biggol
Pas grave, comme je suis modo je vais lui supprimer son message, et comme ça je serai le premier à avoir répondu ! Smiley diablo


C'est quand même bien pratique d'être modérateur. Smiley lol
A une minute près ... pour les non-modérateurs faut apprendre à taper plus vite (sans regarder les touches hein Smiley cligne ) pour pas se faire griller lamentablement Smiley biggrin
Modifié par yodaswii (26 Apr 2007 - 16:38)
Florent V. a écrit :
Edit : grillé par Benjamin. Smiley biggol
Pas grave, comme je suis modo je vais lui supprimer son message, et comme ça je serai le premier à avoir répondu ! Smiley diablo
Qu'est-ce qu'ils sont perfides ces modos! Smiley rolleyes Smiley ravi

ghost a écrit :
un padding-top: 1px a ton content sera efficace dans ton contexte
C'est vraiment pas bête ça, je n'y avais jamais pensé tiens! Ceci dit, personnellement ça m'em*** un peu d'avoir un pixel qui traîne, mais bon, mon cas est franchement désespéré aussi... Smiley ravi
Re,

Un border-top dans la même couleur doit le faire aussi ? comme ça , le pixel ne trainera plus ... (presque Smiley biggol )
Benjamin D.C. a écrit :
C'est vraiment pas bête ça, je n'y avais jamais pensé tiens! Ceci dit, personnellement ça m'em*** un peu d'avoir un pixel qui traîne, mais bon, mon cas est franchement désespéré aussi... Smiley ravi

Il y a aussi comme solution :
- le padding-top: 0.1px (marche avec Firefox... mais je crois qu'Opera ne le prend pas en compte... à tester !) ;
- le border-top: solid 1px <couleur de fond du bloc parent>; ;
- le contexte de formatage à coup de overflow: auto|hidden.

Bref, ya quand même de quoi s'en sortir correctement. Smiley smile
Florent V. a écrit :

Il y a aussi comme solution :
- le padding-top: 0.1px (marche avec Firefox... mais je crois qu'Opera ne le prend pas en compte... à tester !) ;
- le border-top: solid 1px <couleur de fond du bloc parent>; ;
- le contexte de formatage à coup de overflow: auto|hidden.

Bref, ya quand même de quoi s'en sortir correctement. Smiley smile
Ah heum... certes. Smiley confused Je n'avais jamais vraiment réfléchi à ce "problème", j'ai juste pris l'habitude du padding-top appliqué au conteneur — solution qui me semble par ailleurs la plus simple et propre.
Merci pour ces précisions Smiley jap
Sujet clos
Aller à