5ThirtyOne

If there is one thing that I am semi-consistent with [in regards to site navigation], it’s wide [tall] tabs. Larger clickable real estate makes it a little easier for readers to get where they want to go without having to position their mouse pointer over the limited click area of standard text links.

Here’s how I achieve tall, wide, and equally spaced tabs.

First, the markup:

<div id="header">
<div id="widetabs">
<ul id="widenav">
<li><a id="link1" href="#">linkone</a></li>
<li><a id="link2" href="#">linktwo</a></li>
<li><a id="link3" href="#">linkthree</a></li>
</ul>
</div>
</div>

Followed by the necessary CSS:

#widetabs {
font-size: 120%;
width: 60em;
margin: 0 auto;
}
#widenav {
background: #7a8356;
height: 12em;
}
ul#widenav {
list-style: none;
margin: 0;
padding: 0;
}
#widenav li {
float: left;
text-transform: lowercase;
width: 9em;
border: 1px solid #656C4A;
border-width: 0 0 0 1px;
}
#link3{
border: 1px solid #656C4A;
border-width: 0 1px 0 0;
}
#widenav li a {
color:#ddd;
text-decoration: none;
line-height:2em;
display:block;
width:9em;
padding-top: 10em;
}
#widenav li a:hover {
color:#eee;
background: #88925f;
}

The above code was tested in IE6, IE7, Opera 8, and Firefox 1.5. Interested in a working demo? Feel free to leave any comments, questions, or feedback.