Afficher une liste sous un paragraphe avec une img en float:left

Bonjour,
fiou
rienque de faire tenir le résumé dans une ligne pour le sujet et j'en ai mal à la tête
Alors une petite image pour illustrer mon problème :



J'aimerai obtenir l'image 1

Ca a l'air simple comme ça, mais en fait je n'arrive pas à empecher le retour à la ligne de la liste après le paragraphe (l'élément p ne pouvant contenir l'élément ul).

Et du coup j'obtiens l'image 2
Ce qui, vous en conviendrez, est nettement moins joli

voila ce que donnerai le code si j'avais le choix :

<div>
<img src="lorem.gif" />
<p>Lorem ipsum dolor sit amet</p>
<ul>
    <li>lorem</li>
    <li>ipsum</li> 
    <li>dolor</li>
</ul>
<p>Lorem ipsum dolor sit amet</p>
</div>

Et voila ce que m'impose mon éditeur WYSIWYG

<div>
<p>
<img src="lorem.gif" /> <!-- tout contenu, même une image, est obligatoirement dans un <p> -->
Lorem ipsum dolor sit amet
</p>
<ul>
    <li>lorem</li>
    <li>ipsum</li> 
    <li>dolor</li>
</ul>
<p>Lorem ipsum dolor sit amet</p>
</div>

et le CSS

img {float:left; }

(oui c'est succinct, mais ya l'essentiel !)

Merci à tous
Arno
Modifié par Arnobaze (22 Feb 2011 - 15:55)

le <p> étant un élément de type bloc, il impose un retour à la ligne. C'est ce qui fait que ton élément <ul> est renvoyé sous l'image.

Une solution serait de tout mettre dans un <div> et sortir ton image du <p>. La spécification dit qu'aucun élément de type inline ne peut être enfant direct de body en xhtml 1.0 strict, c'est ce qui crée le problème avec ton image seule hors du <p>.


Finalement... Un éditeur WYSIWYG n'impose rien et ne doit rien imposer. Si tu as un drôle d'éditeur qui t'impose des choses, met le aux poubelles hein !!!

bonjour,

ton editeur devrait te laisser la possibilité de passer en mode source et appliquer une class ou un style au paragraphe pour le faire flotter a priori tu devrais même pouvoir passer ton paragraphe en float via un des boutons de mise en forme.
Quel est ton editeur ?

GC