Stylized line drawing of mark playing the flute

Simple tabbed HTML navigation buttons

A colleague of mine (Charlie Dillon over at fourthgate.org) recently introduced me to a nice way create tab-like navigation buttons.

A simple example of the finished product looks like this.

Advantages

  • Works across all modern browsers (including IE6).

  • Link text is nicely centered.

  • The link fills up the entire button so you have a big clickable area and you can use a:hover for stying.

  • Uses very simple HTML and CSS and it's easy to style.

Disadvantages

  • It uses tables, which is handy because a lot of your sizing/stretching is handled automatically. However it makes it harder to use in a dropdown menu situation. In that case, you're better using a nested <ul>.
  • The markup doesn't lend itself well to rounded corners.

Here's the HTML. Nothing shocking there.

           <table cellpadding="0" cellspacing="0" border="0" class="tabs">                <tr>                    <td class="tab Selected"><a href="#">Home</a></td>                    <td class="tab"><a href="#">Store</a></td>                    <td class="tab"><a href="#">About</a></td>                    <td class="tab"><a href="#">Contact</a></td>                    <td class="tab"><a href="#">FAQ</a></td>                </tr>            </table>

Now for the CSS

The first thing to do is give the <table> a width and each <td> a height. I'm also centering the table on the page using margin-left & margin-right and defining a class for when a tab is selected.

            .tabs {                width:  500px;                margin-left:  auto;                margin-right:  auto;            }            .tabs .tab {                height:  30px;                background:  #FFB300;                text-align:  center;            }             .tabs .tab.Selected {                background:  #FFD573;            }

Now for the fun part.

            .tabs .tab a {                display:  block;                font: normal normal bold 15px/30px Arial, sans-serif;                 color:  #000000;                text-decoration:  none;                text-transform:  uppercase;            }             .tabs .tab a:hover {                background:  #FFD573;            }

There are a couple of interesting things happening here.

We're setting the <a> tags to display: block; which lets them fill up the entire <td> that contains them.

Now notice the 15px/30px part of the font style. We're setting the font-size to 15px and the line-height to 30px which is the same height as the <td>. This lets the text of the <a> tag float in the middle of the <td> without using any margin or padding.

That's all there is too it. Nothing too magical, but a nice effect.