Make your first CSS based website layout.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
iFlex
Forum Commoner
Posts: 41
Joined: Sat May 30, 2009 3:44 am

Make your first CSS based website layout.

Post by iFlex »

Ok so you want to create your own website. Well this cant just be done in HTML you need some thing called a cascading stlye sheet. Now basicly the job of a cascading style sheet (CSS) is to give a HTML page a style to work in.

Ok its time to get started. Make a new HTML page.

Code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
Ok save that as index.html.

Now you need to open paint.
Set the size of the image to 339 x 234 pixels and draw a rounded square like this
Image

Ok now we need three sections, top middle and bottom so sclice it like so:
Image

Save each section as it's own file. Before we do anything else lets look at the middle background , It seems the whole block is the same thing repeated over again , so instead of having it as a block like that lets make it into a 1pixel heigh strip by going to Image > Attributes (Ctrl+E) > Change height to 1px and voila , you will have an strip with an height of 1pixel. At this point you should have 3 sections looking like this:

Header:
Image

Middle
Image

Footer
Image

Now upload the images into the same folder as the HTML file.

And make a file called style.css and jam this in

Code: Select all

body {
  text-align: center;
  background-color: #ffffff;
}
#container {
  width: 390px;
}
#top {
  background: url(top.gif);
  height: 11px;
}
#mid {
  background: url(mid.gif);
}
#bot {
  background: url(bot.gif);
  height: 10px;
}
 
Ok now add the text details into the css document

Code: Select all

 font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
Now the margins

Code: Select all

 
  margin-top: 5px;
 margin: auto;
 
Now after the </head> closing tag insert:

Code: Select all

<div id="container">
  <div id="top"></div>
  <div id="mid">Put your content here</div>
  <div id="bot"></div>
</div>
 
Where it sais put your content here thats where you put your HTML and PHP. Dont forget if you want use PHP rename index.html to index.php.

Now you can customise the rest of it.

There you go! Feedback please

~flex
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Make your first CSS based website layout.

Post by kaszu »

As I understand this is a tutorial.

Naming: "bot" and "mid" i would call "bottom" and "middle".
When you say "now add the text details into the css document", remember that this is for beginners, so it should be explained where in CSS!
margin-top: 5px;
margin: auto;
should be

Code: Select all

#container {
    margin: 5px auto 0;
}
same for font.

Also I think it should be explained how each set property affects the page.

This could look more like a puzzle than a tut for beginners :)
Post Reply