tutorial - look ma! no tables

Page 1

This page has been made with no tables, using only CSS to position the page
elements.

Some changes had to be made to the original design using tables, because
there are no longer table cells to put background graphics inside, and the
3 graphics used needed a small change from the original graphics. The white
area on the top and side graphics, and the top background graphic have a
blue border instead of a white border to match the body background colour
which sets the surrounding colour.

To make this page I have used 2 absolutely positioned <div> elements
to hold the top and left side graphics. The page content area position is
defined in the style sheet. Instead of using a fixed position, I have set
the top, left and right sides, and bottom positions by setting the margins
from each side. By using relative side positions allows the content area
to expand or contract with the browser window. The top background graphic
is actually the page background, set to repeat only across the page. Remember,
no table cell for a background now.

First, set up the 2 absolutely positioned <div> elements on the page.
In common parlance, and in Dreamweaver, <div> tags using CSS positioning
are known as "Layers", not to be confused with the proprietary
Netscape 4 <layer> tag.

Drag out two layers on to the page, set the first one so:
Top = 0px
Left = 0px
Width = 400px
Height = 110px

and the second one so:
Top = 110px
Left = 0px
Width = 90px
Height = 270px (or the height of your side image)

Insert the top graphic in the first layer, and the side graphic into the
2nd layer. The rest of the page is set up in an external style sheet linked
to the page. I have actually used 2 style sheets to allow for a couple of
Netscape 4 vagaries. The first linked style sheet has all the styles defined
that will work for Netscape 4, and other CSS capable browsers, with a 2nd
style sheet imported that has a slightly different style. Since Netscape
4 does not recognise an imported style sheet, styles that would otherwise
upset NN4 can be included here for the other browsers

The main linked style sheet is listed here:
(without the URL link styles to keep it clearer).

And the 2nd style sheet which is imported into the page has only 1 small
change, being a line height setting for the normal text, just because I
think it looks better. You do not need this unless you are including other
styles that NN4 does not like.

Care needs to be taken with the path in the stylesheet to the body background
image - the correct path should be read from the stylesheet location, but
Netscape 4 reads it from the page location. In this case, the stylesheet
is in the same directory as the page.