Grafica Designs

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

Related Entries

• Making a Div Layout - Part two
• Making a Div Layout - Part three
• Making a Div Layout - Part one
• Making a Div Layout - Part four
• So Sorry