Liste avec puce image et ligne

Bonjour,

je voudrais faire une liste qui contient une puce personnalisée + une ligne pointillée entre chaque item de liste.
Pour l'instant j'ai créé une image que je mets en fond et qui contient les 2 éléments (puce et ligne).

#leftPanel .benefice ul li{width:560px; display:block; height:21px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:13px; color:#000000; line-height:18px; text-decoration:none; background:url(images/listbg.jpg) no-repeat}

C'est bien sauf que quand un item est sur 2 lignes ça ne fonctionne plus puisque la ligne se retrouve derriere la 2ème ligne.

Quel est le moyen le plus propre pour arriver au même résultat sans avoir cette contrainte?

Merci d'avance

Salut,

Pourquoi ne pas remplacer cette ligne par un border-bottom ?

En utilisant list-style-image ?

Merci
je vais essayer list-style-image

ça donne ça

#leftPanel .benefice ul{width:560px; margin:8px 0 0 30px; padding:0px; float:left; display:block; list-style-image:url(images/lineDot.jpg);}
#leftPanel .benefice ul li{width:560px; display:block; height:21px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:13px; color:#000000; line-height:18px; text-decoration:none; background:url(images/listbgSingle.jpg) no-repeat} 

Par contre la ligne n'apparaît pas...Normal?

Encloses tes valeurs url entre quotes. Et termines tes définitions CSS par un point-virgule:

background:url(images/listbgSingle.jpg) no-repeat

Tu as vraiment besoin du display block ? Et du padding à 0px ?

Attends. list-style-image te permet de définir les listes à puces persos, plutôt que d'utiliser un truc tordu à coup de background (de faire des vraies puces persos, en fait).
Là, tu t'y prends à l'envers.

Et pareil que dis plus haut, ça c'est pour les puces persos, pour les pointillés, tu as les styles de border qui marchent TRES bien.
Modifié par Lpu8er (07 Sep 2011 - 15:14)

effectivement c'est plus propre avec border.

Par contre je l'ai rajouté dans li

#leftPanel .benefice ul{width:560px; margin:8px 0 0 30px; padding:0px; float:left;}
#leftPanel .benefice ul li{width:560px; display:block; height:21px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:13px; color:#000000; background:url(images/listbgSingle.jpg) no-repeat; line-height:18px; text-decoration:none; border-bottom: thin dotted #707070} 

...mais quand un <li> est sur 2 lignes, c'est toujours le même problème, la border se met en bottom de la 1ère ligne et non du <li> dans sa globalité.

C'est normal, tu as un height défini sur ton li.

Agylus a bien résumé. Si tu as besoin d'une taille minimale, min-height fonctionne très bien sur les éléments de liste.

ok mais jsuis censé supprimé le line-height?
Pas mieux en le supprimant en tout cas...

j'mentionne peut-être plus d'éléments car j'ai ptet fait une bourde ailleurs...

Dans ma page :

<div class="crosslist">
        <ul>
         <li>item1</li>
         <li>item 2</li><li>En cas de réservation de dernière minute (moins de 30 jours)  le règlement de la totalité est exigéà la réservation.</li>        
        </ul> 
       </div>

(merci au modo de suppri le précédent message)
Plus de détails donc.

Dans ma page :

<div class="crosslist">
        <ul>
         <li>Item 1</li>
	 <li>Item 2</li>
         <li>Item 3 mega long sur 2 lignes, Item 3 mega long sur 2 lignes, Item 3 mega long sur 2 lignes</li>
        </ul> 
       </div>

Dans mon css :

#leftPanel .crosslist ul{width:560px; margin:8px 0 0 30px; padding:0px; float:left;}
#leftPanel .crosslist ul li{width:560px; display:block; height:21px; margin:0px; padding:0 0 0 10px; float:left; font-family:Arial; font-size:13px; color:#000000; background:url(images/listbgSingle.jpg) no-repeat; text-decoration:none; border-bottom: thin dotted #707070} 

Le but : afficher une ligne entre chaque item de liste en gérant le multilignes (cf item3).

Merci

On n'a pas parlé du line-height, mais du height.

ah oui dis donc, pardon j'avais mal lu.
Ca commence à aller mieux.

Le problème est maintenant inverse, chaque <li> est sur 2 lignes, même si l'item est sur une ligne.

Donne nous une page en ligne représentant ton problème, ça ira beaucoup plus vite.

pas faux
Page : http://nesmedia.fr/test.html
CSS : http://nesmedia.fr/styles.css

tous les items sont sur 2 lignes donc...

et dans l'idéal je voudrais que la ligne ne soit pas aussi large (réduction de 2/3).
Possible ça?

Tu as encore un height ici :

#leftPanel ul li {}

et un autre ici :

#leftPanel ul li a {}

Modifié par Agylus (08 Sep 2011 - 09:52)

ah ouai top merci!
Et jpeux donner une valeur width à un border pour la réduire?

Non, mais tu peux réduire la taille de tes li.

oui.
Mais on est d'accord que la boite va suivre aussi?
Et donc que la bordure prend automatiquement la même dimension que sa boite...