Create a website without tables (CSS-P)

Most of nowadays websites are created with tables. Tables allow a multi-part structure for documents, each part being able to contain a menu, header, content and more.

However, this very popular method has many disavantages:

Moreover, for accessibility (for handicapped persons, for example), a semantically correct use of tags is recommanded.
A table is generally conceived to contain data (in a forum for example) and not to organize a document's presentation.

Full-CSS, or CSS positionning (CSS-P) is a strict application of recommanded Web standards of today.
XHTML, replacing HTML, is conceived to create a clear separation between content and layout.

Standards orientation is clear: all width, heigth, size, font, color tags MUST NOT be included in the html page but in the page that will be used to generate the layout for the document, that is the CSS style sheet.

We will create our website "the right way", totally in CSS, there will be no tables for layout. This website will respect all WC3 Norms and Standards and will also respect accessiblity rules for all handicaps, blind and deaf users.

Note: all CSS attributes that we will use will not be explained because their significance is explicit. If some of these are challenging for you, here is a short list of all the tags and attributes that we will be using: http://www.htmldog.com/reference/cssproperties/

CSS Positionning advantages

Here is the design that we will create: (Design by Alsacreations, all rights reserved.) :

First part: Header

Let's take a look at the layout in general.

We will try to think differently, without tables or cells but with "zones" or "blocks".

There are several blocks within this site design:

If this design was constructed from tables, we would need to cheat and use a lot of colspan, rowspan, ... and columns or separations, or even worse, the infamous transparent gifs (spacers).

In this case, we will keep the idea of Blocks, each area being placed on the page, and each area being defined (size, internal structure, background...) on the CSS style sheet.

NOTE: we will construct our layout with semantics like <div> tags that are neutral tags for block containers.
Generally, <div> is assimilated with the concept of "layer", especially on htlm editors such as Dreamweaver.
We don't have to have this position property defined, instead divs can be placed in relation one to the other with the "margin" property.

The first advantage of CSS is easy to guess: if you want to move or interchange parts of a website, you only need to change one or two lines in the style sheet, instead of going and changing each cell of each page...

Let's start by looking at the Header: here is how I envision it:

The Header will be based on two container div blocks:

- "head 1" will contain a background image as will as the logo (Adminews) on the right side.
- "head 2" will contain a background image as well as the horizontal menu.

Here is the html code, pretty easy:

<html>
<head>
<title>mon site</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="head1">
<img src="design/logo.gif" id="logo" alt="logo" /></div>
<div id="head2"></div>
</body>

</html>

The logo will be placed in the first block (in the div id="head1"). Don't forget the ALT attribute that is mandatory in XHTML.

CSS code on the style sheet (style.css) is easy as well (explanations below).

Note: /* These texts are explanations and can be removed */

body {
margin: 0;/* without margins the page would be stuck to the sides*/
font-family: verdana, arial, sans-serif; /* base font is defined in the page */
font-size: 12px; /* size font is defined in the page */
}
#head1 {
background-image: url('design/head1.gif');
width: 770px;
height: 91px;
}
#head2 {
background-image: url('design/head2.gif');
width: 770px;
height: 36px;
} 
#logo {
float: right; /* to align the logo to the right */
margin-right: 10px;  /* place the logo within its container, head1 */
margin-top: 3px;
border: 0;
}

the page margins are eliminated so that it sticks to the sides. Both header blocks (background image and sizes) are defined. Create a id for the logo so that it splace within the div is set (here it is aligned to the right with a margin of 10 px to the right and 3 px at the top). The image will have to have a border at zero because it probably will become a clickable link. Image-links always have a border of 1 by default it needs to be suppressed in CSS.

PS: don't forget the ";" at the end of the CSS instructions.

There, the header is done. We'll take care of the horizontal menu later.

SECOND PART: menu and central area

The menu clock is aligned to the left.

The main content container takes up all the remaining space , that is 586 pixels.

