Mon, 2008-09-01 19:51
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.
Mon, 2008-09-01 19:58
#1
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.
Mon, 2008-09-01 20:03
#2
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.
Mon, 2008-09-01 23:12
#3
Hugo wrote:As for techniques
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).