Discussion :

[marmite]

Bonjour,

J'ai un problème avec un bloc dont l'arrière plan est un dégradé, qu'il doit s'agrandir en fonction du contenu, qui doit avoir une taille minimum, qui contient une image à droite et du texte à gauche et a un "pied" qui doit toujours se trouver en bas du bloc (sachant que ce "pied" devrait se trouver sous l'image si le contenu n'est pas plus long que l'image) sweatdrop

J'ai à peu prêt réussi tout ça : Tout va bien pour Firefox, mais sous IE le bloc se place sous l'image. Ce qui agrandi le bloc de 85px...

Pour que ce soit plus concret : lien

Mon HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="green_block">
	<div class="top_green_block"></div>
	<div class="content_green_block">
		<img src="images/big_baby.jpg" />
		<h2>Les cours</h2>
		<p>tout le texte</p>
	</div>
	<div class="bottom_green_block"></div>
	<div class="spacer"></div>
</div>

Mon CSS :

Code css :

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
#content .green_block{
	background: url("../images/background_green_p.jpg") repeat-y;
	height:auto;
}
 
#content .green_block .content_green_block{
	background: url("../images/top_green_p.jpg") no-repeat 0 0;
	margin:0;
	padding:17px 50px 0 50px;
}
 
#content .green_block .content_green_block{
	margin:0;
	min-height:219px;
}
 
#content .green_block .bottom_green_block{
	background: url("../images/bottom_green_p.jpg") no-repeat;
	margin:0 0 20px 0;
	height:89px;
}
 
#content .green_block img{
	float:left;
	margin:0 12px 12px 0;
	border:1px solid #464f10;
	z-index:100;
}
 
#content .green_block p{
	margin-top:0;
}

Si vous avez des réponses à mes interrogations, je vous remercie par avance !

[Macmillenium]

Bonjour,

Tu n'as pas de bloc flottant donc enlève la div .spacer qui ne sert a rien et qui n'a aucune valeur sémantique.
En plus clear:both; n'est pas la meilleur solution et source de plusieurs problèmes.

[marmite]

Et bien ça ne change rien...

[GihefBey]

Bonjour,

J'ai du mal a comprendre

... un "pied" qui doit toujours se trouver en bas du bloc (sachant que ce "pied" devrait se trouver sous l'image si le contenu n'est pas plus long que l'image)
... mais sous IE le bloc se place sous l'image. Ce qui agrandi le bloc de 85px...

Que cherches-tu à obtenir exactement ?

Sinon, un clear: left; sur le bottom_green_block devrait convenir.

-

[marmite]

ah oui, en effet, je me suis mal exprimée... En fait le résultat voulu est celui de firefox, je veux que "bottom_green_p.jpg", l'image avec les silhouettes des chevaux soit caché par l'image du contenu si le texte de droite et moins long que la hauteur de l'image du contenu.
Ce qui ne fonctionne pas sous IE 7 (et moins d'ailleurs)