Comment puis-je donner à chacun < li > sa propre image de balle?

Question

j'ai essayé

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

avec

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

en vain. Seul un disque apparaît. Si je veux que chaque élément de la liste ait sa propre puce, comment puis-je accomplir cela avec css, sans utiliser d'images d'arrière-plan .

Edit: j'ai découvert que, malgré ce que firebug m'a dit, la règle list-style-image est en quelque sorte remplacée. Si j'inscris la règle, comme ceci:

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

alors tout va bien. Comme je n'ai pas d'autre règle dans le scénario de test que je suis en train d'exécuter qui contient ul ou li dans le sélecteur, je ne suis pas sûr de savoir pourquoi l'inline donne un résultat différent.

Answer 1

Commencez par déterminer si vous êtes " excentrique " mode ou non, car pour de nombreuses propriétés CSS, cela fait une différence.

Deuxièmement, le spécifie du W3c. que l'URL doit être entre guillemets (même si je n'utilise pas les guillemets non plus). Allez avec les spécifications pour vous épargner des ennuis sur la ligne.

Si vous spécifiez " strict " dans votre DOCTYPE, le navigateur peut exiger les guillemets doubles, conformément à la norme.

Answer 2

Essayez ceci:

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

Answer 3

Je ne suis pas sûr que ce soit votre problème, mais vous utilisez des liens relatifs vers vos images. Lorsque vous utilisez des liens relatifs dans css, ils sont relatifs au fichier css, mais s’ils sont en ligne, ils seront relatifs à la page html.

Answer 4

Le problème, c’est que j’ai essayé votre code si ça marche. La seule fois où ce n'est pas le cas, c'est si les images ne sont pas présentes. Vous devrez peut-être vérifier que les images spécifiées dans le CSS se trouvent bien dans le dossier images ou ne sont pas mal orthographiées.

REMARQUE: dans les deux firefox et ie.

Answer 5

Je suggérerais de le faire légèrement différemment, dans le CSS - c'est-à-dire:

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

Answer 6

Vous pouvez vérifier que ces images sont bien là où vous pensez les trouver. Cet exemple fonctionne bien sauf si les images manquent.

Answer 7

Je n'aurais jamais pensé. Si je cite l'URL, comme ceci:

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

ça commence à fonctionner. Je le cite, et ça s'arrête. Je pensais que ce n'était pas censé faire la différence.

Merci à tous pour votre aide.

Answer 8

Pourriez-vous essayer d’ajouter list-style-type: none; à # liste de contacts? Peut-être même au lieu de votre style de liste: déclaration.

Answer 9

Cela me fait mal de le suggérer, mais avez-vous essayé le drapeau! important? En outre, est-ce que cela se comporte de la même manière dans les autres navigateurs? Que se passe-t-il si vous avez quelque chose dans votre fichier userChrome.css de Firefox?

Answer 10

Vous pouvez essayer d'ajouter! important après la propriété list-style-image, ce qui empêcherait son remplacement.

Answer 11

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}