Complex site header with CSS

In this post I'm going to show you how to stylize a complex site header using CSS. This header will include a main heading, a strapline, a navigation menu and a search form. The first thing we need to do is writing semantical markup, thus avoiding all presentational names for our elements. We'll follow the naming conventions proposed by Andy Clarke to achieve the maximum flexibility and portability in our code. The markup is as follows:

<div id="green-solutions">

    <div id="branding">
      <h1>...</h1>
      <p id="tagline">...</p>
      <form id="search" ...></form>
    </div>
    
    <div id="navigation">
      <ul>
        ...
      </ul>
    </div>

</div>

The navigation menu is actually outside the header, but with CSS is easy to make it appear where we want. Let's start with our CSS code that is actually split into several components. The first deals with global styles:

/*= Generic HTML elements */

body {
 margin: 0;
 padding: 0;
 background: #fff;
 color: #333;
 font:  62.5%/1 Arial, Helvetica, sans-serif;
}

a:link, a:visited {
 color: #466432;
}
a:hover {
 color: #9c3;
}

hr {
 display: none;
}

h1, h2, h3, h4, h5, h6 {
 margin: 0;
 font-family: Georgia, serif;
    font-size:. 100%;
}

p, li {
 line-height:. 1.4;
}

input, textarea, select { /* Normalizing form elements */
 font: 1em Arial, Helvetica, sans-serif;
 vertical-align: middle;
}

The solution on form elements normalizes the dimensions of such elements. Then comes our branding section:

/*= Branding */

#branding {
 height: 10em;
 background: #446432 url(site-header/img/branding.gif) repeat-x;
 color: #fff;
 padding-left: 1.5em;
 position: relative;
}

#branding h1 {
 font-size: 4em;
 font-weight: normal;
 letter-spacing: 0.1em;
 color: #446432;
 float: left;
 height: 2.5em;
 text-indent: 125px;
 padding-top: 35px;
 background: transparent url(site-header/img/h1.png) no-repeat 0 100%;
 text-transform: uppercase;
}

#branding #tagline {
 margin: 0;
 font-variant: small-caps;
 font-style: italic;
 font-weight: bold;
 font-size: 1.5em;
 padding-bottom: 0.2em;
 border-bottom: 0.4em solid #fff;
 color: #fff;
 float: left;
 padding: 45px 0.4em 0 2em;
}

#branding #search {
 position: absolute;
 height: 2em;
 margin: 0;
 top: 45px;
 right: 1.5em;
}

#branding #search #q {
 width: 150px;
 height: 2em;
 display: block;
 border: none;
 background: #fff;
}

#branding #search #search-btn {
    position: absolute;
 display: block;
 top: 0.5em;
 right: 0;
}

The branding section has a tiled image as its background that works together with the background color, here provided as a fallback mechanism. As we can see, the main heading is actually higher than its container. This is intentional, because we want the background badge be positioned between the background of its container and the global background of the page. Both the heading and strapline element are left-floated, while the search form has been absolutely positioned on the right. On this form we did a simple trick to make the magnifying glass appear inside the text field, that is, we used absolute positioning using the context created by the form itself.

On the navigation menu, instead, we used negative relative positioning to include it in the header's area, as follows:

/*=Navigation */

#navigation {
 width: 60%;
 margin: 0 auto;
 position: relative;
 height: 2em;
 top: -2.1em;
}

#navigation ul {
 margin: 0;
 padding: 0;
 list-style: none;
 height: 100%;
}

#navigation ul li {
 float: left;
 height: 100%;
 margin-right: 0.5em;
}

#navigation ul li a {
 float: left;
 display: block;
 height: 100%;
 line-height: 2;
 background: #446432;
 color: #fff;
 font-weight: bold;
 text-decoration: none;
 padding: 0 1em;
}

#navigation ul li strong {
 float: left;
 display: block;
 height: 1.6em;
 line-height: 1.6;
 border-top: 0.4em solid #446432;
 padding: 0 1em;
}

#navigation ul li a:hover {
 background: #ccee98;
 color: #333;
 height: 1.8em;
 line-height: 1.8;
 border-top: 0.2em solid #446432;
}

You can see the final results here.