Can You Use Multiple Images In A List?

[Markxxx]

I was wondering if it is possible to use multiple images in a list?

Here's what I mean

*List Item 1
*List Item 2
@ SubList Item 1
@ Sublist Item 2
*List Item 3

In otherwords I want to substitue an image for the * and another image for the @

I can do this with a normal list in HTML but of course you only get the bullets and I want to use my own "arrow gifs"

It's easy to use CSS to substitue a gif for ONE bullet but I cannot get it to do two seperate image gifs.

So is this even possible?

Thanks

[Twey]

Yes.

<style type="text/css">
li {
list-style-image: url(bullet.png);
}

li li {
list-style-image: url(submenubullet.png);
}
</style>The child selector (li>li) would be better here, but IE has problems with it.

[mwinter]

<style type="text/css">
li {
list-style-image: url(bullet.png);
}

li li {
list-style-image: url(submenubullet.png);
}
</style>I'd suggest styling the list (ul element) itself, rather than the list items. I'd reserve the latter for when specific items need to be styled differently in relation to the rest of the list.


The child selector (li>li) would be better here [...]No, it wouldn't. :p That would require the following markup:



<ul>
<li>...</li>
<li>...</li>
<li>...
<li>...</li>
</li>
</ul>
which is invalid. The actual structure would be:



<ul>
<li>...</li>
<li>...</li>
<li>...
<ul>
<li>...</li>
</ul>
</li>
</ul>
To use child combinators here, one would need:



li > ul > li {
/* ... */
}
or:



ul > li > ul {
/* ... */
}
Mike

[Twey]

Ack, you're right. Sorry, I intended to use ul, but it came out as li for some reason. :p
<style type="text/css">
ul {
list-style-image: url(bullet.png);
}

ul ul {
list-style-image: url(submenubullet.png);
}
</style>

[Markxxx]

That last one worked great

Thanks guys

:)