Main content region
It is good practise to make the main content region the very first part of the body of a page. This makes the page very usable in text-based browsers, hand-held devices, and in screen readers.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Ehr</title>
<style type="text/css" media="screen" id="test">
html, body {height: 100%;}
#masthead {
height: 90px;
position: absolute;
width: 100%;
}
#navbar {
height: 30px;
padding: 4px;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
}
#content {
height: 100%;
padding-top: 93px;
}
</style>
</head>
<body style="margin:0px;padding:0px;">
<div id="masthead">
MASTHEAD (fixed size, absolute positioned to top)
<div id="navbar">NAV (nested inside masthead)</div>
</div>
<div id="content">
CONTENT (standard document positioned, with padding-top of masthead height)
</div>
</body>
</html>Sidebars using tables are horrible. They are completely undesirable for people using text-based web browsers, people using screen readers, and people who wish to print a page from your web site. Using CSS and XHTML properly one can create sidebars that can be used well for these applications.
HTML code:
Accessible side-bars
Main content region
It is good practise to make the main content
region the very first part of the body of a
page. This makes the page very usable in
text-based browsers, hand-held devices, and in
screen readers.
The first element after the columns must have the style
"clear: both;" applied to it, or else either the
content region or the side-bar may overlap it under
some conditions.
CSS code:
#content
{
float: right;
/* This float makes the content region lie on the right side of the
* page.
*/
margin-left: 17em;
/* This margin-left makes room for the side-bar that will appear to the
* left of the content region. It should be a value greater than or
* equal to the width of the side-bar, including its padding and border
* widths.
*/
}
#navigation
{
width: 15em;
float: left;
/* This float makes the side-bar lie on the left side of the page,
* beside the content region.
*/
margin-right: -15em;
/* This margin-right allows the side-bar to sit in the "margin space"
* to the left of the content region. It must be equal to the width of
* the side-bar, including its padding and border widths.
*/
}
.clear
{
clear: both;
/* This clear prevents any "floating" elements from appearing to the
* left or right of this. This property is desirable for the first
* element, if any, beneath the columns of the page, to prevent the
* columns from overlapping this element if they are too long.
*/
}
/* To make the column appear on the right side, swap "left" for "right" and
* the other way around, for all of this CSS code (i.e. float:right ->
* float: left, and margin-right -> margin-left)
*/
A basic XHTML 1.1 template that I use when I make new web pages or web sites. Has all the basics such as META tags for description, keywords, author. Uses Windows Latin 1 (ISO-8859-1) character encoding; you might want to change this to UTF-8 if you are going to use characters from more than the basic Unicode range. Links to an external screen stylesheet (screen.css). Replace all the "edit_me" bits.
XHTML 1.1 Template
edit_me