Float ; problème d'affichage

Bonjour,
J'ai un petit problème de flottante. J'ai fait des recherche, mais n'ai pas trouvé de solution à mon problème précisément.

Voici l'une des page problématique

Voilà, sur mes page de présentation de produits, tout en bas je présente les compléments au dit produit exposé sous forme d'image. Lorsque l'on passe devant les images de compléments, une boîte apparait avec la photo du complément et un texte descriptif.

Mon problème se situe là. J'utilise un float left pour positionné la photo à gauche. Mais lorsque le texte est plus long que la hauteur de la photo, les dernières lignes de texte passe sous la photo (c'est le cas de l'avant dernier item de la liste). J'aimerais que le texte reste tout aligné.

J'ai tenté de positionné le texte en float left, mais sous FF le block de texte passe sous la photo... ce qui n'est pas le cas sous iE7, où le tout s'affiche correctement. Bizzare puisque d'habitude c'est iE qui pose problème.

Je ne peux pas mettre un margin en particulier sur ce block car toutes les photos n'ont pas la même largeur.

Merci pour votre aide!

    <a href="" id="lien">
		<img src="IR-6_fichiers/PV-24.png" alt="PV-2,4" width="117" height="70">
		<div id="descr"> <img src="IR-6_fichiers/PV-24.png" alt="PV-2,4" width="166" height="100">
				<p>
				<h4>PV-2,4</h4>
				Lecteur de photo avec écran de 2'', pour carte SD, MP3, MP4, radio, enregistreur numérique. <br>
				Mémoire interne de 1GB.<br>
				Écouteurs, câble USB, pile rechargeable au lithium et chargeur inclus.
				</p>
		</div>
	</a>

#descr{
	z-index: 65;
	display:none;
	position:absolute;
	/*bottom: -10%;*/
	left: 50%;
	margin-left: -200px;
	margin-top: -170px;
	/*width:400px;*/
	padding: 10px;
	background-color: #d97818;
	border: 1px solid #000;
	border-radius:1em; /*pour IE [smile] */
	-moz-border-radius:1em; /*pour Firefox [smile] */
	-khtml-border-radius:1em; /* pour safari*/
}
#descr img{
	display:block;
	margin: 0px 10px 20px 0px;
}
#descr p{
	font-size: 0.8em;
	display:block;
	/*float: left;
	min-width: 180px;*/
	padding-left: 0px;
	text-align:left;
}
#descr h4{
	font-size: 1em;
	display: block;
	font-weight: bold;
	color: #000;
	text-transform: capitalize;
	margin: 0px 0px 5px 0px;
}

Modifié par simon.bdard (08 Feb 2010 - 21:08)

Désolé, je n'ai pas pris le temps d'expliquer ma démarche. Je crois que le problème viens est que tu as mis une largeur FIXE, width:400px, sur le bloc #desc(ce bloc devrait être une CLASS et non un ID puisque tu l'utilise plus d'une fois dans cette page, tu devrait donc modifier #descr par .descr
et <div id="descr"> par <div class="descr">).

Deuxièmement, ton titre <h4> devrait être placé à l'intérieur de ton <p> si je ne me trompe pas.

Aussi, je crois que tu devras apporter quelques correctifs à ta feuille de style pour Internet Explorer 6.
Modifié par simon.bdard (08 Feb 2010 - 21:12)

Salut
MErci pour la réponse.

J'ai changé les id:desc et class comme tu m'as suggéré, je me doutais bien qu'il allait falloir changé ça éventuellement.

Pour ce qui est de la largeur fixe, elle est nécessaire. Si je l'enlève, le block s'adapte au contenu, et c'est la catastrophe. Donc je garde la largeur fixe.

simon.bdard a écrit :

Deuxièmement, ton titre <h4> devrait être placé à l'intérieur de ton <p> si je ne me trompe pas.

Bonsoir,
Je n'ai pas suivi le débat, je m'arrête juste pour te confirmer que tu es dans l'erreur :
A lire : http://www.alsacreations.com/tuto/lire/530-La-structure-des-balises-bloc-et-en-ligne.html
Pour paraphraser cet excellent tutoriel, un paragraphe (de type de rendu bloc) devrait pouvoir contenir une (ou plusieurs) balise de type de rendu block et/ou en-ligne, sauf exceptions...et tu t'en doutes, p est une exception, il ne peut être parent que d'éléments en-ligne, hors les titres de niveau (hn...) sont de type de rendu bloc

Cdt,
Sylvain

Il me semblait bien aussi que c'était une erreur.
Merci pour les précisions.

En attendant mon problème demeure...

Déjà, je te conseille de valider ta page.

Je crois que le problème vient du fait, que tu as des éléments "blocs" dans un lien ( <a> ) qui lui n'est pas en bloc ( même en CSS ).

Si tu ajoutes display:block à ton <a>, ça semble régler ton problème dans firefox.

Cependant, je suis presque persuadé qu'une des erreurs de validations provient du fait que tu as plein d'éléments ( comme le h4 ) dans ton <a> qui cause problème.

À valider !

J'ai corrigé en profondeur mon code (changé les balise <a> pour des <div>, changé les id=lien pour des class, etc.), maintenant les pages sont valident.

Mais le problème existe encore.
Même après les changements apporté au code, si j'applique un float left à mon <p> dans la boîte, il passe toujours en dessous de l'image.

Le problème est "normal" puisque tu n'as pas de "width" sur ton paragraphe. Or, le <p> s'étire au maximum de son parent. Sauf que tu comprendras que si le <p> est aussi large que son parent, il ne peut pas se placer à côté de l'image ( car ce serait trop large image + <p> ).

Ajoute un width fixe à ton texte et ça devrait régler ton problème.

Salut!
J'ai essayé comme tu as dis, mais c'est pas concluant. Ça ne fonctionne qu'une fois sur deux... pourtant le width appliqué est plus petit qu'il ne pourrait l'être.

J'avais pourtant cru comprendre qu'avec les floats, les block prenaient l'espace restant...

EDIT: Le plus frustrant c'est que c'est parfait sous iE7... il n'y a que sous FF que ça pose problème.
EDIT 2: sous iE8 aussi y'a le problème...
Modifié par juliesunset (10 Feb 2010 - 15:15)

Pourtant, dans Firefox ( avec Firebug ) si j'ajoute ceci, ça fonctionne comme sur IE7 sur toutes les boîtes.

.descr p {
width:175px;
}

Un float ça "wrap" le contenu d'un bloc. Donc, ça rend le bloc à son minimum mais s'ajuste quand même au contenu du bloc.

Fais toi un nouveau fichier html et mets le code suivant. Ça t'aidera peut-être à comprendre.

<p style="border:1px solid blue;">No float, pleine largeur</p>
<p style=" float:left; clear:both; border:1px solid red;">Float wrap</p>

En gros, sans float, le bloc prend 100% de son parent. Avec un float, le bloc prend 100% de son contenu ( donc y wrap au minimum possible ). Sauf que dans ton cas, il y a tellement de texte que le "wrap" de ton paragraphe correspond à la largeur fixe de son parent.

Sur le URL que tu as mis dans ton premier message, il n'y avait pas de dimension fixe. Si tu peux ajouter la largeur fixe et la remettre en ligne, je pourrai mieux voir si ça fonctionne toujours pas.

Bon j'ai mis en ligne un css avec un width fixe, mais je n'aime pas du tout l'effet que ça donne pour certaines boîtes...

En bout de compte la solution que j'ai trouvé est d'enlevé le float et le width, comme à l'origine, puis d'appliqué un margin-left à la boîte problématique, puisque qu'il n'y a que celle-la qui pose problème....