Here is the CSS code for this part:

#left {
position: absolute;
left:0; /* the left block is placed in absolute position to the left */
background-image: url('design/menu.gif');
width: 181px;
height: 337px;
}

#center {
margin-left: 181px; /* the center block is placed according to the left block's width */
width: 586px;
}

HTML part :

<div id="left"></div>
<div id="center"></div>

THIRD PART: left menu

LThe menu is composed of a light blue cadre with a dark blue border. The text inside will be a list, since this tag made for this type of vieweing.

Of course, place the menu block(<ul id="menu">) inside the leftblock (<div id="left">) or it will show up somewhere else in another block.

Here is the CSS to define all that:

.menu { /* defines container for the menu */
margin-top: 30px;
width: 160px;
border: 1px solid #060C6F;
background-color: #B7D3F0;
font-family: verdana, arial;
font-size: 110%;
text-align: center;
}

And this is the HTML part:

<ul id="menu">
	<li>Menu 1</li>
	<li>Menu 2</li>
	<li>Menu 3</li>
	<li>Menu 4</li>
	<li>Menu 5</li>
</ul>

we'll add a ficticious content right away for the central area:

<div id="center">
<h1>My Website</h1>
<h2>How I built it in CSS and without tables </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti.
Cras leo nibh, aliquet nec, interdum et, consequat sed, nulla. Praesent
nec quam quis augue auctor pulvinar. Nunc vehicula wisi et mi. Quisque ultricies 
conubia nostra, per inceptos hymenaeos.</p>
<p>Sed gravida leo sed quam. Aenean vitae pede a felis semper vestibulum.
Mauris non ante. Pellentesque suscipit lectus at erat. Integer et risus id tortor
tempus nec, erat</p>
</div>

Take this opportunity to define title tags in CSS code:

h1 {
font-size: 140%;
text-align: right;
}

h2	{
font-size: 100%;
text-align: right;
}

Then add the list tags that will allow us to logically create our menu:

ul,li {
list-style-type: none; /* to minimize problems */
margin: 0;
padding:0;
line-height: 30px; /* extra space */
}

LAST PART: horizontal menu

Each menu link (Home, Products, Catalog...) will be structured with the "lienhaut" id like this: font size 16px, bold and a left margin of 20 pixels to create a space between all elements of the menu.

Since the menu is horizontal, we can skip using a list (the elements of a list go to the line by default) and we can use <a> tags with margins to space them.

The different links are placed within a container block that indicates the general structure for the menu (plaed aligned to the right with amrgins).

Here is the CSS code:

#topmenu {
float: right; /* vertical menu is aligned to the right of its container, head3 */
margin-right: 10px;
margin-top: 10px;
}

#topmenu a {
font-size: 16px;
font-weight: bold;
color: #060C6F;
text-decoration: none; /* no decoration to avoid underline showing when hovered onto */
margin-left: 20px; /* Space between each sub-menu */
}

Here is the HTML part (place it in the right spot, that is within the DIV "head2") :

<div id="topmenu">
  <a href="...">Home</a>
  <a href="...">Products</a>
  
  <a href="...">Catalog</a>
  <a href="...">Forum</a>
  <a href="...">Contacts</a>
</div>

NOTE: it would have been good to create the horizontal menu with a list as well, as we did the left menu, but it would have necessitated more explanations on how to place the elements of a list side by side. More info on that detail point on Listamatic website.

And more ...

The general design is now finished. Here is the result.

The CSS positionning technique can seem difficult at first for webmasters used to tables... but the advantages quickly impose themselves.

Proof is that an entire design can be modified by changing only a couple of lines in the CSS style sheet. Imagine how much time will be saved when you have to update a website of several hundreds of pages!

As a conclusion, and it is important, CSS positionning allows you to follow the evolution of Web Standards as proposed by W3C.

Print article

Raphael GOETTER
www.alsacreations.com