3 replies [Last post]
bladerunner
bladerunner's picture
Offline
newbie
Last seen: 11 years 19 weeks ago
Timezone: GMT+2
Joined: 2007-02-12
Posts: 6
Points: 2

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?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

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.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

"list-style image is harder

Smile "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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Now that's just awesome, to

Now that's just awesome, to have my personal opinions validated by convention. : )

I'm no expert, but I fake one on teh Internets