28220 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement de texte à côté d'une image flottante

Bonjour,

Je viens de me mettre au CSS mais j'ai encore des problèmes pour réaliser des choses basiques. Je pense que le sujet à déjà été traité mais j'ai rien trouver.

Voilà mon problème, je souhaite faire une page avec des actualités qui se résume à du texte et une image flottante à droite. Le problème est que l'image étant flottante, elle sort du flux et vient se superposer sur l'actualité suivante si il n'y pas assez de texte pour "pousser" le block vers le bas.

L'explication ne doit pas être très clair, c'est pour ça que j'ai mis mon exemple en ligne là. Sous IE ça marche sans problème mais sous Firefox, ça ne marche pas.

- Dans la première actualités, l'image est flottante sur la droite.
- Dans la deuxième actualités, l'image est aussi flottante sur la droite mais j'ai rajouté à la fin une balise bidon pour faire un clear right. J'ai vu cet astuce sur le forum mais je ne trouve pas ça propre. Ca fonctionne sous Firefox mais sous IE, cela rajoute une ligne blanche.

Vu que ce problème est courant, comment faites vous pour gérer les images flottantes dans des news ?

Merci pour votre aide Smiley smile


Code php/html :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Document sans titre</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

	<div class="news">
		<h1>Titre</h1>
		<h2>Date</h2>
		<img src="massy.jpg">
		<p>bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
	</div>

	<div class="news">
		<h1>Titre</h1>
		<h2>Date</h2>
		<img src="massy.jpg">
		<p>bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
		<div style="clear:right"/></div>
	</div>

</body>

</html>


Code css :

/* ------- NEWS -------- */

.news {
	border : solid;
	width : 400px;
	margin:1px;
}

/* Image */
.news IMG {
	float:right;	
}

/* Commentaire */
.news P {
}


Sous firefox : on voit bien que l'image de la première news vient rogner sur la deuxième news

upload/3017-firefox.jpg

Sous IE :
upload/3017-IE.jpg
Modifié par ebunel (19 Aug 2005 - 13:25)
J'ai trouvé la solution là. En fait, il faut bien utiliser une balise "bidon" nommé spacer que j'ai utilisé pour la deuxième news.

Je suis un peu déçu par cette solution qui relève plutôt du bricolage qu'autre chose. Je trouve quand même bizarre que le CSS ne gère pas ce problème proprement.
Sujet clos
Aller à