To follow this tutorial please start by reading Making a Div Layout - Part one

Ok you have downloaded the files from Making a Div Layout - Part one right? Then you had a read of Making a Div Layout - Part two? If not then please do as if you don’t know nothing of HTML then none of this post will make any sense.

I’m not going to go into all the meaning of this and that, it not really needed as you will work it out when messing around and making up the layout, which we will get to at some point.

Ok let me tell you want a div tag does, it a piece of code that is used to make anything in between the tag style and move the way you want it. We do this with the style.css

Say we what to make your content to look like this, press the image.

Then you would put this in the index.html…

<div id="content">
<p>Main content</p>
</div><!--content close-->

You would then tell the style.css this…

#content{
float:left;
width:500px;
padding:8px 8px 8px 8px;
}
#content p{
text-align:justify;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:maroon;
}

So see it this way, the <div id="content"> is the Jack following the orders of the Queen who live in the style.css and she looks like this #content.

You will also see <div class="and the name of the order"> which will look like this in the style.css .and the name of the order

Lets start.

This will keep the layout contained so make sure you keep all you layout tags, code within the tags below

<div id="page">All code, tags</div><!--page close-->

Here is the tag that will bring out your header.jpg and the style of the content as well as where you want you text.

<div id="header">
Header content
</div><!--header close-->

We will be using this to use your links for likes of Home, Contact and so on.

<div id="topnavigation">
Top navigation links
</div><!--topnavigation close-->

Keep you content and navigation within the tags below we don’t want the falling everywhere.

<div id="wrap">content and navigation</div><!--wrap close-->

This is where all you content will go.

<div id="content">
Main content
</div><!--content close-->

The links for your pages and other stuff will go in here.

<div id="navigation">
Navigation links
</div><!--navigation close-->

Well this is the end of your layout where you want to place the footer.jpg and credits

<div id="footer">
Footer content
</div><!--footer close-->

This is it for now, you try and do this as well as showing your 10 year old how to use Photoshop cs2, so sorry if you see a lot of mistakes. I will be covering the stylesheet next time and it could be a long one.


Making a Div Layout - Part one
Making a Div Layout - Part two
Making a Div Layout - Part four
Making a Div Layout - Part five