AA: Division based xhtml and css Template

7 Feb 2007 > 4 Comments

How to use this template

Live Template preview

To get the code, copy the source from the live preview or visit ocgfx and copy and paste it from there.

1. Create a new folder, and open up a text editor (Notepad), and copy (Ctrl+C) and paste (Ctrl+V) the template code. then save (Inside the new folder) the document as a .html file

2. To view the template open up your browser and go to File > Open (Open File in Fire Fox)

3. To create an external stylesheet copy and paste all the css contained in the <style> tags. Create another document and save (Inside the new folder), as style.css

Note: You do not need to use style tags in the external stylesheet.

Adding content to the template

All tags (elements), must be closed…

<p></p>
<blockquote></blockquote>
<div></div>

…or self closed

<br />
<hr />
<img src="" alt="" />

Text

1. All text should be contained in <p> (paragraph) tags.

<p>Example of a paragraph</p>

2. Quotes should be enclosed in both Blockquote and Paragraph tags

<blockquote><p>Example of a quote</p></blockquote>

Images

1. Image tags should contain the alt attribute, to give an alternative text description if the image fails to load.

<img src="http://img.jpg" alt="my image" />

2. Images should be enclosed in <div> tags.

<div><img src="http://img.jpg" alt="my image"/></div>

3. You can also add some caption text to the image, enclosed in

tags.

<div><img src="http://img.jpg" alt="my image" /><p>caption</p></div>

4. To align the image on the left of the page add:

<div><img class="imgfl" src="http://img.jpg" alt="my image" /><p>caption</p></div>

5. To align the image on the right of the page add:

<div><img class="imgfr" src="http://img.jpg" alt="my image" /><p>caption</p></div>

Navigation and side bar links

These links are treated as list items (<li>) inside ordered lists (<ol>). To add more links, add another list item to the list:

<ol>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Another Link</li>
</ol>

If you are having any further difficulties, or want to modify the template, let me know

You can also learn how to create a template from scratch

Creating a <div> based Template using CSS (part 1 - 12)

Related Posts

• Creating a <div> based Template using CSS (part 1 - 12)
• Styling Horizontal Rules
• Sheepdip Wordpress Theme
• My First Re-Entry
• Styling Tables