...

View Full Version : css navigation menu



surreal5335
12-27-2010, 11:02 AM
I am trying to build a navigation menu in css and right now I want the text to appear in the middle (vertically speaking) of the menu bar and have a border wrap around it twice as big as the text.

Here is a link to the site:


http://paperlesswasp.com/tuts/

The links are in blue so far, but I have had them working fine as black in the past, but that seems to no longer work.

Here is my code for the links: (the class below is attatched to each anchor tag)



.nav_menu
{
width: 400px;
background: #999;
height: 40px;
border: 1px solid #777;
border-width: 0px 2px 2px 2px;
display: block;
padding: 10px;
margin: 0 auto;
}

.nav_link
{
display: inline;
font-size: 20px;
color: black;
text-decoration: none;
text-align:center;
padding: 0px 5px 0px 5px;
border-width: 0px 1px;
border-style: solid;
border-color: transparent;
}

.nav_link:hover
{
color: #FFF;
border-color: #666;
background: silver;
height: 40px;
}


I have tried wrapping <div> around the anchor tag to force a box bigger than the text, that had undesirable side effects.

Any ideas on what I should do?

Excavator
12-27-2010, 11:14 AM
Hello surreal5335,
line-height will vertically center text, as long as it's only one line. Try making your CSS look like this -
.nav_menu {
width: 400px;
background: #999;
line-height: 40px;
border: 1px solid #777;
border-width: 0px 2px 2px 2px;
display: block;
padding: 10px;
margin: 0 auto;
}

That's not exactly a typical way of building a menu though. Have a look at some menu examples that might help you -

one (http://nopeople.com/CSS%20tips/ulmenu/index.html)
two (http://nopeople.com/CSS%20tips/anotherNavBar/index.html)
three (http://nopeople.com/CSS%20tips/h_ul_menu_no_images/index.html)

abduraooft
12-27-2010, 11:35 AM
@surreal5335: You should avoid the use of tables for making your layouts, which is a very bad practice. Read http://www.hotdesign.com/seybold/

rswebs
12-28-2010, 04:55 PM
i recently started building websites and that's what people say "not to use tables" what is the difference using tables and css?

Shoot2Kill
12-28-2010, 05:01 PM
Information on why tbles are bad (for layout):
http://www.hotdesign.com/seybold/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum