Details
Idea I got the idea for this template after finishing up my site. The design is tableless and the fonts are defined relatively, so the template handles different font sizes without any trouble. If you're interested in a different colour combination, check out the themes section. A clean version of the template is available here, and for the print view, clicky.
Rendering
The template is valid CSS / XHTML 1.0 Strict and renders consistenly in Firefox 1.0, Netscape 7.02, Opera 7.54 and Internet Explorer 6.0. I designed it at 1280x1024
for normal font size, but it looks fine
down to 800x600. If you want to use it at 640x480, edit the width attributes of the container element classes.
Themes
colours Since CSS rocks, making new colour themes for the template was pretty easy. When you use the template, just change which style sheet is linked to the page and use the images defined for it.
Use
This template is available for whatever you want. I'd appreciate if you kept the "design by" link in the bottom footer, but that's about it. Hope you enjoy.
Coding Tips
images
This template supports images in several ways. To have an image that the text flows around, give the <img> tag the class .imgRight or .imgLeft, depending on how you want the image to align.
If you want a centered image with no text on either side, put the <img> tag by itself in a <p> block, and give
the paragraph the attribute align="center".
sections
Headings are defined with <h1> tags. A sub heading is taken care of with the <span> tag using the .subHeading class. As for the
content, use <p> blocks.
Quote block anyone?
The quote block above can be included inside a <p> block because it is defined using a <span> tag. To add the up arrow, copy & paste one of the <span class="upArrow"> blocks.