skaterdav85 Posted February 14, 2008 Share Posted February 14, 2008 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? Link to comment Share on other sites More sharing options...
Synook Posted February 14, 2008 Share Posted February 14, 2008 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> Link to comment Share on other sites More sharing options...
skaterdav85 Posted February 14, 2008 Author Share Posted February 14, 2008 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 {"? Link to comment Share on other sites More sharing options...
Synook Posted February 15, 2008 Share Posted February 15, 2008 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.