CSS Based Layout Templates

Sources for Seamless Tile Backgrounds

Remember if you use someone else's graphics you may need to link back to their site.

CSS Menus

Color Tools

Each of these templates is css based using no tables for layout with the exception of one. They are written with an XHTML transitional doctype and have an external stylesheet. You are welcome to use them as a basis for site layout. Changes to colors, font families, font sizes and such should be made within the external stylesheet. The masthead is a graphic image. Depending on MY time constraints, I will be happy to add a site title for you. Any of them can easily be converted to a dynamic web template if you are using FrontPage 2003 or Expression Web. Although created in Expression Web, they can be used with any WYSIWYG editor or any html editor for that matter. The images in the content area are strictly to show you how they would look when a 1px black border and/or drop shadow is added.

ALL of them are based on an original layout created at my favorite site Inknoise Layout-o-Matic. In the past I have used this site as a starting point for most of the templates I create. Unfortunately it no longer seems to be functioning. I feel lost so I've saved each of them here as a starting point. I use this Color Palette Creator to come up with the colors I use.

Clicking on the link under the template will take you to the full size template.

Download zipped file with each of the templates, the corresponding style sheets and images from links included with each of the templates. Instructions for using the template files. The templates and the css validate.

If you want to add a fancy menu using CSS styling - Nifty Navigation Using CSS.. You can view an example of the menu in use Site 4 Template.

The layouts are free for your personal websites. A link back to this site would be appreciated but is not required. If you are using any of them for a commercial layout, a link back to this site is required.

Templates

These are basic templates. There are other styles you will need to add as you go along. Google is your friend. Learn to use it to find style info you might need. There are many css resources on the Resource page of this site. If you have questions, don't hesitate to ask. Investigate both the code and the style sheet. Make changes so you understand how the style sheet and coding relate to each other. Explore different menus using the resources included in the sidebar.

Pat Geary.

The April Daisies Template uses a fluid layout with a masthead, top menu, left navigation menu, content area and footer. Revised August 2010

Download April Daisies Template in zipped format.

Screenshot Right Column Layout 2 Template.

Right Column Layout 2 Template uses a fluid layout with a masthead, top menu, right-side navigation menu, content area and footer.

Download Right Column2 in zipped format.

Screenshot Ocean Blue Full Width Template

Ocean Blue Full Width Layout Template uses a fluid layout with a masthead, top menu, full width content area and footer. Added May 2009

Download Ocean Blue Template in zipped format

3-Column Layout Template uses a fluid layout with a masthead, top menu, right-side and left-side navigation menu, content area and footer.

Download 3-Column Template in zipped format.

Screenshot of Right Column Layout Template.

Right Column Layout Template uses a fluid layout with a masthead, top menu, right navigation menu, content area and footer.

Download Right Column Template in zipped format.

Screenshot of CSS Based Layout Template with Search Box.

Site 3 Template - uses a fluid layout with a masthead, top menu, left-side navigation menu, content area and footer. A search box and photo gallery have been added.

Download Site 3 Template in zipped format.

Fireweed Template

Download BOTH Fireweed templates in zip format

Screenshot of Site4 Our Family Blue Template.

Site 4 - Our Family Blue Template (pictured) uses a fluid layout with a masthead, top menu, left-side navigation menu, content area and footer. The template is also available in shades of rose.

Download Site 4 Template as a zipped file which contains BOTH templates with all corresponding files.