28173 sujets

CSS et mise en forme, CSS3

bonjour, comment faire pour que ma liste à puce apparaisse à droite de l'image et non en dessous ?

j'ai essayé avec display:inline, mais je n'y arrive pas ... essayé avec proprieté align de img aussi, mais rien ...

si vous connaissez le truc ... merci

exemple :

<div>
<img src="mon_image.jpg" />
	<ul>
		<li>000</li>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</div>
je crois que j'ai trouvé ...

style float:left sur l'img

et


<style type="text/css">
ul {
	list-style-position: inside;
</style>


les puces sont masquées par l'image sinon .


bon, si ça peut aider ...

mais si quelqu'un a une autre solution ... je prend aussi Smiley smile
Modifié par schizo (02 May 2007 - 19:36)
schizo a écrit :
mais si quelqu'un a une autre solution ... je prend aussi Smiley smile

La solution trouvée est la bonne.

Au passage : les puces sont effectivement par défaut en dehors des li. Ce qui fait qu'elles ne dépassent pas à gauche en temps normal, c'est le retrait de 2.5em à gauche des listes ul ou ol, retrait créé par un margin-left: 2.5em par certains navigateurs, et par un padding-left: 2.5em par les autres.

Si tu veux garder le style list-style-position: outside, et si tu connais à l'avance la largeur de l'image, tu peux appliquer à ul une marge correspondant à la largeur de l'image + le retrait voulu.

Si tu ne connais pas la largeur de l'image, tu peux jouer avec un contexte de formatage (avec un overflow: auto ou overflow: hidden... et un correctif pour IE6 qui ne crée pas de contexte de formatage en appliquant la propriété overflow). Je ne détaille pas, parce que c'est un peu compliqué, et si tu débutes en CSS ça risque d'être un peu difficile à saisir. Smiley cligne
Bonjour,

J'ai exactement le même problème, je ne connais pas la taille de mon image et j'ai donc besoin de ce "contexte de formatage".

Du coup, je veux bien les explications plus détaillé Smiley lol

Merci