Archive for the ‘How to make a div layout’ Category

Making a Div Layout - Part five

May 15th, 2008

Posted in How to make a div layout | 6 Comments »

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
(more…)

Tags: , , ,

Making a Div Layout - Part four

May 6th, 2008

Posted in How to make a div layout | 8 Comments »

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


Right, let’s just cover the stylesheet which we have at the moment. The stylesheet gives the orders, remember? So we will cover the main orders that you already have in the style.css, we are just going to cover body and page today.

Now open the style.css in notepad or whatever you are using? Now right-click on the index.html file and open with firefox or Internet explorer if you don’t have the files I just said, then what are you doing reading this? Get back to Making a Div Layout - Part one. Ok, in the browser you will see a white page with black writing, as we make changes to the style.css after saving the style.css then refresh the browser and you will then see the change to the index.html. (more…)

Tags: , , ,

Making a Div Layout - Part three

April 26th, 2008

Posted in How to make a div layout | 1 Comment »

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 (more…)

Tags: , , ,

Making a Div Layout - Part two

April 24th, 2008

Posted in How to make a div layout | No Comments »

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


To authorise document is HTML or XHTML you must place the below code, you cannot validate it without the code.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(more…)

Tags: , , ,

Making a Div Layout - Part one

April 24th, 2008

Posted in How to make a div layout | No Comments »

Making a web page can go right over your head if you are all new to it and even if you are not? Even little old me still runs around clueless sometimes when making a layout. Now I will say this is how I make a page, I’ve never been to college and never did html at school. Why do I say this here? I’m sure someone will say I’m wrong and so on. Well this is how I do it and it works and it’s valid in both HTML and CSS and this being the case I must be doing something right! If you think I can improve this tutorial let me know.


This will be a centered div layout. (more…)

Tags: , , ,