my space pages space myspace background free myspace templates my free templates

Free Web Templates

These Free Web Templates Will Help You Build an XHTML+CSS website

By Jennifer Kyrnin, About.com

See More About:

blogging, blogger,blogspot,make money from blog

* css

* free web templates

* web page layouts

Use these free Web templates to create valid XHTML documents using CSS instead of tables. If you don't want to learn to write CSS layouts, you can still create valid XHTML using free Web templates. The newest are listed first.

blogging, blogger,blogspot,make money from blog

* 3-Column Centered Flexible Width Layout Template

XHTML 1.0 Strict Doctype; SEO Ready

Centering your three column layout makes it fill the browser viewport nicely. And this template uses a flexible width so that it fits different resolutions correctly.

* Centered Single Column Layout

XHTML 1.0 Strict Doctype; SEO Ready

This is a very basic layout, with the content centered on the page in an 80% wide column. Usually the page itself is a different background color, with the content surrounded by a border. For this template, I chose to make the main page color grey with a black border.

* 2-Column Centered Flexible Width Layout Template

blogging, blogger,blogspot,make money from blog

XHTML 1.0 Strict Doctype; SEO Ready

A very common layout you find on the Web is a 2-column centered layout that flexes to match the current window width. This layout validates as XHTML 1.0 Strict, uses h1 and h2 tags for headlines and the main content area comes first on the page.

* Fifty-Fifty Website Template

This is a two column layout with an optional footer. It is built as a flexible width template with two columns, one with a colored background and one not. It is built so that browsers that support the max-width property will not expand the page too wide to read.

* Portrait Photo Gallery Website Template

This is a photo gallery meant to show portrait photos one per page with a short description to the side.

* Fancy Photo Gallery Layout

This free Web template is a fancier version of a photo gallery. It uses JavaScript to display captions and the images themselves as well as pure CSS for the site layout.

* Simple Portfolio Layout

This Web portfolio layout allows you to categorize your portfolio pieces and showcase each one on a separate page.

* Calendar Layout

Create an online calendar, month by month.

* Overlapping Sections in a Two Column Layout

A two column layout where the columns overlap the headline.

* A Polaroid or Instant Photo with CSS

Put your images up as a polaroid.

* Two Columns with Header and Footer

Adding a header and footer to a two column layout is fairly easy.

* Photo Gallery Layout - One Photo per Page

A photo gallery layout with larger thumbnails that places one picture per page.

* Two Column Stretches to Fit Layout

This is really a four column layout that stretches the three columns on the right to either stack or fit depending upon the browser width.

* Two Column Faux Column Layout

A two column layout with faux columns that stretch the height of the page, no matter how tall the content is in either column.

* Multiple Boxes Layout

Learn how to set up a layout with multiple boxes for images and text. This layout looks like it was done with tables, but it's 100% CSS using float and width elements. This layout also demonstrates the use of multiple classes on one element.

* 3-Column with Header and Footer Layout

Once you have a 3 column layout, you will probably want to put a header and footer on it. This template makes it easy.

* Better 3 Column Layout

There are many ways to do a 3-column layout using CSS and XHTML, but this one is one of the better ways to get 3 columns on your Web page without a lot of headache or trouble. And this 3-column template works in both IE and Mozilla (Netscape) browsers.

* 3 Column Layout with Footer

Once you have 3 columns on your Web page, getting the footer to display below all three columns can also be a pain. Luckily, with just a slight modification to the better 3 column layout, you can add a footer with ease.

* Fake Frames Layout

While I don't recommend using this to replace frames, this is a good template for learning how the overflow property works.

* Three Column Top Layer Layout

The three column layout is very difficult to do in CSS, but it is possible. And this variation adds a top layer.

* Top Square Navigation Layout

I got the idea for this simple layout from a forum I was reading, where the writer wanted the text in the layout to wrap around the navigation box. I just thought it might look nice.

* Wrap Text Around an Image Layout

An interesting effect in print is the ability to wrap text around an image so that it follows the contours of the image. With this CSS trick, you can mimic this effect on your website.

* Brown Crossbar Layout

This website layout was suggested to me by Marcia, the Bipolar Disorder Guide at About - it uses three divs to create a cross in the upper left of the page with the main content held below it.

* Photo Gallery Layout

This layout provides a simple way to layout a thumbnail photo gallery. It includes JavaScript to create the secondary pages.

* Form Layout

This layout shows you one way to display a form using valid XHTML and no tables.

* Left Navigation Top Header with Photo and Colors

This layout takes it's look and feel from a photo of an iris from my garden. The layout can be used for a photo page, or an ecommerce site product detail page, or just with a decorative photo as my example displays.

* Floating Navigation Box

When you don't have a lot of navigation links, sometimes all you need is a box at the top of your pages with the navigation in there. This box floats to the right or left and the text in the main area flows around it.

* Top and Bottom Rows

Sometimes all you want is branding at the top and contact/copyright information at the bottom.

* Two Column with Top Branding Layer

This layout adds to the basic two column layout by adding a top row for branding and global navigation information.