PDA

View Full Version : Can You Use Multiple Images In A List?



Markxxx
03-06-2006, 05:00 PM
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
03-06-2006, 05:59 PM
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
03-06-2006, 06:45 PM
<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
03-06-2006, 06:50 PM
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
03-06-2006, 10:25 PM
That last one worked great

Thanks guys

:)