28173 sujets

CSS et mise en forme, CSS3

Problème avec hauteur d'un bloc

Bonjour,

J'aimerai réussir à avoir un bloc d'information qui respecterai la taille d'une image... Avec le code ci dessous la taille du bloc ce cale sur la taille du texte, j'aimerai que la hauteur ce base sur le plus grand des deux...

ma page xhtml : 
<div id="blocProduit1">
<img class="imageleft" height="189" alt="Ringball" width="280" src="images/ringball.jpg" />
bla bla bla bla bla bla bla bla b
la bla bla bla bla bla bla bla bla bla bla bla bl bla bla  qsfqmklsjf 
</div>



Mon CSS : 
.imageleft{float:left;padding-right:3px; padding-left:5px; border:0; display:block}
#blocProduit1 {
display:block;
padding-bottom:30px;
}



D'avance merci pour votre aide
Modifié par mego (15 Mar 2006 - 18:00)
Bonjour Mego,

Un minimum de structure dans ton code serait la bienvenue.
Du texte "blabla" perdu dans un div c'est pas terrible. Smiley decu
Dans une balise <p> ce sera un bon début.
Tu souhaites que ton bloc d'information respecte la taille de l'image.
Donne lui les moyens de se dimensionner.

Petit détail, un div est un élément bloc, donc pas besoin de lui mettre un "display: block;"

Je t'invite aussi à lire cet article de Raphaël Goetter.

En outre, voici ce que je te propose :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<style type="text/css">
<!--
.imageleft {
border: 1px solid red;
float:left;
padding-right:3px; 
padding-left:5px; 
}

#blocProduit1 {
padding-bottom:30px;
}
#blocProduit1 p {
border: 1px solid red;
height: 189px;
margin-left: 285px;
width: 200px;
}
-->
</style>
<head>
<title>Untitled</title>
</head>
<body>
<div id="blocProduit1">
<img class="imageleft" height="189" alt="Ringball" width="280" src="img/top_news.gif" />
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl bla bla  qsfqmklsjf</p>
</div>
</body>
</html>


A+ Smiley cligne
Modérateur
bonjour,

un element flottant , a part dans IE , n'aggrandit pas automatiquement son conteneur....
solution classique, ajouter un element en clear:both; en dernier dans l'element conteneur, (defaut, cela peut interferer avec d'autre element flottant de la page , un menu par exemple et etirer de façon exagerer le conteneur.)

Une autre solution consiste a ne pas donner de taille de hauteurs au conteneur (height) et d'appliquer un overflow:hidden; ou auto; pour obliger le conteneur a "englober ses element flottants.
Defauts, on peut par exemple voir apparaitre une barre de scroll horizontal ... s'assurer alors que l'ensemble des contenus ne soient pas plus larges que le conteneur (padding inclus) et rendre l'ensemble des regles css "coherentes" en dimensionnant par exemple le parent si on donne des largeurs en pourcentage, sans reference IE autra bien du mal a appliqué un pourcentage a partir de rien.:).

Voila , j'espere que cela repond a ta question et que tu prend en compte le conseil de coingpomme qui te dis d'utiliser une balise de paragraphe qui porra contenir texte et img (qui sera donc le conteneur de ton flottant Smiley smile .

++
Sujet clos
Aller à