Navigate FireThrottle
Login
Members online: 
The Latest...
FireThrottle » Tutorials »
css » Basic HTML/CSS LayoutBasic HTML/CSS Layout
EXPANDED VIEW?
Learn how to make a simple 2 column css/html layout. Graphics included and fully explained.
Preview TemplateHey, this tutorial will tech you how to make my simple barbed wire template, it's not beautiful but will help you when you build html/css layouts in the future...
1. Images
This part is easy, I made these on paint but you can do them on photoshop or just use my ones:Banner - h=88 w=461
Navigation - h=25 w=132
Content - h=25 w=292
Footer - h=25 w=292
Leave the image names as they are when you save/upload them because otherwise you will need to change all the links in the html.
2. CSS
The css is fairly easy, the width of the boxes revolves around the width of the images so if you change the images keep them the same size.body,table { font-family: verdana; font-size: 9px; color: #809033; } |
-first line.. defines what you want this to style
-third line.. font
-fourth line.. size (pretty small)
-fifth.. color (a dark green)
#content { border-width: 0px; width: 292px; } |
-first line.. this is the content box
-third line.. no border
-fourth line.. width (same as image)
#nav { border-width: 0px; width: 132px; } |
-first line.. this is navigation
-fourth line.. same as image again
#blank { padding: 3px 3px 3px 3px; } |
-first line.. this just goes inside all the boxes
-third line.. padding, makes the text slightly away from the edge
#contenttag { border-width: 0px; width: 292px; margin-top: 4px; } |
-first line.. this is the footer, the tag under the content box
-fifth line.. pushes it 4px away from the content box, so the top image isn't right next to the text at the bottom of content
a:link {color: #809033; text-decoration: underline;} a:hover {color: #CCC; text-decoration: none;} a:active {color: #CCC; text-decoration: none;} a:visited {color: #809033; text-decoration: underline;} |
-colors of links, more or less explains itself.
well, thats the css done! all we have to do is make the actual page!
3. HTML (Page)
Now, this is where it gets complicated, i used divs inside a table, the divs were like floating things that just went wherever they wanted to, so we use a table to push them all together so the form a template.Here is ALL of the html code, I break it down below
<html> <head> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <table border="0" cellpadding="2" cellspacing="1" align="center"> <tr> <td colspan="2"> <img src="banner.PNG"> </td> </tr> <tr> <td valign="top"> <div id="nav"> <img src="navtitle.PNG"> <div id="blank"> Site<br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> Other<br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> </div> </div> </td> <td valign="top"> <div id="content"> <img src="contenttitle.PNG"> <div id="blank"> Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! </div> <div id="contenttag"> <img src="contenttagtitle.PNG"> <div id="blank"> Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... </div> </td> </tr> </table> </body> </html> |
pretty dazzling huh? well, here it is broken down..
<head> <link rel="stylesheet" type="text/css" href="css.css"> </head> |
-this is the head, inside we have our link connecting the WHOLE page/document to our css file.
<table border="0" cellpadding="2" cellspacing="1" align="center"> |
-our good ol' table, this is the start of it, it also describes some of it's properties, like 2 cellpadding and placing it in the middle of the screen
<tr> <td colspan="2"> <img src="banner.PNG"> </td> </tr> |
-our banner image, it spans across navigation and content boxes.
<tr> <td valign="top"> <div id="nav"> <img src="navtitle.PNG"> <div id="blank"> Site<br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> Other<br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> - <a href="index.html">Home</a><br> </div> </div> </td> |
-our navigation, everything is more or less simple, the valign="top" in the td put the text at the top, usually it would float around the middle.
<td valign="top"> <div id="content"> <img src="contenttitle.PNG"> <div id="blank"> Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! Content writing here... Ooh a monkey! </div> |
-this is pretty similar to navigation except it doesn't end the td, this is because the footer comes next;
<div id="contenttag"> <img src="contenttagtitle.PNG"> <div id="blank"> Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... Extra / Features here, theres another monkey! Man... </div> </td> </tr> |
-nearly exactly the same as content, now remember in the css, we did the margin-top: 4px, this is because we want it to appear as a seperate box. spaced away from the bottom of the content box.
thats basically it, you now know where to get the images and everything, but, if you want the whole template with css file, images and index page then click below:
Download Template
Thanks for you time and please visit my site;
Crimson-works.com
Yours, Dan.
onimeru | April 5 2006 | Views: 12055
Rate
Current rating:
Please login or register to rate
Categories
Comments
Present comments
(
2 )
great tutorial. well explained and nice final result.
ice | profile >>
hehe, putting this on my site when it's up.
onimeru | profile >>
Expanded view?
Annoyed with the current consise view? View this tutorial in the expanded form:
Expanded view?
