You are here: jgpws.com/Tutorials/CSS/css_layout1_p2.html
See the previous part by going back.

Web Page Layout with Cascading Style Sheets- Page 2

Dated: 28 June, 2007
Author: Jason Gonzalez

We left the last page with the following code:

<?xml version="1.0" encoding="UTF-8"?>        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">

<head>
<title>CSS layout tutorial 01</title>
</head>

<body>

<h1>This is the Top Level Heading</h1>
<p>
<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>
<a href="#">Link Five</a>
<a href="#">Link Six</a>
</p>

<h3>Left Navigational Panel</h3>
<ul>
<li><a href="#">More Links Seven</a></li>
<li><a href="#">More Links Eight</a></li>
<li><a href="#">More Links Nine</a></li>
<li><a href="#">More Links Ten</a></li>
<li><a href="#">More Links Eleven</a></li>
<li><a href="#">More Links Twelve</a></li>
</ul>

<h3>This is the content</h3>
<p>Our layout will be fluid, which means it will 
resize as the browser window resizes. Our layout will 
be fluid, which means it will resize as the browser 
window resizes. Our layout will be fluid, which means 
it will resize as the browser window resizes. Our
layout will be fluid, which means it will resize 
as the browser window resizes.</p>

<p>Our layout will be fluid, which means it will 
resize as the browser window resizes. Our layout will 
be fluid, which means it will resize as the browser 
window resizes. our layout will be fluid, which means 
it will resize as the browser window resizes. Our 
layout will be fluid, which means it will resize as 
the browser window resizes.</p>

</body>
</html>

Now we are going to use <div> tags to divide each section into three parts and assign ids to them, which will be defined in our style sheet later.

Type the following around the first<h1> tag and horizontal links combination as shown below:

<div id="titlebar">
<h>This is the Top Level Heading</h1>
<p>
<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>
<a href="#">Link Five</a>
<a href="#">Link Six</a>
</p>
</div>

Repeat this step for two other divisions as shown below:

<div id="leftnav">
<h3>Left Navigational Panel</h3>
<ul>
<li><a href="#">More Links Seven</a></li>
<li><a href="#">More Links Eight</a></li>
<li><a href="#">More Links Nine</a></li>
<li><a href="#">More Links Ten</a></li>
<li><a href="#">More Links Eleven</a></li>
<li><a href="#">More Links Twelve</a></li>
</ul>
</div>

<div id="content">
<h3>This is the content</h3>
<p>Our layout will be fluid, which means it will 
resize as the browser window resizes. Our layout will 
be fluid, which means it will resize as the browser 
window resizes. Our layout will be fluid, which means 
it will resize as the browser window resizes. Our
layout will be fluid, which means it will resize 
as the browser window resizes.</p>

<p>Our layout will be fluid, which means it will 
resize as the browser window resizes. Our layout will 
be fluid, which means it will resize as the browser 
window resizes. our layout will be fluid, which means 
it will resize as the browser window resizes. Our 
layout will be fluid, which means it will resize as 
the browser window resizes.</p>
</div>

Previous Page Home Next Page

Subscribe to our RSS Feed

HTML

CSS

Photoshop

GIMP

Web Design/Wordpress

Web Page Layout with Cascading Style Sheets- Page 2