css - publicidad - estrategias para dar a conocer un negocio nuevo

¿Cómo puedo dar a cada<li> su propia imagen de bala?

Question

Yo he tratado

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

con

#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 vano. Solo aparece un disco. Si quiero que cada elemento de la lista individual tenga su propia viñeta, ¿cómo puedo lograr esto con css, sin usar imágenes de fondo ?

Editar: he descubierto que, a pesar de lo que Firebug me dice, la regla list-style-image está siendo anulada de alguna manera. Si incluyo la regla, haga lo siguiente:

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

entonces todo está bien. Como no tengo otras reglas en el caso de prueba que estoy ejecutando que contengan ul o li en el selector, no estoy seguro de por qué la línea da un resultado diferente.

Answer 1

¿Podría intentar agregar list-style-type: none; a # lista de contactos? Quizás incluso en lugar de su estilo de lista: declaración.

Answer 2

El caso es que probé tu código, funciona. La única vez que no es si las imágenes no están presentes. Tal vez deba verificar que las imágenes que especifique en el CSS estén realmente en las imágenes de la carpeta o no estén mal escritas.

NOTA: EN ambos, Firefox y es decir.

Answer 3

Me duele sugerirlo, pero ¿has probado la bandera importante? Además, ¿se comporta igual en otros navegadores? ¿Qué pasa si esto es algo que tienes en tu archivo userChrome.css de Firefox?

Answer 4

No estoy seguro de si este es su problema, pero está utilizando enlaces relativos a sus imágenes. Cuando utiliza enlaces relativos en css, es relativo al archivo css, pero si está en línea, será relativo a la página html.

Answer 5

Podría intentar agregar! Important después de la propiedad list-style-image, lo que evitaría que se anule.

Answer 6

Primero determine si está en el modo "peculiaridades" o no, porque para muchas propiedades de CSS hace la diferencia.

En segundo lugar, el W3c especifica que la URL debe estar entre comillas dobles (aunque tampoco utilizo las comillas). Ve con la especificación para ahorrarte problemas en la línea.

Si especifica "estricto" en su DOCTYPE, entonces el navegador puede requerir las comillas dobles, según el estándar.

Answer 7

Puede verificar que esas imágenes estén donde cree que están. Este ejemplo funciona bien a menos que falten las imágenes.

Answer 8

Sugeriría hacerlo de forma ligeramente diferente, en el CSS, es decir:

#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 9

#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;
}

Answer 10

Yo nunca lo hubiera pensado. Si cito la url, así:

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

comienza a funcionar. Lo cierro, y se detiene. Pensé que no se suponía que eso marcara la diferencia.

Gracias por su ayuda a todos.

Answer 11

Prueba esto:

#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'');
}