Scott Andrew - lo-fi acoustic pop superhero!

A few people have asked how the navigation bar headers on this site are done. It’s a trick I adapted from CSS pro Eric Meyer’s site. The headers are H2 elements with a special class itemhead applied. Here’s the important stuff:

h2.itemhead
{
    display:inline;
    position:relative;
    top:-18px;
    background-color:#fff;
    border:1px solid #aaa;
    font-weight:normal;
    text-transform: uppercase;
}

I’m using CSS to override the default rendering of H2, forcing it to display as an inline element with normal weight. The fun part is the negative value of top, which causes the H2 to overlap the border of the DIV that contains it. Adding a solid background color and border completes the effect.

If you have a modern browser (IE5.x, IE6.x or Moz 1.x) you can turn off the stylesheet and see what this page looks like without CSS.