Making a Div Layout - Part five
Ok now let’s work on the header, site name and top navigation.
#Header
You should already now know that # is the order and you will see . as we go on, which are class which follow the order in the same list. So let’s start.
Copy and paste the below over the #header
margin:0;
padding:0;
height:200px;
background:url('images/header.jpg') no-repeat top center;
Now I will cover the background:url(’images/header.jpg’) no-repeat top center; as the rest as been cover in Making a Div Layout - Part four
#background:url
You can have many ways to do a background.
background:url – This is use where we can link it all in one, this is what we will be using.
background-position: – This is used for placing the background to likes of right, left and so on.
background-repeat: – You can have no-repeat which will make the image not repeat, repeat-x well repeat the image across, repeat-y this makes the image repeat down. There are more, but you won’t really use them
background: – You could just place a colour or a image
background-color: – For use of colour
background-image: – For image
So background:url is the link that brings out (’images/header.jpg’) this is where the image is, if you have your images elsewhere, then you could place the web address to the image in between the ( ).
no-repeat we don’t want to repeat the header image.
top we won’t this image at the top.
center we want the image centred.
Now I want you to open the index.html and copy and paste below in between <div id="header"> Paste here</div>
<h1><a href="index.html">Site Name</a></h1>
<div class="description">I'm Making A Layout</div>
h1
Ok let’s just cover the above <h1></h1> This is header which makes the text is bigger then normal, we well be styling this soon. We are going to make the site name a link so viewers can press the link to go back to the main page which is the index.html
description
The <div class="description"> </div> we just place a little description about the site, again this will be style.
Now save the index file and go back to the style.css and copy paste the code below into you css file.
#header h1{
padding:70px 90px 0 0;
margin:0;
font-family:Georgia, Verdana, sans-serif;
font-size:28px;
font-weight:normal;
text-align:right;
}
#header h1 a{
color:#dc86df;
text-decoration:none;
}
#header h1 a:hover{
color:#b857bb;
cursor:ne-resize;
text-decoration:none;
}
.description{
padding:5px 90px 0 0;
text-align:right;
color:#b8a7b9;
}
Ok you see the #header h1 well this means that the h1 will be styled for the header, So if you used another h1 for something else, then it won’t change the header h1 one, you will see that all order we be place in their own sets.
#header h1 a this style the header link and #header h1 a:hover styles the link hover.
font-weight:normal; normal makes the text show as it says, you could have font-weight:bold; this would make the text bold, easy hey.
cursor:ne-resize; this changes the style of the mouse pointer then moving over the link. There are a lot of different ones you can use; I will give you a link later about finding more
.description this will style your description.
Ok that it for now, I will word on the top navigation next, but if you did this right your header so far should look like this.

Here is a great site for html help, Lissa Explains It All
Making a Div Layout - Part one
Making a Div Layout - Part two
Making a Div Layout - Part three
Making a Div Layout - Part four
Tags: div, How to make a div layout, html, tutorials
May 16th, 2008 at 5:37 am
Nice… I wish I could update my site more often, but the company’s getting stricter now, I can’t be online on YM anymore T_T
May 16th, 2008 at 3:47 pm
I’m sure people will understand, the best thing to do is just make a post now and again just to let people know you are still around.
I’m not one for getting rid of Affiliates because of the site not being updated as I know you still around, which is good…
May 17th, 2008 at 6:02 am
But I won’t be around for 4 days starting tomorrow coz I’ll be visiting my home after 2 months, and I’ll be hanging out with friends the whole vacation, I posted it in my blog though ^^
May 18th, 2008 at 12:34 pm
I hope you have a good time with your family
May 22nd, 2008 at 5:43 am
Someone’s back… ahihihihi
May 22nd, 2008 at 6:41 pm
Glad to see you back! I hope all was well and your family doing good..
Well as you see I have not updated, I just have not had the time, most of the tutorial is over on my laptop and I just have not had any time to even put that on. So I’m lucky if I get five on the PC, I have my son the weekend, so nothing will be done until Monday with luck, but I also have a busy week coming.