Desapareciendo viñetas

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

En la página de arriba hay una imagen flotando a la izquierda. A la derecha hay una lista titulada "características". Los elementos de la lista tienen una imagen de fondo, sin embargo, no aparece. La Lista 2 muestra cómo se ve la imagen de fondo.

¿Alguien sabe cómo puedo hacer que las balas sean visibles?

Answer 1

Su imagen tiene una propiedad flotante: izquierda. Por lo tanto, los elementos de la lista se representan "detrás". la imagen.

margin-left:200px;

en el elemento UL resolverá su problema.

Alternativamente, puede aplicar un flotador: dejado en su elemento UL. Esto hará que flote directamente a la imagen, pero hará que el siguiente contenido aparezca en la misma línea. Puede evitar esto borrando el elemento UL , o agregando elemento después del elemento UL con ...

clear:both

... aplicado a él.

Puede encontrar más información sobre este comportamiento en http://www.positioniseverything.net/easyclearing. html .

Answer 2

Sé que esta es una publicación de hace un año, pero otros pueden querer saber ...

¿Qué sucede si está utilizando un sistema de gestión de contenido y algunas páginas tienen imágenes & amp; algunos, ¿no le gustaría que sus elementos de la lista tuvieran 200 px en el contenido?

Puede agregar este CSS a su elemento UL / OL:

overflow:hidden;

Espero que eso ayude.

Answer 3

Este hilo es viejo, pero siempre relevante ...

Otra solución alternativa:

display: inline-block;

Ponga esto en la UL . Obliga a que aparezca todo el UL después del flotador. De esa manera, puede tener una página con o sin la imagen y siempre se mostrará correctamente (marcada en FF4, IE7 & amp; 8, Chrome 11).

Answer 4

Alternativamente, puede usar la propiedad list-style-image en lugar de background-image. Me encontré con este mismo problema el otro día: el comportamiento de ajuste de texto que los flotantes exhiben en sus 'vecinos' solo se aplica al 'contenido', no a las imágenes de fondo (por ejemplo).