Grafica Designs

I know its been some time, but this week is very busy and I just not had any time to write anything when it comes to site updating, So I just want to say sorry and when I get some free time I will work on How to make a div layout, which will cover the header Nav and Footer.

So please don’t think I have given up on it…

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

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

I just want to say sorry to anyone who is following the “How to make a div layout”. I’ve one hell of a week when it came to a tooth, which was being root canaled. It has now been taken out today and I’m in so much pain that I’m taking a break for a few days away from here. The reason the root canal did not work is where the tooth should only have one root, I had two, so the dentist had been working on a root that was not needed doing and as the other root did not show up on xray as it was hidden behind the first root, they say it was best it came out. When we both saw the other root we were both shocked and I got alittle mad, now that if it had been seen, then they could have worked on it and it would never have needed removing.

I will for sure get part four up next week, Also please leave feedback has if I know what you think then if I need to improve it then I can, no feedback does not help me when it comes to maybe thinking of writing more. Again I’m sorry…

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

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

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