Template: 1 Header, 2 Columns
Introduction
Author: Martin WarningYear: 2007
License: Free
This is a template for a web page with a header row and 2 columns done with CSS and XHTML using the <div> element. Officially XHTML doesn't allow the use of tables to position website content. Tables are reserved for actual tables with data. As such we are limited to using the <div> element, which is a good thing. Through CSS positioning we have much more control over how and where content displays on the page. You can create your own template by trying out the Template Builder for this template.
Code
Languages:- XHTML
- CSS
<!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> <title>1 Header, 2 Column Template</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="designer" content="Martin Warning"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="content"> </div> <div id="menu"> </div> <div id="header"> </div> </body> </html>And the CSS (style.css) part:
#header{position:absolute;top:0px;left:10px;right:10px;height:70px;z-index:0;}
#menu{position:absolute;top:72px;left:10px;width:140px;z-index:1;}
#content{position:absolute;top:72px;left:152px;right:10px;z-index:2;}
The first thing you might notice is that the XHTML code is written in reverse, starting with the content and ending with the header. As we use absolute CSS positioning the location of a <div> in the code doesn't matter. This means we can start with the code for the content so that the content will be the first thing the user sees on their screen. This means that the user can start reading before the whole page is loaded. All you need to add is your own styling. The z-index indicates which element needs to be most top. In this example the content area is the most top area. This is not necessary as the areas don't overlap, but is added in case browsers misinterpret the code and have areas overlap. Overlapping can also occur when content is larger than the area, something that often occurs when the user resizes the browser to a smaller window size.
The following code results in the menu on the right side of the content area:
#header{position:absolute;top:0px;left:10px;right:10px;height:70px;z-index:0;}
#menu{position:absolute;top:72px;right:10px;width:140px;bottom:0px;overflow:auto;z-index:1;}
#content{position:absolute;top:72px;right:152px;left:10px;bottom:0px;overflow:auto;z-index:2;}
In this example we just modify the menu and content class to change the page layout, the XHTML remains the same. This is one of the main advantages of working with <div> and CSS. In the 3 examples on this page just the CSS is modified for different layouts, but the XHTML remains the same.
The following code results in a stretched menu and content area:
#header{position:absolute;top:0px;left:10px;right:10px;height:70px;z-index:0;}
#menu{position:absolute;top:72px;left:10px;width:140px;z-index:1;}
#content{position:absolute;top:72px;left:152px;right:10px;z-index:2;}
This code, based on example 1, will stretch the menu and content area to fill the whole page. If the content inside either of these areas is longer than the window, the area will have a scroll bar for scrolling. The XHTML code remains the same for this example.
example1.zip
