[Help] Css

[shayol]

Hello, i'm new on codig with html/css and i need a little help.

I want to know how can i do this image, It's a white/grey image check:



This is the site where i saw it: www.cloudflare.com if you click on menu the image will appear.

Thanks if someone will help me,

Cheers

[LearningCoder]

I'd go over to http://www.dynamicdrive.com , if you have a little look around there, you will find something very similar to this.

Regards,

LC.

[vikram1vicky]

You can add background-image property on hover state of navigation, following is sample

#navi ul li a:hover {
background:url(images/bg_img.png) center no-repeat;
}

[shayol]

Originally Posted by vikram1vicky

You can add background-image property on hover state of navigation, following is sample

#navi ul li a:hover {
background:url(images/bg_img.png) center no-repeat;
}

Yes thanks, but the problem is that this is a fixed image no? I think that the image must change in base at the number of the chars of the menu. "Help" "Registration" etc...

[vikram1vicky]

use only 1 in which lengthiest text can fit

[LearningCoder]

I saw a very similar example over on DynamicDrive the only difference was that rather than the 'border' changing on click, it changed on hover. If you take the time to look for the effect all you would need to do is change the code slightly for your needs.

Regards,

LC.

[mathew edison]

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

This will also apply to your menu.

[Rowsdower!]

I like using sprite images for image-based menu changes.

You load one image and to use as a background image for all menu items, but it is a grid-oriented composite of each individual image you would have otherwise needed. Then you just use different background-position settings for each item and then on :hover you change the background-position again to show the "hovered" state of that same single image file.