Image et liste à puces

Bonjour,

J'ai un drôle de problème. Je voudrais une image (sur la gauche) avec sur la droite, à côté de celle-ci et en dessous du texte. Bon jusqu'ici rien de bien compliqué. Mon problème apparait quand dans le texte, je mets des listes à puces : lorsque la liste est à droite de l'image, la puce passe sous l'image (sur IE) ou sur l'image (sur Firefox). Par contre, aucun problème lorsque la liste est en dessous de l'image, elle s'affiche bien, avec une tabulation (c'est cette tabulation que j'aimerais avoir tout le temps...).
Bon, comme vous n'avez sûrement rien compris, je vous mets un exemple de code :

	<div >
		<div style="float:left;">
			<img src="http://blogue.benefice-net.branchez-vous.com/archives/big_mac.jpg" />
		</div>

		<p>Salut les amis</p>
		<ul>
			<li>Test 1</li>
			<li>Test 2</li>
		</ul>
		<p>Salut !<br />Salut !<br />Salut !<br />Salut !<br />Salut !<br />Salut !<br /></p>
		<p>Salut !<br />Salut !<br />Salut !<br />Salut !<br />Salut !<br />Salut !<br /></p>
		<p>Salut !<br />Salut !<br />Salut !<br />Salut !<br />Salut !<br />Salut !<br /></p>
		<ul>
			<li>Test 1</li>
			<li>Test 2</li>
		</ul>
	</div>

Le même problème survient si l'image n'est pas dans une div et avec l'attribut "align=left".

Merci pour votre aide !
Modifié par PsychedeChed (16 May 2008 - 16:17)

Bonjour,

Les éléments flottants (ici le div qui contient l'image) ne repoussent pas les blocs mais uniquement leur contenu (texte, images, etc.). Tu peux en faire l'expérience en utilisant opacity: .5 sur le div flottant, et une couleur de fond vive pour tes paragraphes, listes ul, items de liste li, etc.

Ou encore jeter un oeil à ceci:
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Il y a assez peu de solutions. On peut s'arranger pour que la puce soit générée à l'intérieur de la boite de chaque élément li, avec un list-style-position: inside, et s'arranger pour que chaque li crée un contexte de formatage qui empêcherait le survol par les flottants. On peut donc tester:

ul li {
	overflow: hidden;
	list-style-position: inside;
}

ou bien éventuellement:

ul li {
	overflow: hidden;
	padding-left: 25px;
}