Discussion :

[Alain Dionne]

Bonjour,

Je rencontre un petit problème de dimensionnement d'un div.
Voici le code HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="contenu">
	<div id="contphotos">
		<div class="itemgalerie">
			une image et du blabla sur plusieurs lignes
		</div>
		<div class="itemgalerie">
			une image et du blabla sur plusieurs lignes
		</div>
		<div class="itemgalerie">
			une image et du blabla sur plusieurs lignes
		</div>
	</div>
</div>

Et voici 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
div#contenu {
	float:left;
	min-height:500px;
	width:75%;
	background-image:url(img_tmp/fond_contenu.jpg);
	color:#FDFDD4;
	font-family:Courier new;
	font-size:14pt;
	font-weight:bold;
	letter-spacing:-0.25pt;
	}
div#contphotos {
	width:90%;
	margin-top:5%;
	margin-left:5%;
	margin-right:5%;
	margin-bottom:5%;
	color:#000000;
	background-color:#FFFFBE;
	border-style:groove;
	border-width:medium;
	border-color:#3033EC;	
	padding-top:10px;
	padding-bottom:10px;
	}
div.itemgalerie {
	float:left;
	margin-right:20px;
	margin-left:20px;
	text-align:center;
	width:27.5%;
	}

Je souhaite que le div "contphotos" contienne les div "itemgalerie", ce qui devrait se traduire par un fond de couleur #FFFFBE englobant les div "itemgalerie". L'effet désiré est là avec IE, mais sur Opéra et FF, il n'y a qu'une bande horizontale (à cause des paddings et du width), sur laquelle "mordent" un peu les div "itemgalerie". Si je force l'attribut height (par exemple, à 300px), j'obtiens bien un rectangle de couleur #FFFFBE sur lequel sont les div "itemgalerie". Cependant, comme le nombre de ces div n'est pas défini à l'avance (générés à partir d'une base de données), et donc il peut y en avoir plusieurs lignes, je ne peux pas définir une fois pour toutes le height (ce serait trop facile...).

Je ne sais pas si je me suis fait comprendre, merci de votre aide...

[trotters213]

si c'est généré par une BD c'est que tu as un langage dynamique derièrre comme PHP ou ASP donc tu savoir avant l'affichage le nombre de ligne qu'il va y avoir. Tu multiplies ce nombre avec une valeur et tu la places à ta hauteur.

PS :

Code :

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

1
2
3
4
margin-top:5%;
margin-left:5%;
margin-right:5%;
margin-bottom:5%;

équivaut

Code :

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

margin5%;

et

Code :

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

1
2
padding-top:10px;
padding-bottom:10px;

équivaut

Code :

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

padding:10px 0px;

(si on considère que right et left sont à zéro).
De même pour

Code :

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

1
2
margin-right:20px;
margin-left:20px;

qui est la même chose que

Code :

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

margin:0px 20px;

et pour finir

Code :

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

1
2
3
border-style:groove;
border-width:medium;
border-color:#3033EC;

pareil que

Code :

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

border:groove medium #3033EC;

[Alain Dionne]

Merci pour cette suggestion. A vrai dire, j'y avais songé, mais je me demandais s'il existait une méthode plus "automatique" (genre un attribut que j'aurais oublié de préciser). Enfin, s'il n'y a rien d'autre, je m'en contenterai.



P.S. : je ne mets pas encore "Résolu", si quelqu'un a une autre idée...

[Kerod]

Il y a aussi la solution du display:inline mais bon

[Alain Dionne]

Bon, avec le display:inline, je n'ai pas le résultat souhaité (peut-être qu je ne m'en sers pas bien). Je vais donc plutôt utiliser la solution de trotters213.

Je continue à m'interroger sur le fait que IE fasse ce que je veux et pas FF (d'habitude c'est l'inverse )

[MasterOfChakhaL]

Salut,

tes itemsgalleries sont en float et sont donc sortis du flux de ta page, par conséquent ils ne sont pas pris en compte pour calculer la hauteur de leur parent...

un élément avec la propriété clear refuse de se coller à un élément en float et passe donc a la ligne tout en restant dans le flux...
Voilà quelque chose d'interessant à exploiter dans ta situation...

précision sur les valeurs possibles de la propriété clear:
-left: refuse les éléments flottants à sa gauche (les float right)
-right: pareil mais de l'autre coté
-both: se place forcément sous les éléments flottants...

je te suggère ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="contenu">
	<div id="contphotos">
		<div class="itemgalerie">
			une image et du blabla sur plusieurs lignes
		</div>
		<div class="itemgalerie">
			une image et du blabla sur plusieurs lignes
		</div>
		<div class="itemgalerie">
			une image et du blabla sur plusieurs lignes
		</div>
		<div class="spacer">&nbsp;</div>
	</div>
</div>

et le css correspondant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.spacer {
	clear: both !important;
	float: none !important;
	border: none !important;
	height: 1px !important;
	line-height: 1px !important;
	font-size: 1px !important;
	padding: 0 !important;
	margin: 0 0 -1px 0 !important;
 
	visibility: hidden !important;
}

les !important sont là pour éviter d'éventuelles interférences avec d'autres règles...

normalement, le résultat devrait être invisible et identique sur tous les navigateurs courants (testé et approuvé sous ie6 et opéra 9)

[Alain Dionne]

J'ai testé, ça marche !

C'est exactement ce que je cherchais, !!!