Saturday 28th of January 2012 02:46:17 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 ' limit how high or wide a positioned element gets, not to mentioncases where you want the browser to go ahead and automaticallycalculate the width, or the height, or both.

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.



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. :-)






H1 {background-image: url(tile2.gif); background-repeat: repeat;background-attachment: fixed;}
Figure 6-57

Figure 6-57. Perfect alignment of backgrounds

How is this perfect alignment possible? Remember, when a backgroundis fixed , the origin element is positioned withrespect to the canvas. Thus, both background patterns begin tilingfrom the top left corner of the document, not the individualelements. For the BODY, we can see the entirerepeat pattern. For the H1, however, the onlyplace we can see its background is in the padding and content of the

Figure 4-18

Figure 4-18. Justification without hyphenation in narrow circumstances

WARNING

While almost every browser that supports CSS will handle most values of text-align, they often fall down when handling justify. Navigator 4 does support justify, but it's fairly buggy -- it most often breaks down within tables. Internet Explorer 4.x does not support justify, while IE5 does, and Opera 3.6 supports it as well. change if the parent element's width changes in some way. Forexample, assume the following, shown in Figure 7-10:

Figure 7-10

Figure 7-10. Parent widths and percentages

While this is interesting enough, consider the case of elementswithout a declared width, whose overall width(including margins) is therefore dependent on thewidth of the parent element.

Figure 7-11

Figure 7-11. Percentage margins and changing environments