Discussion :

[jaljal]

Bonjour,
pourquoi si je met ce code le background-image ne s'affiche pas dans le div profils ?

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
 
<div style="background-image:url(images/profils.gif); width:345px"> 
<div style="text-align:center">PROFIL ALEATOIRE</div> 
<div id="profils"> 
<div style="float:left"> 
colonne 1 
</div> 
<div style="float:left"> 
colonne 2 
</div> 
<div style="float:left"> 
colonne 3 
</div> 
 
</div> 
</div>

y a t'il une explication à ça ?

[hakurou]

salut,

En fait l'image s'affiche correctement, mais les elements flottant n'allongent pas le div conteneur.
tu peux verifier en spécifiant une hauteur a ton conteneur.

Sinon, regarde, j'ai modifié ton code pour tester :

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
 
<div style="background-image:url(images/profils.gif); width:345px;"> 
	<div style="text-align:center">PROFIL ALEATOIRE</div> 
	<div id="profils"> 
		<div style="float:left"> 
			colonne 1 
		</div> 
		<div style="float:left"> 
			colonne 2 
		</div> 
		<div style="float:left"> 
			colonne 3 <br />colonne 3 <br />colonne 3 <br />colonne 3 <br />colonne 3 <br />
		</div> 
	</div> 
	<div style="clear:both">footer</div>
</div>

et le fond s'affiche correctement

[jaljal]

Merci pour la réponse, j'ai testé ton code modifié et le fond s'affiche correctememnt, mais je voudrais comprendre

mais les elements flottant n'allongent pas le div conteneur.

qu'est ça veut dire?

[FoxLeRenard]

Merci pour la réponse, j'ai testé ton code modifié et le fond s'affiche correctememnt, mais je voudrais comprendre
qu'est ça veut dire?

Il veut dire que le div contenant le background doit avoir une dimention
si non, le fait de lui mettre un contenant (des données dans les div qu'il contient), ne suffit pas !

[hakurou]

Les elements flottant, c'est a dire les elements auxquels tu mets ton float:left;, float retire l'element du flux pour pouvoir le positionner soit a gauche, soit a droite, de ce fait, l'element parent est considéré comme vide (vu que l'element fils est hors du flux, flottant).

pour regler cette affaire, tu peux soit mettre une taille a ton parent, soit bidouiller avec un div auquel tu mettras le style "clear"

[jaljal]

OK, j'ai spécifié un height et ça marche

Merci à vous