28172 sujets

CSS et mise en forme, CSS3

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) Smiley 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 :

<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 :

#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 !
mar a écrit :
sous IE

Version 6, 7 ou 8?

À priori je dirais que ton problème se situe uniquement dans IE6, qui ne supporte pas la propriété min-height. Voir dans les astuces (partie Apprendre du site) une technique pour avoir l'équivalent d'un min-height dans IE6.
Modifié par Florent V. (10 Feb 2009 - 15:14)
Sur la version 7 déjà.
L'image du bas du blocen background ne reste pas sous l'image du contenu
Sous IE 6, l'image du bas en background se place à la droite de l'image du contenu
mar a écrit :
Sur la version 7 déjà.
L'image du bas du blocen background ne reste pas sous l'image du contenu

Ok, ça c'est «normal», c'est un problème lié au HasLayout (faire une recherche dans la partie Apprendre si ce concept n'est pas connu). Le bloc qui dessine l'image du bas a une hauteur fixe, et a donc le layout. En conséquence, il ne peut pas être survolé par un flottant (un peu comme s'il formait un contexte de formatage via un overflow:hidden).

Tu aurais plutôt intérêt à placer cette image comme image de fond du conteneur. Et comme tu as deux images de fond, tu peux jouer sur des blocs (DIV) imbriqués pour placer chaque image de fond.
Merci pour ta réponse.

Il n'y a pas moyen de lui dire qu'il ne doit pas avoir de layout ?
Ça m'embête un peu de mettre les images en background...