28172 sujets

CSS et mise en forme, CSS3

"Float:left" et listes (ul>li)

Bonjour,
j'ai un problème en CSS :

considérons ce code html : un texte avec un paragraphe est une liste a puce



<div>
	<p>lorem ipsum</p>
	<ul>
		<li>element 1</li>
		<li>element 2</li>
		<li>element 3</li>
	</ul>
</div>

voici ce que j'obtiens :
upload/11829-1.png

je décide d'ajouter une image à gauche pour illustrer ce texte


<div>
	<div style="float:left;"><img src='img.jpg'></div>
	<p>lorem ipsum</p>
	<ul>
		<li>element 1</li>
		<li>element 2</li>
		<li>element 3</li>
	</ul>
</div>

voici ce que j'obtiens :
upload/11829-2.png

comment faire pour garder mon padding/margin sur ma liste à puce ?
Modifié par cpartiot (14 Oct 2009 - 17:31)
en effet Smiley confused

j'ai corrigé le code, mais le probleme ne vient pas d'ici
Modifié par cpartiot (14 Oct 2009 - 17:34)
Tu dois pouvoir te passer du <div> qui encapsule ton image et appliquer directement la propriété float:left sur l'image elle même. Tu peux également appliquer une marge à droite de ton image pour ne pas qu'elle soit collée à ton paragraphe.
Penses à renseigner le alt sur tes images et évite d'appliquer des styles en ligne (à même les balise html).
Un overflow:hidden sur le <ul> corrigera peut-être ton problème de padding.
j'ai mis un div car je prévois de mettre plusieures images sur certaines pages

la marge droite et l'attribut "alt" sont prévus mais je ne l'ai ai pas mis ici pour simplifier le code.

les sites en ligne seront également dans une feuille de style mais je l'ai ai mis "en ligne" également pour simplifier la compréhension sur le forum

je vais essayer le overflow:hidden
oui mais le problème c'est que si on a une liste plus longue que l'image
avec le "float:left" on aura ca :

##### - elm1
#img# - elm2
##### - elm3
- elm4
- elm5
- elm6

avec les tableau on a ceci :
##### - elm1
#img# - elm2
##### - elm3
      - elm4
      - elm5
      - elm6
Sujet clos
Aller à