28172 sujets

CSS et mise en forme, CSS3

Mettre une image à la place d'une puce dans une liste

Bonjour à tous,

Mon problème est le suivant :
je souhaite mettre une image créée par moi-même à la place des puces standards proposées par le css.

J'ai essayé les fonctions list-style, list-style-image et list-style-type mais cela ne fonctionne pas.
L'image que je veux mettre est plus grosse que les modèles de puces proposés (15px de côté) mais je ne pense pas que cela vient de là (j'ai réduit mon image jusqu'à 4px de côté et cela ne change rien).

Mon code html :
[code=html]
<html>
<div class="literature">
<ul class="request">
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</div>

</html>
[/code=html]

Mon code css :
[code=css]
.literature
{
background:url("../Images/menu-gauche2.jpg") no-repeat;
width:196px;
height:142px;
position:absolute;
}

ul.request
{
padding: 0;
width:196px;
height:100px;
margin-top:20px;
margin-left:7px;
line-height:30px;
font-size:1em;
font-weight:bold;
color:#ffffff;
text-decoration:none;
list-style-type:none;
}

ul.request li a
{
padding-left:19px;
color:#ffffff;
text-decoration:none;
list-style-image:url("../Images/flecheorange.jpg") no-repeat;
}

ul.request a:hover, #navigation li a:focus, #navigation li a:active
{
text-decoration:none;
color:#ffffff;
list-style-image:url("../Images/fleche-blanche.jpg") no-repeat;
}
[/code=css]

Pensez-vous qu'il est possible de personnaliser les puces d'une liste ? Je commence à en douter sérieusement... Peut-être une erreur dans mon code que je ne vois plus...

Merci pour votre aide ! Smiley smile

PS : désolée si les problèmes d'affichage sont toujours présents dans mes posts, je dois avoir un problème sur mon navigateur mais je n'ai pas encore trouvé lequel.
Le problème vient du fait que tu défini la propriété sur l'élément a : 
ul.request li [#red][b]a[/b][/#]
{
padding-left:19px;
color:#ffffff;
text-decoration:none;
list-style-image:url("../Images/flecheorange.jpg") no-repeat;
}


C'est sur l'élément ul (ou li) que doit être défini l'image donc : 
ul.request
{
padding-left:19px;
color:#ffffff;
text-decoration:none;
list-style-image:url("../Images/flecheorange.jpg") no-repeat;
}
oui mais justement, cette liste n'est composée que de liens.

Car si je fais comme tu m'as dit, ça fonctionne mais comme tout mon texte de la liste est un lien, au final cela ne change pas grand-chose.

Mais je ne comprends pas pourquoi une puce ne pourrait pas s'afficher lorsque le texte est un lien ?

Saurais-tu pourquoi le css ne possède pas cette propriété ? Y aurait-il des bugs si cela était possible ?

Merci en tout cas d'avoir pris du temps à me répondre Smiley smile
Les list-style- sont des propriétés de liste, elles doivent donc uniquement et exclusivement être appliquée à des éléments de liste (ul, ol, li) c'est tout simplement logique.

<a> n'est pas prévu pour avoir une puce, c'est un attribut spécifique des listes à puces. Il est donc tout à fait normal qu'on ne puisse pas lui définir une puce (même s'il est possible d'en simuler une).

a écrit :
Car si je fais comme tu m'as dit, ça fonctionne mais comme tout mon texte de la liste est un lien, au final cela ne change pas grand-chose.

Ce qui change, c'est que cela fonctionne !

a écrit :
Saurais-tu pourquoi le css ne possède pas cette propriété ?

Il la possède, mais elle a comme toute les autres, des restriction quand à son utilisation.
D'accord je n'avais pas compris cette particularité.

Donc ça fonctionne mais du coup, moi qui voulait changer l'image de la puce quand le lien est survolé (a:hover), c'est-à-dire avoir une image différente selon l'action de la souris hé bien ce ne sera pas possible... Smiley bawling


Merci en tout cas pour tes éclaircissements !
Modérateur
Bonjour Mama5,

Pour changer la puce au passage de la souris, tu peux toujours utiliser le sélecteur suivant :


li:hover {
...
}


Cela devrait fonctionner dans les navigateurs les plus récents.
C'est exactement ce qu'il me fallait pour compléter l'indication de Laurie-Anne !

Merci à vous deux !
oui il est résolu malheureusement je ne sais pas pourquoi je ne peux pas éditer mes posts et donc écrire [Résolu].

J'ai écrit à votre équipe pour savoir si le problème venait de mon navigateur ou bien de mon compte sur alsacreations.

Et à chaque fois je dois ressaisir mon login et mot de passe pour écrire un post même si je me suis identifiée sur la page d'accueil.
Sujet clos
Aller à