Make a simple table less website using CSS Layout
Creating a web page with CSS layout is always very useful which became very popular. It is the w3c standard for defining the layout of a (X)HTML document. In this tutorial, I am going to tell you how to make a two column fixed layout document. As a basic layout, I will explain with a xhtml 1.0 Translational document type.
I guess, you may be aware of html tags. If not, first refer this topic HTML tags. Because knowledge about html tags is a must and necessary to learn before starting to design a webpage.
Open a new html document(1.0 translational) using dreamweaver or whatever web design software you have.
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”>
<!–Include meta informations–>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Tutorials Tag</title>
<!–Code to insert an external style sheet –>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<!–The content area –>
<body>
<div id=”container”>
<div id=”header”>Sample page with basic css layout</div>
<div class=”navigation”>
<a href=”index.html”>Homepage</a><br />
<a href=”subpage1.html”>subpage1</a><br />
<a href=”subpage2.html”>subpage2</a><br />
</div>
<div class=”maincontent”>This is the main body content.<br />All your main contents should go here.</div>
<div class=”footer”>All Rights Reserved</div>
</div>
</body>
</html>
This page has been divided as four sections, namely header, navigation, main content and footer section. I have divided the sections using div tags and these tags can be controlled via external style sheet. And I have included a main div tag “container” which wraps all other div tags to form a proper layout.
Now write a style sheet to make control over the above divs. Below is a simple css code for beginners.
Code:
a, a:visited{ color: #0099CC; text-decoration: none; }
a:hover { color: #666666; }
body { background: #f2f2f2; color: #333; font-size: 11px; font-family: Verdana, Arial, Sans-Serif; margin: 0 auto; }
#container {width: 800px; margin: 0 auto; border: thin solid #ccc; background-color: #fff;}
#header {width: 800px; height: 100px; padding-top: 28px; background-color: #999900; font-size: 16px; text-align: center; color: #fff; font-weight: bold;}
.navigation {width: 180px; float: left; padding: 10px;}
.maincontent {width: 580px; float: left; padding: 10px;}
.footer { clear: both; width:800px; height: 50px; text-align: center; background-color: #ccc; line-height: 50px;}
Paste the above codes and save the file as style.css
Refer this topic to learn how to make a style sheet.
Latest tutorials in Webdesign
- Nofollow external or advertising links - December 3rd, 2008
- How to make tables using dreamweaver - November 12th, 2008
- How to add images to a webpage - November 11th, 2008
- Horizontal Navigation using list property - November 9th, 2008
- How to make a CSS style sheet - October 25th, 2008
One Comment
Hi,
I really thanks you for posting this topic it’s helps me a lot as i am an starter for web designing.
Every one must know.