Valid div layout - Designs / Layouts tutorial
- Added: Aug 3rd, 2006
- Level: Medium
- Author: Melfina
- Reads: 61,108
- Description: Take a step further and design your first valid absolute positioned div layout easily.
This time I'll be covering a more correct way to create absolute positioned div layouts using XHTML 1.0 and CSS standards as stated by the World Wide Web Consortium. This tutorial won't cover the image editing part as I did in Div Tutorial I and II but the coding part itself: by the time you're following this tutorial, you must already have a layout image prepared and saved for web and a background image, if your layout will have a repeating background.
Open Notepad, we'll start writing the CSS (the style) for your page. The main structure will be:
margin: 0px;
padding: 0px;
background: url('background.jpg') repeat-y;
background-color: #F1BEAD;
font-size: 11px;
color: #BD6267;
font-family: verdana, arial, sans-serif;
}
#layout {
width: XXXpx;
height: YYYpx;
background: url('layoutimg.jpg') no-repeat;
position: absolute;
top: 0px;
left: 0px;
}
#content {
position: absolute;
width: XXXpx;
top: YYYpx;
left: XXXpx;
}
#navigation {
position: absolute;
width: XXXpx;
top: YYYpx;
left: XXXpx;
}
h1 {
color: #D3788A;
font-size: 16px;
}
a {
color: #7D575D;
}
a:hover {
color: #000;
}
The bold values must be replaced for your actual image and layout settings: change the colors to fit your image dimensions and put the right url of your images: layout image and background (if any background, remove the background: url('background.jpg') repeat-y; line.
If you want your div layout to be positioned at the right instead of the lef, you will need to change left: to right: in #layout, #content and #navigation.
The italic values may be modified, but it's not necessary. At this point, you may modify this basic CSS file and save it as style.css (remember Type: all types must be selected when saving the document). You may want to Validate your CSS when you finish writing it.
How we get the position and width of each div? check the Div Tutorial II to know how (step #2 of Coding the layout).
At this point, we can code the page. Open a new notepad document and put this:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Your site title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="layout"></div>
<div id="content">
<h1>Header sample You will write all your content here...
</div>
<div id="navigation">
<a href="#">Your link here</a><br />
<a href="#">Your link here</a><br />
<a href="#">Your link here</a><br />
<a href="#">Your link here</a><br />
<a href="#">Your link here</a><br />
<a href="#">Your link here</a><br />
</div>
</body>
</html>
The first thing we've put is the doctype declaration, because we need to specify which kind of coding we'll be using. This layout is completely coded with divs and CSS, so we use a XHTML 1.0 Strict doctype. At the html tag we specify the namespace and language of our page. I used english (en), you will need to change it if you'll be using other language than english in your site.
We've also linked to our stylesheet and defined the character set we'll be using. You won't normally need to change the character set unless you'll be using asian, arabic, etc characters.
Now at the body part, we've got a div for the layout image, which must be empty, since it's only there to show the image. We've also got a div for the navigation and for the content, there we put all our content and navigation links.
That's all, we're done with the layout. You may want to Validate your HTML. Please note that this tutorial only covered the layout coding, so when you add content, the coding must follow XHTML rules and regulations too.
If you like this tutorial why not 
digg it or 
add to del.icio.us?
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.