In this CSS tutorial we'll cover some advanced styles to be applied on the header, navigation and search form of a web site. According to my personal experience, I think that these sections are the most time-consuming during the development process of a web site. I'll try to explain these techniques as simply as possible, in order to allow you to get the maximum benefit from this tutorial. First of all, let's take a look at what we want to achieve:
Let's start with our markup.
The markup
<div id="site"> <div id="branding"> <h1>Site Name</h1> </div> <div id="navigation"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="nav-last"><a href="#">Contacts</a></li> </ul> </div> <form action="#" method="get" id="search"> <div> <input type="text" id="q" name="q" /> <input type="submit" id="s" name="s" value="Search" /> </div> </form> </div>
We'll use relative and absolute positioning to exactly put the search form and the main heading in the right places. Now we can start with our CSS global styles.
Global styles
Our global styles simply perform a massive reset on all common elements:
body {
margin: 0;
padding: 0;
background: #efefef;
color: #333;
font: 62.5% Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul, form {
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;
font-weight: normal;
}
The background color of the body element must match with the final color of the background image we're going to use on our global container section.
The global container
#site {
width: 100%;
background: url(header-bg.jpg) repeat-x 0 0;
font-size: 1.4em;
position: relative;
}
Our global site container will have a faded background image tiled horizontally on the top. This image will draw the backgrounds of the header and navigation sections as well. Its height is 285 pixels.
The header
Our header, called branding for semantical reasons, will have the Coda Google font as its main font family. To include this font in your page, simply add this code in the head section of your document:
<link href='http://fonts.googleapis.com/css?family=Coda:800' rel='stylesheet' type='text/css'>
Its styles are the following:
#branding {
width: 60%;
margin: 0 auto;
height: 215px;
background: url(header-img1.jpg) no-repeat 0 0;
position: relative;
}
#branding h1 {
font: 6em Coda, sans-serif;
color: #ff691e;
letter-spacing: 0.1em;
position: absolute;
bottom: 0;
left: 330px;
}
This element has a width which equals the 60% of the global container width and it's been centered used horizontal automatic margins. Also, it features a background image put on its left side. This image is 311 pixels wide and 215 pixels tall, so we need to take these dimensions into account while defining other styles. We've established a contextual position on this element by using position: relative so that our heading will be positioned at the very bottom of it and with a left offset calculated with respect to the background image width.
The navigation menu
Our navigation menu has the following styles:
#navigation {
margin: 0 auto;
width: 60%;
height: 2.1em;
position: relative;
top: 1px;
}
#nav {
height: 100%;
margin-left: 330px;
}
#nav li {
float: left;
height: 100%;
margin-right: 1em;
padding: 0 1em 0 0;
background: url(menu-devider.gif) no-repeat 100% 50%;
}
#nav li.nav-last {
background: transparent;
}
#nav a {
float: left;
display: block;
height: 100%;
line-height: 2.1;
padding: 0 1em;
color: #fff;
text-decoration: none;
font-weight: bold;
}
#nav a:hover {
background: url(menu-hover.gif) no-repeat 50% 0;
text-decoration: underline;
}
The main navigation container shares the same styles for width and horizontal centering with the header section. The unordered list contained within it has a left margin that aligns the navigation items with the header's contents. Each list item shows a menu separator, except the last one. Since our menu is 2.1 em tall, we set the same line height on the links to vertically align them. Finally, each link shows a vertical arrow on hover.
The search form
Our search form must be displayed just before the header section, so we'll use absolute positioning here:
#search {
width: 100%;
height: 2em;
position: absolute;
top: 0;
left: 0;
background: #151515 url(search.png) repeat-x 0 0;
}
#search div {
width: 60%;
margin: 0 auto;
text-align: center;
height: 100%;
line-height: 2;
}
#search input {
border: none;
font: 1em Arial, sans-serif;
}
#search #q {
width: 150px;
background: #fff;
margin-right: 0.5em;
}
#search #s {
background: #c60;
color: #fff;
font-weight: bold;
border: 1px solid #d40;
}
To get consistent dimensions on input elements, we've explicitly set the same font size and family used on the rest of our page. Also, the search form must have a stated width to fill the entire screen, because we're using absolute positioning here.