Jump to content
skaterdav85

a menu bar

Recommended Posts

i found this website, and i was wondering if anyone could break it down simply how you can make a menu bar similar to this:http://www.kaosdistributors.com/I like how when u roll over each choice, it highlights the whole cell and changes the text and background color, making it look like a rollover. I know they use a:hover & a:link, but im not sure how they made the hover cover a rectangular shape. any suggestions?

Share this post


Link to post
Share on other sites

Some simple code:

<style type="text/css">div#navbar a {display:block;float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#EEEEEE;color:#333333;margin-right:2px;}div#navbar a:hover {background-color:#333333;color:#EEEEEE;}</style><div id="navbar"><a href="#">Home</a><a href="#">About</a><a href="#">Projects</a><a href="#">Contact</a></div>

Share this post


Link to post
Share on other sites
Some simple code:
<style type="text/css">div#navbar a {display:block;float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#EEEEEE;color:#333333;margin-right:2px;}div#navbar a:hover {background-color:#333333;color:#EEEEEE;}</style><div id="navbar"><a href="#">Home</a><a href="#">About</a><a href="#">Projects</a><a href="#">Contact</a></div>

I see that line-height:30px; was used to center the text vertically within the block, but is there anohter way to vertically center the link in the block like using valign or something?Also, how come they put "div#navbar a:hover {" in the css? Cant you just put "#navbar a:hover {"?

Share this post


Link to post
Share on other sites
Also, how come they put "div#navbar a:hover {" in the css? Cant you just put "#navbar a:hover {"?
You could. Just habit I suppose (because with classes you could have div.navbar and td.navbar, say, with different properties).
I see that line-height:30px; was used to center the text vertically within the block, but is there anohter way to vertically center the link in the block like using valign or something?
You could use the valign attribute but it would have to be with tables. The vertical-align CSS property is a bit buggy at the moment.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...