PageResource.com - Web Development Tutorials

CSS Layout

Learn How To Create a Website Layout Using CSS
home    DHTML Pit Stop  |  CSS Index  |  CSS Properties  |  HTML List

Home/DHTML/CSS/CSS Layout

In this tutorial we will use CSS to create the layout for a basic website. With CSS, there are several ways to arrange the html elements on a page. In this tutorial we will be arranging the <div> tags using "absolute positioning" to achieve the layout we are looking for.

We will start out by writing the HTML for our basic website.

<html>
<head>
<title>Company Main Site</title>
</head>
<body>

<div>
<h1>Welcome to System Associates</h1>
</div>

<div>
<h2>Site Menu</h2>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Client Login</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<div>
<h2>We are a Full System Service Provider</h2>

<p>We are a global services company. We specialize in system efficiency.
Our consultants can provide you with a number of different solutions best suited to your needs. </p> </div> </body> </html>

Here is what the page looks like without any styling. It is obviously very boring and a little confusing.



Here is the layout we would like to use.



This is a very simple layout. You have a place for a header, where we can put in some text about your website and maybe an image. Below the header on the left side, you have space for your Menu. On the right side you have area for the main content. We will now use CSS to rearrange the material on the page to look like our layout image.

We start out by adding by naming our <div>< tags so that we can style them. We will give each one an id.


<div id="header">
<h1>Welcome to System Associates</h1>
</div>

<div id="menu">
<h2>Site Menu</h2>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Client Login</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="main_content">
<h2>We are a Full System Service Provider</h2>
<p>We are a global services company. We specialize in system efficiency.
Our consultants can provide you with a number of different solutions best suited to your needs.</p> </div> </body>

Now, let's set up CSS section in the document. We will define the height, width and position of each of our
tags so that they look like our layout image. The full webpage will be 800x600 pixels. Our header will be 800x100 pixels, the menu will be 200x500 pixels, and our main content area will be 600x500 pixels. We then position each of our
tags using absolute positioning. Here is what our CSS will look like.

<style type="text/css">

#header
		{
		position:absolute;
		top:10px;
		left:100px;
		width:800px;
		height:150px;
		border:solid black 1px;
		}
		
#menu   
		{
		
		position:absolute;
		top:160px;
		left:100px;
		width:200px;
		height:500px;
		border:solid black 1px;

		}
		
#main_content

		{
		position:absolute;
		top:160px;
		left:300px;
		width:600px;
		height:500px;
		border:solid black 1px;
		}

</style>

Here is what the website looks like now with the CSS.



It looks much better than where we started. Now let's add some background color and some font sizing to our CSS.

<style type="text/css">
body
		{
		background-color:#535353;
		color:#535353;	
		}

a		{
		color:#000000;
		}

#header
		{
		position:absolute;
		top:10px;
		left:100px;
		width:800px;
		height:150px;
		text-align:center;
		background-color:#fbf882;
		
		}
		
#header h1

		{
		margin-top:50px;
		font-size:2.7em;
		}
		
#menu   
		{
		
		position:absolute;
		top:160px;
		left:100px;
		width:200px;
		height:500px;
		background-color:#e3e3e3;
		}
		
#menu h2 

		{
		margin-top:50px;
		margin-left:40px;
		}
		
#menu ul
		{
		list-style:none;
		margin-left:25px;
		}
		
		
#main_content

		{
		position:absolute;
		top:160px;
		left:300px;
		width:600px;
		height:500px;
		text-align:center;
		background-color:#ffffff;
		}

#main_content h2

		{
		margin-top:50px;
		}
		
#main_content p

		{
		margin-left:20%;
		margin-right:20%;
		}
</style>

Here is what the final page looks like.




previous
Previous
By: John Pollock

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy