CSS

Simple Page Layout

Okay so now we will be looking at making a commonly used web page layout, Now this wont be to in depth and I will try to keep it as simple as I can and explain what we is doing as you go through it. 

So the first thing to do is to create the basic HTML tags and create a wrapper tag and this will be used to contain all of the main content like this

 Now we are going to add the following styling rules to that

This allows us to position our web page in the centre so now we will have a more visual display for our efforts by creating a header block to do this we add the following HTML in our wrapper div

and then add the CSS for it

so this is our header block and now we are going to create a side nav and a main section so the HTML for these 2 sections

and then add the CSS

Now we have two blocks next to each other we set some margins for separations and set both to float left so they are next to each other, if we just declared the first one as float the second would be behind it. Now we have to clear the floats so add the clear float and add the last part the footer.

Now and the following styling rules

and that's all there is to but fear not we will be looking into more depth layouts in later tutorials.

Making a Simple Vertical Nav

For this tutorial we will be making a side navigation and for this we will use styled list inside a div block
So lets get started we need to use the following HTML code

and now we need to add the following CSS

this is just a combination of the previous CSS tutorials, so lets just break this down a bit. The fist thing we do is create a div and set a background colour, font colour and a border colour and then set some width. We don't need to set the hight as the content will create the height. Next we just create a small simple list push the list inwards and add a margin between each list element to separate them.

Making a Simple Horizontal Nav

Lets have a look at how to make an horizontal nav, now we looked at this earlier in the beginner section but now we are going to make a more dynamic one. In some web browsers you will require a doc type for this tutorial.

So we need the following HTML code;

Now we our adding in a clear div because we are going to float each of the list elements and so we need this other we run into problems. Okay so now add the following CSS code

So now lets break this down, we set a width on our nav block and add some colour to it, set similar stats' on the ul tag but the main styling is in the li tag because we set a default margin and padding, add a display:block so it becomes a block like the div nav, centre the text and set a width and then float left so that they will all be next to each other.

CSS Comments:

To make comments in CSS just use a forword slash followed by a star and then the other way to close the comment like so

/* this is a CSS comment */