CSS Rollover Issues

Bekka, your html shows no anchors and I'm guessing you're addressing the (missing) anchors wrong in the css. If you give the li an id and the anchor is a child of the li then you'd address it like this:

#about a:hover {
background: url(Images/about1.gif);
}

Hello

I have been experimenting with the different ways and havent managed to get one to work....

Is this how i should place an anchor on the about of the li list?

<li id="about"><img src="images/about.gif" width="140" height="30" /></li>

Thanks Bekka

No.You need an anchor (or a) tag. Like this:

<li id="about"><a href="about.html"><img src="images/about.gif" width="140" height="30" /></a></li>

Hello

Just managed to get back to my computer, been busy doing other things the past few days.

Have been playing with the css rollover but am struggling to get it working, although i understand the concept of what i am doing.

If possible could someone look over what i have done and tell me where i have gone wrong?

http//squirrel-net.co.uk/~bekka/webcss/index.htm

http//squirrel-net.co.uk/~bekka/webcss/test.css

Thanks Beks

Bekka, have you seen your last thread? I completely recoded the page for you and styled it as well.
http://csscreator.com/css-forum/ftopic10624.html&highlight=

Wolfcry,

Yes i did see the code from the previous posting.

What i am trying to achieve is to use the images i have to create a rollover effect.

Bekka

The javascript way is old, and not used any more.

Set the links to display:block, and give them a background image of the 'off' state image.

Then, give the hover state a background image of the 'on' image.

Sorry but i am not totally confused on how i should be doing the rollover effect with images and to make sure it works with IE and FF.

Could some one place an example for or know for a good website explaining it.

Thanks

http://www.alistapart.com/articles/slidingdoors2/

From what i have found and looked at the code i have now should work but it doesnt what have i done wrong?

http//squirrel-net.co.uk/~bekka/webcss/index.htm

http//squirrel-net.co.uk/~bekka/webcss/test.css

You have foreground & background images. The foreground images will always show. Use only background images.

<li><a id="about" href="about.htm"><img src="Images/blank.gif" alt="About" /></a></li> You don't actually need to put the image tag in your HTML. In fact, you'd be better off putting the text of your link in there instead of in the alt tag. Then do something like this:

<li id="about"><a href="about.htm">About</a></li>

li#about	{ text-indent: -9999px; }
	
li#about:link, li#about:visited {
	display: block;	
	width: x;
	height: x;
	background: url(images/yoururl.jpg) top left no-repeat;
}
li#about a:hover { background: url(images/yoururl.jpg) 0 -90px no-repeat; }

The way I've done it is if you're using a single image for both your on & off state. The -90px refers to bringing the hover state of the image into view so it'll be about half of whatever size your image is.

I take it i do that for all the images i have in the menu.

But I have two images one for each state? So if the green one and when you roll your mouse over it it changes to white.

Thanks

Yeah, if you have two images, you place the url to the second one with your hover. The example I gave above uses a single image that has both on & off states in it and it uses positioning of the image to show the different states.