17
Jul
Coding - Website Header & Navigation
written by: Andrew Houle // stored in: Tutorials

Header and Navigation Final

Designing/Coding a Website Header & Navigation Part 3 of 3

This is part 3 of 3 on my website header and navigation tutorial. If you’ve gotten to this page and would like to follow along, you can view part 1 or part 2 by following the previous links.

First off, let’s take a look at what we are creating. View the example page here.

Transparency issues

It should be noted that this page was tested in Firefox 3 and IE 8. The transparent backgrounds on most of the images will not render correctly in older browsers, mostly IE 6 and below. The percentage of people using this browser is thankfully declining steadily, however in bigger projects, it still needs to be accounted for. There are numerous ways to fix and hack around the IE 6 issues, but they are out of the scope of this tutorial. If you’d like to learn more check out this article from 24 Ways

Open up your editor

Open up your favorite text editor for writing web pages. Personally, I love Dreamweaver, but any old editor will do. Create a file, and name it ‘header.html’. Place it in the site root folder, along with the images folder and images you created in part 1.

The HTML

Let’s start by writing our html page. Below is the code we are going to use. Copy and paste it to your ‘header.html’ doc. I will explain what’s going on below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>Header and Navigation Tutorial</title>
</head>
 
<body>
	<div id="header-container">
        <div id="header">
            <div id="logo">
            <a href="#"><img src="images/logo.png" /></a>
            </div>
            <div id="slogan">
            <a href="#"><img src="images/slogan.png" /></a>
            </div>
            <div id="nav">
            <ul>
				<li><a href="#"><img src="images/home.png" alt="home" /></a></li>
                <li><a href="#"><img src="images/about.png" alt="about" /></a></li>
				<li><a href="#"><img src="images/services.png" alt="services" /></a></li>
                <li><a href="#"><img src="images/products.png" alt="products" /></a></li>
                <li><a href="#"><img src="images/contact.png" alt="contact" /></a></li>
			</ul>
            </div>
        </div>
    </div>
</body>
</html>

Between the ears

Only two things of note between the head tags. I changed the title to ‘Header and Navigation Tutorial, and I referenced the style sheet we are going to use (link rel=”stylesheet” href=”css/style.css” type=”text/css”). The other code is just info the browser needs and is the same for most every HTML doc.

Within the body

We wrap everything in a container named ‘header-container’. We will use this div to extend the header and nav background 100%. The ‘header’ div will serve as the container for the logo, slogan and nav, it will help size the height and width. The logo, slogan and nav divs are exactly what they say. We put the navigational buttons in a list to help keep things in order. All this is well and good, but will look terrible without the style. Here’s what we’ve got so far.

Acme Widgets No Style

Giving our page some style

Wow! that image above is tough to look at, let’s add our style so we can fix that. Below is the style sheet. Copy and paste the code. Save the file within a folder named ‘css’ and name the document ’style.css’ (you can use whatever name and/or folder that works for you, just remember to change the reference in the HTML file). After the code I will explain what I was trying to accomplish.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

@charset "utf-8";
/* CSS Document */
 
body {
	margin: 0px;
	padding: 0px;
}
 
#header-container {
	width: 100%;
	height: 204px;
	background-color: #0071b2;
}
 
#header {
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
	width: 1024px;
	height: 204px;
	margin: auto;
}
 
#logo{
	float: left;
	padding-top: 15px;
	padding-left: 160px;
}
 
#slogan {
	float: right;
	padding-right: 170px;
	padding-top: 35px;
}
 
img {
	border: none;
}
 
#nav {
	height: 76px;
	width: 1024px;
	padding-top: 152px;
	padding-left: 158px;
}
 
#nav ul
{
	text-align: left;
	margin: auto;
	width: 1024px;
}
 
#nav ul li
{
	display: inline;
	padding: 0px;
	margin: 0px;
}

Removing the browser defaults

1
2
3
4

body {
	margin: 0px;
	padding: 0px;
}

The ‘body’ style simply takes out the browser default padding and margin and sets them to 0. This way the header can flow 100% of the screen width.

Give the header a blue background

1
2
3
4
5

#header-container {
	width: 100%;
	height: 204px;
	background-color: #0071b2;
}

‘header-container’ sets the width, height and color of our overall background. The height is based on the height of the header we drew up in Photoshop. The width is set to 100% to cover the length of any monitor. And the color is set to match the edges of our header graphic. Here’s where this get’s us.

Header BG

Contain the header

1
2
3
4
5
6
7

#header {
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
	width: 1024px;
	height: 204px;
	margin: auto;
}

The ‘header’ div is a container for the logo, slogan and nav. We place in the background image of the clouds and make sure it doesn’t repeat. We set up the width and height. We also set the margin to auto, so that it stays centered horizontally.

Clouds Background

Move the logo and slogan into place

1
2
3
4
5
6
7
8
9
10
11

#logo{
	float: left;
	padding-top: 15px;
	padding-left: 160px;
}
 
#slogan {
	float: right;
	padding-right: 170px;
	padding-top: 35px;
}

The styling for ‘logo’ and ’slogan’ places these blocks in the correct spots. We use float attributes and some padding.

Logo and Slogan

Get rid of the ugly boxes

1
2
3

img {
	border: none;
}

Browsers tend to put an ugly 1 px border on linked images. We take that out using img tag style.

Img Style

Contain the nav

1
2
3
4
5
6

#nav {
	height: 76px;
	width: 1024px;
	padding-top: 152px;
	padding-left: 158px;
}

The ‘nav’ div is another container div. We set the height, width and padding attributes.

Nav Container

Style the list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#nav ul
{
	text-align: left;
	margin: auto;
 
 
	width: 1024px;
}
 
#nav ul li
{
	display: inline;
	padding: 0px;
	margin: 0px;
}

For the list styles: we set the text-align to left, center the buttons with margin auto. We also set the display to inline, so that the list is horizontal instead of vertical by default. Lastly we zero out the padding and margin attributes.

Header Final

Completion

Here again is the example of the page. If you would like to download all the files for this series you can do that here.

That does it. I hope you’ve enjoyed this 3 part series from design to code. If you have any comments or suggestions don’t hesitate to use the comment form below.

Designing/Coding a Website Header & Navigation

Related Posts:

About Andrew Houle

Andrew is the originator and primary contributer for this blog. He is a web and graphic designer with a passion for helping aspiring designers develop their skills.

Have your say! 9 responses thus far.

  1. scubaninja Says:
    July 18th, 2008 at 7:15 am

    thanks! http://redseacheck.com ;)

  2. Rick Says:
    July 22nd, 2008 at 10:23 pm

    You don’t need the logo, slogan or nav divs… why not put the id’s on the img and ul elements instead?

  3. Andrew Houle Says:
    July 22nd, 2008 at 10:32 pm

    Scuba,
    Your welcome, it’s cool to see the header in action.

    Rick,
    I’m sorry, but I’m not sure what you mean?

  4. Rick Says:
    July 24th, 2008 at 12:09 am

    For example if you used (I don’t know how that’ll display here), then you don’t even need the surrounding div.

    Sorry if I came off sounding nasty, I was only trying to help :)

  5. Andrew Houle Says:
    July 24th, 2008 at 9:16 am

    Rick,
    No problem, I’m glad for comments like yours. I want this site to be a community of like-minded readers that can help each other out, and that includes me. That being said, I’m still not sure what your advice is.

    Thanks again for commenting, please keep them coming!

  6. Anthony Cascone Says:
    July 31st, 2008 at 4:06 pm

    Andrew,

    Excellent step by step. It really makes it clear to see how the code matches the result. I have played with CSS on my page’s header and done some things that seem like voodoo to get the desired result, but have had trouble trying to clearly explain it to friends. You have done a great job, thanks.

    Anthony

  7. nbyfr Says:
    September 2nd, 2008 at 4:07 am

    Thanks for this tutorial. You know, codes aren’t important here but final results, if it’s well done, guys will like…

  8. cxc999 Says:
    September 7th, 2008 at 4:22 am

    Hi Guys, I know I’m getting away from the matter at hand, but, I have a website up and running but it cant be found when googled. I’ve put in the meta tags but it still can’t be found, can you help?????. I’m sure if you look at the source code for the site you can check to see if i’ve got it right or not.

    Thanks
    cxc

  9. Andrew Houle Says:
    September 7th, 2008 at 8:07 am

    @cxc999 I’d be happy to look at your code for you, and let you know what I think. You can send anything like that to info@myinkblog.com. Also, there are a ton of great articles and sites dedicated to SEO (Search Engine Optimization) and I would hardly say that’s my specialty. I thought this article by Web Designer Wall was one of the best I’ve read on the subject: http://www.webdesignerwall.com/general/seo-guide-for-designers/

    I hope this is a starting point, let me know.

Leave a Reply