[Résolu] Image et texte dans un paragraphe

Bonjour,

Dans le contenu de mon site, une partie se compose d'images, avec une petite description de l'image. J'aimerais avoir les images à gauche, avec le texte correspondant à droite.
Si possible, je recherche une solution évitant l'utilisation de tableaux, et d'additionelles balises <div>, donc en utilisant uniquement les propriétés css pour les balises <p> et <img>.
J'ai trouvé une solution dans un tutoriel sur Alsacreations, le seul problème c'est que dans mon cas le texte est court et donc que l'image est plus haute que le texte.

Le code html est le suivant:

<h2>Titre1</h2>
<p class="normal">
	<img class="left" alt="plan" height="206px" width="275px" src="./images/plan.jpg" />
         Vous trouverez comment venir grace a ce plan.
</p>
<h2>Titre2</h2>
<p class="normal">
	<img class="left" alt="entree" height="367px" width="275px" src="./images/entree.jpg" > 
	Voici l'entree
</p>

Avec la partie css qui correspond:

p {
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
}
p.normal {
        font-size: 14px;
	color: #333333;
	text-align: justify;
}
p.normal img.left{
	float: left;
}

Le problème c'est que vu que l'image est plus haute que le texte, le paragraphe "Titre2" vient se mettre juste en-dessous du texte du paragraphe "Titre1", à droite de la première image, et non en-dessous. Je voudrais que le paragraphe "Titre2" démarre à la ligne, en-dessous du texte ET de l'image du paragraphe "Titre1"..
Quel serait la possibilité la plus simple pour arriver à ce résultat ??

Merci d'avance.

Merci Didodu258!

En effet, c'est une solution qui fonctionne parfaitement.

Seulement, au niveau du code ça m'embête un peu de mettre tout ces retours à la ligne, d'autant plus si je dois les rajouter pour chaque cas similaire dans les autres pages...

Dans l'idéal, j'aimerais trouver une solution un peu plus "jolie" (si elle existe bien sûr) qui ne rajoute pas trop au code XHTML mais plutôt au CSS si possible.

Après de nombreux tests, j'ai finalement testé la commande "clear: both" que j'ai mis dans le CSS, pour les balises p.normal et h2. Vu que les images sont flottantes, il fallait cela pour que "Titre2" revienne à la ligne (par contre, si je mets le clear:both seulement pour la balise p.normal, le titre du 2e paragraphe reste mal placé alors que le texte et l'image de ce même paragraphe sont correctement à la ligne).

Je ne connaissais pas cette propriété (je sais, mes bases sont incomplètes...), mais ça me semble pas mal.

h2 {
	color: #333333;
	text-align: left;
	padding-left: 5px;
	font-size: 16px;
	clear: both;
}
p.normal {
	text-align: justify;
	clear: both;
}

Si quelqu'un a une autre solution, faites m'en part, c'est toujours utile à savoir...
Modifié par maelito (19 May 2008 - 23:21)

Bonjour,

Je t'invite à lire cet article sur les listes de définition, particulièrement la fin, qui propose une manière très propre (et à mes yeux sémantiquement correcte) d'associer une image et un texte.

Cordialement, SD.

Merci SiDi.

Cet article est intéréssant, et je vais essayer de mettre en place une solution avec des listes, qui correspondrait bien au sujet. Je n'y avais pas pensé...