Subcide

9. The Header

To implement the header, we need to get the background image applied to the header div, replace the "Enlighten Designs" heading with a graphical logo, and position it in the correct place on the header (the dark grey bar to the right).

First create 2 images like the ones below (or just copy these ones):

/images/general/logo_enlighten.gif

/images/headers/about.jpg

The first part is easy. Set a background image in the CSS using the format below:

#header {
	height: 150px;
	background: #db6d16
	            url(../images/headers/about.jpg);
}

The background property that we just used is actually a shorthand property which allows us to specify the background colour, image, image position, and how the image repeats, all in one property. We've set the background to the same shade of orange as the header uses just so that the page doesn't look too bland if the user doesn't have images enabled in their browser. Paths to images in your CSS file are relative to the CSS file, not the html page. This is why the ../ is required in the path above.

Now replace the "Enlighten Designs" text with the logo image. Again, remember to keep the <h1> and put a descriptive alt attribute.

<div id="header">
	<h1><img src="images/general/logo_enlighten.gif" 
		width="236" height="36" alt="Enlighten Designs" border="0" /></h1>
</div>

Now we have to position it on the right where it should be. We'll do this by floating the <h1> to the right, and then using "margin-top" and "padding-right" properties to get the position exact. Add the following to the <h1> rule in your stylesheet:

h1 {
	margin: 0;
	padding: 0;
	float: right;
	margin-top: 57px;
	padding-right: 31px;
}

The reason we used padding-right instead of margin-right is because margins can often trigger weird bugs in IE if used in certain places.

And thats the header done.