Discussion :

[mdr_cedrick]

bonjour à tous
voici mon soucis

j'ai ce code html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="contenu">
 
   <div id="menu">
 
   </div>
 
   <div id="centre">
 
   </div>
 
</div>

et le 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
#contenu{
	background-image:url(../img/bg.png);
	width:860px;
	margin-left:auto;
	margin-right:auto;
}
 
#menu{
	width:200px;
	float:left;
}
 
#centre{
	width:660px;
	float:left;
}

en faite j'ai une image en background dans le <div id="contenu">
mais le problème c'est que si je ne défini pas de height dans le css je ne vois pas ce background même si il y a du contenu dans <div id="menu"> et <div id="centre">
je fais donc appel à vous pour m'éclairer dans ce problème

[Auteur]

bonjour,

un div prend les dimensions de son contenu. Comme tes div sont vides, leur hauteur est nulle

Maintenant comme #menu et #centre sont en float, ils sortent du flux normal de la page, donc même s'ils sont imbriqués dans ton #contenu, ils sortent du conteneur (ajoute une bordure à ton conteneur pour le vérifier). Pour contrer cela deux possibilités :
- mettre le conteneur en float ;
- ou rétablir le flux après ton div #centre :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<div id="contenu">
 
   <div id="menu">
 
   </div>
 
   <div id="centre">
 
   </div>
 <hr style="clear:both; visibility:hidden" />
</div>

[Bovino]

Effectivement, si ta div n'a pas de contenu, ses dimensions seront égales à 0, donc pas de background-image.

Mais si "menu" et "centre" ont du contenu, ils seront affichés au-dessus de "contenu".

Essaye d'attribuer à "menu" et "centre" un background-color: transparent et ça devrait (presque) marcher... car IE6 ne prend pas en compte la 'couleur' transparent

[Erwan31]

Pour info, le conteneur en float que conseil Auteur repousse ce comportement
dans la plupart des cas en impliquant d'ajouter un élément de dégagement
supplémentaire (hr clear) mais cette solution peut être intéressant...

Dernière solution ayant l'avantage de ne pas faire sortir le bloc du flux normal vis
à vis de son conteneur: overflow:hidden sur le conteneur, sachant que cette solution
requière un peu plus de vigilance sur le visibilité des contenus en cas d'agrandissement des polices.