Wednesday 08th of September 2010 07:18: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. Very simple!
Actions: View | Image Preview | Download [ 5k] [ZIP]



Two Column Flexible With Header

Browsers: Mozilla Icon ' Firebird Icon ' Netscape Icon ' again, this is discussed in Chapter 10, "CSS2: A Look Ahead".

7.7.4. List Styles In Shorthand

For brevity's sake, you cancombine the three list-style properties into a convenient singleproperty: list-style.

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. :-)
added to the largest positive margin (20px ), yielding (20px-18px = 2px ). Thus, there are only two pixels between the bottom of the list item's content and the top of the paragraph's content. This is what we see in Figure 8-24.

Figure 8-24

Figure 8-24. Collapsing margins and negative margins, in detail

There is one area of unresolved behavior, which is this: if elements overlap each other due to negative margins, which elements are "on top?" You'll note that few of the examples in browser warnings and caveats. Rather than drown the explanatory text in side notes, we have chosen to simply describe positioning as it is given by the CSS2 specification and leave things there. Perhaps the second edition of this book will contain more practical advice, but at this time, the only practical advice we can give is this: test your positioning code thoroughly, and be prepared for inconsistencies between positioning implementations.

9.1. General Concepts

you've turned off link underlining. Obviously, it's amatter of opinion, so let your own tastes be your guide -- butremember that if your link colors aren't sufficiently differentfrom normal text, visually impaired users may have a really hard timefinding hyperlinks in your documents.

It is also possible to combine decorations in a single rule.For example, assume that you wish to have all hyperlinks be both