CSS Based Layout Templates

Go directly to the templates.

What is a CSS based layout? Rather than using a table to layout the elements on your page, a template with CSS-based layout uses a Cascading Style Sheet to place the various elements. The "look" for the site - colors, fonts, graphic images that are part of the layout - are called from the cascading style sheet.

Official web standards recommend the use of CSS to achieve layout rather than the use of tables. Tables are still used for presenting data.

This is the start of a project to offer a series of CSS based layout templates to the RootsWeb Community. They are posted on the RootsWeb server so that you can see how your site might look with the RW banners in place. the template packages are housed on the Genealogy Web Creations or Expression Web Tutorials server space as RootsWeb does not allow zipped files and the templates and all supporting files. folders, and images are packaged in a zipped file.

The thumbnail of the template will take you to a full page using that template. You can then download the template package to your computer. Complete instructions for working with the templates is also available.

Each of these template packages includes two templates, one that uses server side includes for the top and side menus and the footer. Since the majority of people will NOT be able to view the server side includes on their own computer, the other template contains all regions as part of the main template. Both the template and style sheet validate. The template and the style sheet have been heavily commented to help you in the learning process. 

IMPORTANT NOTE: You will need to have a basic understanding of writing both HTML code and cascading Style Sheets to successfully work with these packages.

If you find it difficult working with the templates without being able to view the menus and footers, please see Barry Carlson's solution. View SSI Data in your Local Folders.

Christmas Nutcracker Template

Screenshot Christmas Nutcracker Mobile Friendly Template.The Christmas Nutcracker Template is is based on one of the newest templates offered on our sister site - Expression Web Mobile Friendly Site Templates. This template uses some CSS3 for the rounded corners. The rounded corners will display as intended in newer modern browsers. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fluid width layout  with a maximum width specified and is mobile friendly.  The template package includes a dwt  package as well as a blank template and a template that makes use of server side includes. Use the one that works best for your site. Added DECEMBER  2013.

 


Roots and Branches Template

Screenshot Roots and Branches Mobile Friendly Template.The Roots and Branches Template is is based on one of the newest templates offered on our sister site - Expression Web Mobile Friendly Site Templates. This template uses some CSS3 for the rounded corners. The rounded corners will display as intended in newer modern browsers. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fixed width layout and is mobile friendly.  The template package includes a dwt  package as well as a blank template and a template that makes use of server side includes. Use the one that works best for your site. Added August 2013.

Download the Roots and Branches template package.

This template is also available in a different color combination for use with Expression Web or FrontPage 2003.


Nightlights Template

Nightlights CSS Template.
The Nightlights template package is a fixed width (1024px) two equal column layout. It is set up to use server side includes for the menus and footer. Added February 2011.

Download the Nightlights template.


Nightlights for Expression Web, FP2003, SPD2007


Baubles Template

Baubles Site Template Package.
The Baubles Site Template package is a liquid layout with a triple layered background. The package includes three separate templates - a DWT, a blank template, and a blank template that uses ssi's.

Download the Baubles Template package. The packages includes three templates and all supporting files/images. There is a template for any web editor including one that uses server side includes. Added February 2011.


Additional Template Resources