images for un-ordered list items 2

[SlowFlight]

I have seen pages where un-ordered list items were preceeded by small images instead of the standard variety of dots. Each level of items would have a specific image.

How can I do that? Can it be done with style sheets?

Skip Meisch

 

[Vragabond]

Yes, it can be done with CSS by applying list-style-image: url(pic.jpg); to your ol tag style. Consult this page for a brief explanation:

http://www.w3schools.com/css/pr_list-style-image.asp

If you want to have a different pic for a different list (or different level), do it with classes:

ol.firstlevel { list-style-image: url(pic1.jpg); }
ol.secondlevel { list-style-image: url(pic2.jpg); }
...

you could also try with dependencies:

ol.firstlevel { list-style-image: url(pic1.jpg); }
ol.firstlevel ol { list-style-image: url(pic2.jpg); }

This way you do not have to apply class to the second (and subsequent) level, with CSS you just said that every descendant of ol with a class of firstlevel will have that image. Hope it helps.

 

[SlowFlight]

Thank you. That is just what I need.

In your second example, what would be the style sheet format for a third level list item?

 

[Vragabond]

ol.firstlevel { list-style-image: url(pic1.jpg); }
ol.firstlevel ol { list-style-image: url(pic2.jpg); }
ol.firstlevel ol ol { list-style-image: url(pic3.jpg); }

This works across all the browsers I checked although it is not completely correct. When creating styles with spaces you are saying that all the descendants of that element (or class or id) will have the following formatting. It would be better to say ol.firstlevel > ol and so on, with which we would limit the behaviour to the child element (only the first in line) but sadly IE does not support this format. The way it is solved now has a few redundancies (first we say all ol elements inside ol.firstclass will have pic2 then we redefine the ones that are inside ol.firstclass and another ol) but it is not a big problem.

 

[SlowFlight]

Thank you again. That worked quite nicely.
By the way... I was asking about Un-ordered Lists. But this worked for both ul and ol. Except that in Ordered Lists you would normally expect to see some sort of sequencing in each list. Using this method on an Ordered List, you lose that sequencing and it effectively becomes an Un-ordered List.

Skip Meisch

 

[Vragabond]

I noticed that right after the first post. Then I just stuck to it. But as you noticed yourself, it works the same for both lists. Glad to have been of help and thanks for the stars.