Make a simple table less website using CSS Layout
(average: 3.83 out of 5)
Loading ...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 centered 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.
5 Comments
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.
Nice Topic,. thanks very much..
Hi,
It learnt a lot from the tutorial, but it would be more useful for a newbie like me, if you also explain the css, especially the float and clear.
Thank you for offering this nice tutorial …
This is great toturial, especially for the newer’s..really simple and fantastic ..means if any body want to learn.. then this is the starting..point. OOP.. its so simple ..that no have any question about this…
This is great toturial,I like it