...

View Full Version : [Help] Css



shayol
09-09-2011, 09:24 AM
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:

http://imagestorming.com/media/3g9/1315552982/aaa.png (http://imagestorming.com/index.php?p=image&url=media/3g9/1315552982/aaa.png)

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
09-09-2011, 10:03 AM
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
09-09-2011, 10:19 AM
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
09-09-2011, 11:17 AM
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
09-09-2011, 01:04 PM
use only 1 in which lengthiest text can fit :)

LearningCoder
09-09-2011, 04:09 PM
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
09-09-2011, 10:45 PM
http://www.alistapart.com/articles/slidingdoors/

This will also apply to your menu.

Rowsdower!
09-09-2011, 11:13 PM
I like using sprite images (http://www.alistapart.com/articles/sprites) 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum