Monday 21st of May 2012 12:23:08 AM

CSS Page Layout Templates

Introduction/2 Column Templates

The following page templates are all constructed using XHTML1.0 and CSS2.
Templates marked with Recommended ! are ones I recommend.

Please note: these templates are a learning tool and should be thoroughly tested before being used on a 'production' web site.

The templates are valid CSS2 and XHTML1.0 Transitional and have been tested on WinXP with IE6, Opera 7.11 and Mozilla 1.5b as well as Firefox 0.8 & Netscape 7.1 (which are basically the same as Mozilla).



Templates: Two column |  Three column |  General




Two Column Flexible

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: Probably the easiest page to make. Contains two layout divs, the main content div is just floated to the left. I elements. In practice, not every font is sosophisticated as to have both an italic face and an oblique face, andeven fewer web browsers are sophisticated enough to tell thedifference when both faces do exist.

Figure 5-26

Figure 5-26. More font styles

If either of these is the case, a few things can happen. If there isno Italic face, but there is an Oblique face, then the latter can beused for the former. If the situation is reversed -- an Italicface exists, but there is no defined Oblique face -- the user Very simple!

Actions: View | Image Preview | Download [ 5k] [ZIP]



Two Column Flexible With Header

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: Basically the same template as above but with the addition of a header div for page title, your logo or banners etc. Again very simple to set up.
Actions: View | Image Preview | Download [ 3k] [ZIP]



Two Column, Left Column Static

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: Two columns, the left column is absolutely positioned on the left and is a fixed width. The right content column is sized and positioned by using margins and will resize with the browser window.
Actions: View | Image Preview | Download [ 6k] [ZIP]



Two Column, Left Column Static, with Header Bar

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: This is the same template as above but with the addition of a simple header bar which can be used for links, search box etc..
Actions: View | Image Preview | Download [ 6k] [ZIP]



Two Column Fixed Width with Header & Footer Recommended !

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' Opera Icon ' IE6 Icon(5+)
Description: A fixed width centered page with a header, footer, left navigation column and right content column. One of my favourites.
Actions: View | Image Preview | Download [ 6k] [ZIP]



Templates: Two column |  Three column |  General



Note: The poor colour schemes and thick borders of the templates are for demonstration purposes. :-)






edge to the right (or left) of its containing block's right (orleft) edge.

In other words, a floating element cannot stick out beyond the edgeof its containing element, unless it's too wide to fit on itsown. This prevents a situation where a succession of floated elementscould appear in a horizontal line and far exceed the edges of thecontaining block. Instead, if a float would stick out of itscontaining block by appearing next to another one, it is floated downto a point below any previous floats, as illustrated by Figure 8-36 (where the floats start on the next line in

all elements

fontIE4 P/Q IE5 P/Y NN4 P/P Op3 Y/-

This is ashorthand property for the other font properties. Any of these valuesmay be omitted except for font-size andfont-family, which are always required for a validfont declaration. Note the following incorrect examples.

Example

This is used to declare a specific font