Template Categories

templates categories Automobiles
templates categories Business
templates categories CSS Templates
templates categories E-Commerce
templates categories Education
templates categories Fashion
templates categories Greeting Cards
templates categories Hotels
templates categories Jewelry
templates categories kids
templates categories Models
templates categories Music - Films
templates categories Night Club
templates categories Real Estate
templates categories Restaurant
templates categories Software
templates categories Sports
templates categories Travel
templates categories Web-design
templates categories Wedding

Tutorial Categories

tutorial categories AJAX
tutorial categories CSS
tutorial categories Dreamweaver
tutorial categories Flash
tutorial categories FTP - File Transfer
tutorial categories HTML Emails
tutorial categories Javascript
tutorial categories Microsoft Excel
tutorial categories Microsoft Windows
tutorial categories Microsoft Word
tutorial categories MySql
tutorial categories Photoshop
tutorial categories Php
tutorial categories Windows Movie Maker
tutorial categories Xhtml / Html

CREATE A CSS BASED WEBSITE

Creating css based website. No Tables.
In this tutorial get the HTML and CSS code for a 100% 3 column website. Only DIV's and no tables. Modify the code to suit your requirements.

The HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="c1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<div id="left">
Left Column
</div>
<div id="right">
Right Column
</div>
<div id="middle">
<h1>
Welcome to my website
</h1>
<p>
Middle Column
</p>
</div>
</div>
</body>
</html>

The CSS code

body {
margin: 0;
padding: 0;
font-family: verdana, arial, helvetica, sans-serif;
color: #FFF; background-color: #000;
}
a {
text-decoration: none;
font-weight: bold;
color: #FF66CC;
}
a:visited {
color: #FFF;
}
a:active {
color: #FFF;
}
a:hover {
color: #FF66CC;
text-decoration: underline;
}
p {
font-size: 10px;
line-height: 22px;
margin-top: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
}
#left {
position: absolute;
top: 0px;
left: 0px;
margin: 20px;
padding: 10px;
border: 1px solid #555;
background: #333;
width: 160px; /* ie5win hack starts */
voice-family: "\"}\"";
voice-family:inherit;
width: 130px;
}
html>body #left {
width: 120px; /* ie5win hack ends */
} #middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 1px solid #555;
background: #333;
}
#right {
position: absolute; top: 0px; right: 0px;
margin: 20px;
padding: 10px;
border: 1px solid #555;
background: #333;
width: 160px; /* IE5 hack starts */
voice-family: "\"}\"";
voice-family:inherit;
width: 130px;
}
html>body #right {
width: 130px; /* IE5 hack stops */
}