[Résolu] Liste avec puces à droite

Bonjour,

Est-il possible de réaliser une liste à puces mais en ayant les puces à droite ?
Sinon quel est le meilleur moyen de réaliser ce type de liste : faut-il alors placer l'image directement dans le code ainsi ?

<ul>
                  <li>
                        <a href="#">Pouet  <img src="puce.gif" /></a>
                  </li>
                  
                  <li>
                        <a href="#">Pouet  <img src="puce.gif" /></a>
                  </li>                  
                  <li>
                        <a href="#">Pouet  <img src="puce.gif" /></a>
                  </li>            </ul>

Merci à tous !
Modifié par pan (18 Oct 2008 - 14:08)

Bonjour pan,

Il est possible de les placer en background sur les éléments de liste.

Par exemple :

li
{
background: url(puce.png) right center;
}

Salut,

Je me permets de rajouter ceci :

/*CSS*/
li {
 background: url(puce.png) right center; 
 list-style-type:none; /*suppression du style par défaut des puces*/
}

<!--HTML-->
<ul>
    <li><a href="#">Pouet</a></li>
    <li><a href="#">Pouet</a></li>                  
    <li><a href="#">Pouet</a></li>           
</ul>

++

Bonjour,

Selon moi, les solutions de "Knarf" et de "Nolem" sont bonnes et devraient faire l'affaire, mais je me permets de les compléter :

li
{
background: url(puce.png) [b]no-repeat[/b] right center;
padding-right:[i]valeur dont tu as besoin pour espacer ton background de ton intitulé[/i]
}

Par contre, si tu optes pour ta solution

<img src="puce.gif" />

renseigne la largeur, la hauteur et un alt vide à ton image, ce qui donnerait :

<img src="puce.gif" width="[i]largeur de ton image[/i]" height="[i]hauteur de ton image[/i]" alt="" />

Modifié par mecho (17 Oct 2008 - 21:54)

pan a écrit :
Est-il possible de réaliser une liste à puces mais en ayant les puces à droite ?

Tiens quelle demande étrange ...

Au delà de la mise en place de la chose, n'est-ce pas un peu bizarre d'avoir ces puces à droite (juste une réflexion pas une critique) ?

li
{
background: url(puce.png) no-repeat right center;
list-style-type:none; /*suppression du style par défaut des puces*/
padding-right:valeur dont tu as besoin pour espacer ton background de ton intitulé
}

Ben oui c'te buse à vouloir aller trop vite
Modifié par knarf (17 Oct 2008 - 23:33)

C'est pareil, je vais trop vite en besogne et j'oublie quelques détails. Pas plus tard qu'aujourd'hui sur un message.
Modifié par Nolem (17 Oct 2008 - 23:32)

Ouais merci les gars c'est super ça fonctionne nickel !

Sinon le coup de la puce à droite c'est en fait pour avoir un lien vers une page "en savoir plus".
J'ai organisé ça avec une liste, du coup la puce m'arrangeait bien...
Merci