hey,

 

I'm trying to figure out how the rollovers are done on this page:(down the bottom) My link. I've had a look at the code but cant figure it out...Do you put a rollover on the background colour on the div and then position the text above it with a z-index value? Whats the best way to do it?

 

 

cheers for any help

I would use an single image sprite and change it's backgroud position on hover. I would use this purley because this is more accessable than using JS or CSS3 (at the moment).

 

You would create two images, one lighter and one darker and stick them together - one above the other.

 

For arguments sake, let's say our image is 500px x 600px.

 

The CSS would then look like below:

 

#myHoverDiv { width: 600px; height: 250px; background: URL('background.jpg') #CCC; }
#myHoverDiv:hover { background: #000; background-position: 0 -250px; }

 

I think that would work. I haven't tested it...

cheers for that Tom, I'll give it a go!

Redacted.

cheers for that Tom, I'll give it a go!

You're welcome mate. Feel free to give me a +1 rep.

You're welcome mate. Feel free to give me a +1 rep.

 

haha chance...

ya can give me one too if ya want ;-)

Basically, everything inside that div is a link.

 

You need to make sure, when you're doing it, NOT to put block-level elements inside the link. For example, you can't put <p> inside the link.

 

On that Dyson site, they've got around this by using a span class to style the text.

 

If you put block level elements inside the link, you'll never get it to validate.

Basically, everything inside that div is a link.

 

You need to make sure, when you're doing it, NOT to put block-level elements inside the link. For example, you can't put <p> inside the link.

 

On that Dyson site, they've got around this by using a span class to style the text.

 

If you put block level elements inside the link, you'll never get it to validate.

 

 

hey thanks for that, I'm getting a blue line underneath the text in these links in Safari, any idea why that's happening? I've changed the first one so that there's no <p> tags in the link but the blue line is still there.

 

cheers

text-decoration:none;

border:0;

 

One of those should sort it

heya,

 

tried that but no joy. I applied text-decoration:none; to the 'action1' div...as the <a> tags area wrapping around the div

.action1 a {text-decoration:none;} 

wont work. Also I have a border on the right side of the div so cant use 'border:0'...