Hi,
I have created a list with the
- tags.
I have used the property "list-style-image" so that an image will appear before the list-items.
But now I want that before the list-item of the current page another image will appear instead of the "list-style-image". Just so that the user can see this item is active.
Can anyone help me with this?
list-style image is harder
list-style image is harder to work with than just background images on the li's, in my opinion.
Do something like
- blah
- blah blah
- blah bleh
yourul {
list-style: none;
margin: 0;
padding: 0; (if you don't already have a margin-padding reset somewheres on the page... one on the body doesn't count though)
}
yourul li {
padding-left: x-pixels, whatever you need to keep text away from the image;
badckground: #colour url(blah.gif) 0 50% no-repeat;
}
yourul li.current {
background-image: url(somethingelse.gif);
}
something like that. yourul would obviously be the id or class you've given this ul, and you'd change which li has the class of current on each HTML page (can be done with a content-management system or can be done by hand if these are static pages)...
does that help? I remember there being alll sorts of cross-browser problems with list-style image, so when I learned this technique, I never went back.
"list-style image is harder
"list-style image is harder to work with than just background images on the li's, in my opinion."
That's more than a personal opinion, it's a generally held convention, it's always advised that one uses background rather than list-style-image.
Now that's just awesome, to
Now that's just awesome, to have my personal opinions validated by convention. : )