Using Relative Positioning For Consistent Layout - A Basic Web Page
(Page 3 of 4 )
Let’s use the example of a very basic Web page, with four primary elements:
- a logo
- a navigation box
- a main content area
- a footer
Here’s the XHTML 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 content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>A Basic Web Page</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<div id="all" align="center">
<div id="logo"><a href="index.htm"><img
style="border: 0px solid ; width: 300px; height: 50px;"
src="images/logo.png" /></a></div>
<div id="nav">
<a href="page1.htm">page 1</a><br />
<a href="page2.htm">page 2</a><br />
<a href="page3.htm">page 3</a><br />
<a href="page4.htm">page 4</a><br />
<a href="page5.htm">page 5</a>
</div>
<div id="main_content">
<h1>My Page</h1>
<p>A paragraph with some content.</p>
<p>This is where all the main content of each page will be located, as is indicated by the id of the containing div.</p>
</div>
<div id="footer">
© 2005 | <a href="mailto:">Contact me</a>
</div>
</div>
</body>
</html>
As you can see in the code, all the body contents and elements are contained in one all-encompassing div, unambiguously named "all." I use this method for the sole purpose of centering everything, and modifying positions relative to the center of the screen, no matter what the resolution. This raw XHTML will produce the following results:
Now let’s make things pretty with some relative positioning!
Next: Now that’s Style! >>
More Style Sheets Articles
More By Justin Cook
/ 18 
