28172 sujets

CSS et mise en forme, CSS3

Marge de div qui décale les div parents

Bonjour,

Je cherche l'aide avisée de vos lumières pour comprendre pourquoi une marge d'un div décale les div parents

J'ai le code html suivant :
<body>
	<div id="shadow_l">
		<div id="shadow_r">
			<div id="container">
				<div id="header">
					<div id="logo">
					</div>
				</div>
				<div id="content">
				</div>
			</div>
			<div id="footer">
			</div>
		</div>
	</div>
	
</body>


et le css suivant :
* {margin:0;padding:0;} 
img { border: 0 none; }

html{
	height: 100%;
}

body{
	background: #989898 url(./images/background.png) 0 0 repeat;
	height:100%;
}

div#shadow_l{
	margin: 0 auto;
	width: 995px;
	height:100%;
	padding-left: 10px;
	background: url(./images/shadow_l.png) 0 0 repeat-y;
}

div#shadow_r{
	height:100%;
	padding-left: 0px;
	padding-right: 10px;
	background: url(./images/shadow_r.png) 985px 0 repeat-y;
}

div#container{
	background: #fff;
	min-height: 100%;
}

div#header{
	background: url(./images/header_background.png) 0 0 repeat-y;
	height: 120px
}

div#logo {
	width: 223px;
	height: 62px;
	background: url(./images/logo.png) 0 0 no-repeat;
}

div#content{
	overflow: auto;
	padding-bottom: 20px;
}

div#footer{
	position: relative;
	background: url(./images/footer_background.png) 0 0 repeat-x;
	margin-top: -20px;
	height: 20px;
	font-size: 8pt;
	clear:both;
}


si je rajoute un margin: 30px; à mon div#logo tous les divs parent se prennent un décalage de 30px.
Je me demande si ce n'est pas lié à mon footer qui est en relatif?
J'ai le problème sous FF4.0 et IE8.0 mais pas sous IE8 en mode IE7
cf l'aperçu ci dessous ou tout devrait être collé en haut:
upload/36162-pbmarge.png
Modifié par CrazyTroopers (08 Feb 2011 - 16:09)
Salut,
j'ai toujours vu ça, et il semble que ce soit le comportement logique des margins.

En fait les margins ne sont pas des "padding autour de la boite", si 2 boites on un margin de 10px, elle seront en fait séparé non pas par 20px, mais par 10px parce que les margin vont "fusionner".
Ce qui se passe dans ton cas c'est que les margin-top des toutes tes boites "fusionnent" avant de s'appliquer.
Et logiquement, tu peux empêcher cette "fusion" en mettant un border ou un padding de 1px à #shadow_l.

Voilà j'espère que c'est compréhensible.
Bonjour,

Oui c'est un phénomène de fusion de marge.

Tu peux aussi mettre un simple padding : .1em; à #header.

Par contre je comprend pas l’intérêt de mettre de mettre des shadow l et r , t'aurais simplement mis un wrapper avec en fond une image de la même largeur ca aurait plus simple.

Ensuite pour ton logo tu aurais pu utiliser simplement une <img> avec l'attribut alt qui va bien. C'est dommage de faire perdre de l'information à ton moteur de recherche en mettant un logo en css, c'est préférable une image bien nommée avec un alt qui la décrit (mais pas trop).

En gros t'as la DIVite excessive.
Modifié par rs459 (09 Feb 2011 - 15:25)
Merci pour vos réponses

a écrit :
il semble que ce soit le comportement logique des margins

logique? peut-être mais pas intuitif alors...
au final j'ai mis mon logo en relatif sans marge mais left et top à 30px et ça à l'air de convenir

a écrit :
je comprend pas l’intérêt de mettre de mettre des shadow l et r

C'est juste pour réduire le poids de l'image (2 petits bouts valent mieux que une image de 1005px de large avec un gros blanc au milieu, non?)

a écrit :
pour ton logo tu aurais pu utiliser simplement une <img> avec l'attribut alt qui va bien

Oui c'est ce que j'ai fait au final, mais au début je ne savait pas si j'allais mettre une image ou un texte donc j'avais mis des div
a écrit :
C'est juste pour réduire le poids de l'image (2 petits bouts valent mieux que une image de 1005px de large avec un gros blanc au milieu, non?)


C'est négligeable un image de 1005px*1px c'est pas ça qui va bouffer ta bande passante surtout si tu l'optimises (et si tu as la main sur ton serveur la mettre en cache), sans parler du fait qu'avec 2 images tu fais 2 connexions. (C'est limité à 4 téléchargements parallèles par domaine normalement)

Dans l’hypothèse ou tu souhaiterais faire un design plus évolué qui diffère sur la hauteur et donc avoir besoin de 2 images, tu peux toujours retirer un shadow, en garder un qui contient ton desgin gauche (par exemple et mettre un background droite à ton container.
Modifié par rs459 (09 Feb 2011 - 17:56)
Sujet clos
Aller à