css navigation menu

[surreal5335]

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]

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
two
three

[abduraooft]

@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]

i recently started building websites and that's what people say "not to use tables" what is the difference using tables and css?

[Shoot2Kill]

Information on why tbles are bad (for layout):
http://www.hotdesign.com/seybold/