3 replies [Last post]
musuko.san
Offline
Regular
Tokyo, Japan
Last seen: 13 years 31 weeks ago
Tokyo, Japan
Joined: 2008-05-22
Posts: 25
Points: 0

Hi again.

I have a vertical menu. I'm using the 'text-indent: -9999em;' method to hide the text and then I style a background image to display the 'text'. The thing I am struggling with, is to do this, I have to give each li element a different class so it displays the corresponding background image. And of course add :hover to each class to display another image when hovered. Is this method adding too much css or am I over anaylzing this? Is there a better method (besides not using the images all together). Thanks for you help.

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

You appear to be worrying

You appear to be worrying too much judging by the other threads, yes so you need a class for each li to ensure it's unique background that's not such a problem and on items such as li/a menus not a bad thing to have.You could probably get away with a single ruleset to control re-positioning of backgrounds for a hover affect if your off and on states for each image are combined as it will be the same value to re-position for each element.

As for techniques perhaps a better one is to place a span element within the anchor and have that positioned over the top of the text this way you keep the text in place should images fail.

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

musuko.san
Offline
Regular
Tokyo, Japan
Last seen: 13 years 31 weeks ago
Tokyo, Japan
Joined: 2008-05-22
Posts: 25
Points: 0

After reading the answers to

After reading the answers to some other questions I have, I have decided that I am indeed over thinking this. Some how I got really paranoid I was creating terrible CSS code.

*Edit* Ops, I posted at the same time Hugo did. Thanks Hugo for confirming my suspicions and the advice.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Hugo wrote:As for techniques

Hugo wrote:

As for techniques perhaps a better one is to place a span element within the anchor and have that positioned over the top of the text this way you keep the text in place should images fail.

Yeah, the negative text-indent method's not the best because you see no text on screen with images off (which will include most people using handheld devices).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference