Coding – Website Header & Navigation

By   |  Stashed in HTML/CSS

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

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://redseacheck.com scubaninja
  • Rick

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

  • http://www.myinkblog.com Andrew Houle

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

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

  • Rick

    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 :)

  • http://www.myinkblog.com Andrew Houle

    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!

  • Anthony Cascone

    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

  • http://soon nbyfr

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

  • http://brandonandbyshottlesparishcouncil.gov.uk cxc999

    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

  • http://www.myinkblog.com Andrew Houle

    @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 [email protected]. 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.

  • prasad

    Hello Andrew
    I found your blog while I was searching for this topic.

    Am trying to put up a website for my company (www.sljindia.com) and so far couldn’t manage the logo to fit nicely at the top/left of the pages. That’s how I got searching for how to do this right.

    Well, you have given it very well, couldn’t have been done better (especially for beginners like me).

    I have two questions
    1> when I am following your code to adapt it to my site, my logo still looks longer – I mean it is extending to the right side of the window. How can I make it fit the window (any monitor size of the viewer) ?
    2> What about the code for the rest of the page? Can I put it in this same htm/html file or I ‘refer’ to this header html in my main page design?

    Thanks for your help and again, your exercises are great.

    Prasad

  • http://www.myinkblog.com Andrew Houle

    @prasad Thanks for the kind words, I’m glad you are finding the tutorials helpful :) I’ll try to answer your questions, but I’m not sure I fully understand them.

    1) Most likely, you wouldn’t want the logo to be sized proportionally with the window size. I would set the size of the logo image using a program like photoshop. You can also limit the size using css. For instance within your logo div use width: 200px; and height: 150px; just be sure to substitute those numbers with the sizes of your logo.

    2) Depends what you mean by the code for the rest of the page. The joy with CSS is that it separates style from content. Therefore, keep all your css styling in an external stylesheet that you link to in the head of your html doc.

    I hope this helps. Keep the questions coming though, if you have more, or I confused the matter even further.

  • prasad

    Thanks Andrew..I understand about the logo part. Tried resizing it using photoshop and subsequently in the css style.htm that I created using your tutorial. The logo is getting cropped on both left and right side, though it aligns perfectly with the top of the monitor’s display window. Something to do with the alignment of the image in the style sheet? Should I make it to get left-aligned?

    About the second question of mine, this is what I meant. Using your tutorial, I have two htm files; a style sheet and index file which actually contains the link to the style sheet. In the index file,, as of now, there is the header section (which links to the style sheet). Now, I want to put the rest of the stuff that I want on my home page, after this header section. How to end the header section and start the rest of the coding?

  • Trupti

    Hi Andrew,
    I want to pursue a career in web designing and I found your tutorial very helpful. Thank you for sharing this great tutorial.

    I would like to know what is the difference between using a table to format the html compared to the div tags.

    thanks for all your help :)

  • http://www.myinkblog.com Andrew Houle

    @ Trupti – There are a number of reasons that HTML/CSS layouts are better than table based layouts. Tables are best left to only large amounts of tabular data. For layouts they are slower to load, less flexible, can hurt SEO, and so on… If you’d like to learn more, this article is a pretty good starting place: http://www.wplancer.com/why-you-shouldnt-use-tables-for-web-layouts/

  • Abhineet

    Hi Andrew!!
    I am pursuing engineering in Electronics.
    It was last year when I found web designing very interesting & it emerged as my biggest hobby.
    I found your blog while searching for a photoshop article & was stuck at what I found here.
    Its amazingly easy to follow your blogs to create awesome content.
    You are a source of inspiration as well as knowledge for me.
    Please include some more material, links or ebooks which would serve as starting points for the people who are very new to this field.
    Anyways, great work.
    Thanks
    Abhineet

  • Trupti

    Thanks Andrew for the link. I never thought tables could create a problem from SEO and also load slower. Will be troubling you over more queries.

    Thanks again.

    Trupti

  • Hegbirts

    Hi – this tutorial was terrific but I don’t know how to add the code into my index.html file, can someone explain exactly what code to use and where it should be placed? I am very new at this. I also would like to add it to all of the other pages in my website. Thanks!

  • http://www.myinkblog.com Andrew Houle

    @Hegbirts – I’m not sure exactly what you mean by the first question? If you mean what text editor to use, you could use anything from notepad to Dreamweaver. I recommend Dreamweaver or Coda. If you mean where to place your file, that depends on the setup of your server. Most hosts will have a folder like public_html for that sort of thing.

    You can add the header code to all the pages a number of ways, like Server Side Includes or PHP Includes. I prefer using PHP Includes. Here’s a simple example to get you pointed in the right direction: http://www.tizag.com/phpT/include.php

    Let me know if this doesn’t answer your questions. I’m more than happy to help with this stuff :)

  • Hegbirts

    Thanks Andrew, I worked with SSI yesterday but PHP worked better. I have Frontpage so my question was just regarding placement of the code, I figured out it should go at the top of the body (surprisingly no websites tell you where to put the code but perhaps it’s so basic I should have known). My trouble now is making it look good for IE. I have IE 7 and the navigation bar is way off compared to Firefox. If you want to take a look at my site, it’s http://www.birtsbags.com. I’m going to do some research on the css code for IE, hopefully I can figure it out. Do all my files need to be a PHP in order to use the header.php?
    Another thing I am having trouble with is applying css to the rest of my site, once I added the php code, everything else lost it’s styling.
    Thanks again, the tutorial was really good.

  • Hegbirts

    Ok, fixed my style sheet issue but still have not solved the IE issue. Any suggestions would be GREATLY appreciated!

  • http://www.myinkblog.com Andrew Houle

    @Hegbirts – Looking at your code the first thing I noticed is that you’ve declared your info twice and you’ve got two tags. Your html should look something like this:

    <!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>
    <!-- All you head declarations here -->
    </head>
    <body>
    <!-- All your page stuff here -->
    </body>
    </html>

    Also it seems IE is padding from the bottom of the header div. Try adding a .clear element. So something like this in the css:

    .clear {
    clear: both;
    overflow: hidden;
    height: 0px;
    }

    Then in the html after the closing div of nav add:

    <div class="clear"></div>

    That may not be the issue, but it’s worth a try. If you are still having some trouble. Please feel free to email me at info@myinkblog.com and send index.html, style.css and the image files so that I can take a look at your code.

  • http://www.xpressurslf.com ashish

    nice tutorial

  • Tianyer

    Hello, i arrived to this blog although looking for some thing else, but to my joy i discovered this web site. Maintain performing what you’re doing, its excellent.

  • http://www.mxl87.com Marçau

    Hi Andrew,
    Very well explained step by step tutorial. I’m glad you say things in a way that even beginners can understand them.
    I thought a bit the same as Rick in the first comment. Why put the slogan in a separate div if you already placed it well in Photoshop? I understand the operation for the logo to be clickable but then you don’t need a “home” item in your navbar… Nevermind if it works well this way.
    Anyway, what is on my mind is how does Internet Exploder deal with the transparency of the .png pictures? …and how to get sure it won’t ruin your design? I was wondering if coding the whole header as an image map was to be the unique compulsory multi-browser solution