List + image

Bonjour,

Voila j'ai une liste de lien ( qui ont une image de background a gauche comme puce ), et je voudrais mettre une image à gauche de la liste.

Quand je test avec un float:left sur l'image, le text se décalle bien à droite de l'image, mais les puce reste dessous.
Css:

img{float:left;}

ul {list-style-type: none; margin:0px; padding:0px;}

ul li a {
display:block; 
background-image:url("images/puce.gif"); background-repeat:no-repeat; background-position:0 9px;
padding-left:10px; 
}

Html:

<p class="paragraph">
  <img src="images/pic.gif" />
  <ul><li><a href="#">test</a></li><li><a href="#">test</a></li></ul>
</p>

Une idée ?

Hello

As-tu un exemple graphique du résultat ?

Si j'ai bien compris, tu veux une liste d'éléments qui ont tous une puce en arrière-plan et une image à gauche avant ta liste ?

Si c'est le cas, tu peux essayer un margin-left sur <ul> (taille du margin = largeur de l'image + quelques pixels pour aérer).

Par exemple si tes images font 100px de large :

ul {
...
margin-left:110px; }

Pour éviter le problème de dépassement des flottants (IE) il va aussi falloir ajouter la propriété overflow sur ton <p> :

p.paragraphe {
...
overflow:auto; }

Déjà merci pour ta réponse

Donc si tu veux un exemple : TEST

Le 2e cas est l'exemple de mon problème que j'ai cité, le 3e cas montre ce que je voudrais ( effectivement avec une marge sur l'UL ) cependant, je voudrais que cette marge se trouve sur "l'image" que je rajoute ou non, pour pouvoir être géré directement dans la CSS, et ne pas avoir a rajouter une class ou mettre en dur le margin-left dans le code HTML.

Alors pourquoi ne pas décaler ton lien tout simplement ?

ul li a {
margin-left:...px; }

je trouve que c'est un peu pareil que de décaller l'ul, je sais pas si tu vois ce que je veux dire, mais un truc genre:
img { margin-right : ...px; } serait bien, non ?