[resolu]Une image, du texte, un saut de ligne, grmbl

Bonjour,

J'imagine que le sujet a déjà du être abordé, mais je n'ai pas réussi a trouver de réponse efficace. Mon problème est le suivant.
Je cherche un moyen "propre" pour gérer la chose suivante :
un div contenant une image (un petit picto 16x16) et une chaine de caractere ( message d'alerte ). Le tout se trouve dans un conteneur a dimension variable, il en va de meme pour la chaine de caractere.
Si jamais la chaine est suffisement courte et que le texte + picto tiennent sur une ligne, no problem, affichage nickel.
Par contre , des que le texte est trop long et/ou la taille du conteneur trop petite, le retour a la ligne fait passer le texte sous le picto , ducoup c'est assez moche.
Je voudrais qu'en cas de retour à la ligne, le texte conserve le meme alignement.
J'imagine qu'il ya quelque chose a faire avec des overflow ou des positionnement flottants mais je n'arrive malheureusement a rien.

Ci-joint le petit bout de code incriminé :

	<div class="alerte">
		<div class="alerteText">
			Une chaine de caractère tres tres tres trest tres tres tres tres tres tres tres tres longue
		</div>
		<img src="alerte.png" alt="alerte" />
		<br style="clear:right;" />
	</div>

et la css

div.alerte	{
	font-size:18px;
	font-family:Arial;
	color:#D24090;
	border:1px solid #D24090;
	font-weight:bold;
	padding: 3px 3px 3px 0;
	margin:25px 0;	
}
div.alerte img	{
	margin-left:5px;
	border:0;
	vertical-align: middle;
}
div.alerte div.alerteText	{
	float:right;
	width:100%;
	padding-left:30px;
	border:0;
}

Ceci etant l'etat a un instant T, ou j'essaye encore et toujours des trucs sans trop de succès

Merci d'avance
Modifié par rickdangerous (23 Jul 2007 - 16:19)

Pourquoi faire si compliqué ? est-ce qu'a priori un simple :

	<div class="alerte">
		<p>Une chaine de caractère tres tres tres trest tres tres tres tres tres tres tres tres longue</p>
		<img src="alerte.png" (+width+height...) alt="alerte" />
	</div>

et ensuite jouer avec les alignements :

.alert { ... }
.alerte p {...}
.alerte img {...}

ne suffirait pas ?

Le picto doit être à gauche ou à droite?

Sinon, une solution sympatoche:

[b]HTML:[/b]
<p><img>Bla bla du texte</p>

[b]CSS:[/b]
p {
	position: relative;
	padding-left: 20px;
}
p img {
	position: absolute;
	left: -20px;
}

On peut aussi travailler avec une image flottante et une marge sur le texte (dans un paragraphe dans ce cas).

Tente quelque chose, et reviens par ici si ça n'est pas concluant, en nous montrant ce que tu as essayé (page en ligne...).

ah oui, j'avais pas percuté sur le fait que le picto devait être dans la suite du texte, rôle que devait sûrement remplir la seconde div vu le float sur l'image. Ta solution est + mieux

merci a tous les deux ca marche nickel.

Seul bémol, je suis obligé de hack comme un gros sale pour la propriété left qui, biensûr, ne positionne pas au meme endroit sur ie et firefox, donc :
_left powered pour ie ( vu que j'arrive jamais a rien avec les !important )
Problème résolu !

rickdangerous a écrit :
Seul bémol, je suis obligé de hack comme un gros sale pour la propriété left qui, biensûr, ne positionne pas au meme endroit sur ie et firefox

Ah tiens? Je trouve ça étonnant. Quoique, j'avais peut-être croisé un bug comme ça (mauvaise prise en compte du padding de l'élément parent pour le positionnement absolu). Ou alors un bug de HasLayout. Ça donne quoi avec un zoom: 1 sur le bloc positionné en relatif?

rickdangerous a écrit :
_left powered pour ie ( vu que j'arrive jamais a rien avec les !important )

Voir du côté des commentaires conditionnels (cf. la FAQ du forum). Les hacks CSS sont à éviter (cf. la FAQ à nouveau ).