This is the html. The images and css files reside in the same folder.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="_your description goes here_" />
<meta name="keywords" content="_your,keywords,goes,here_" />
<meta name="author" content="_your name goes here_ / Original design: Andreas Viklund - http://andreasviklund.com/" />
<link rel="stylesheet" type="text/css" href="print.css" media="screen" title="andreas01 (print)" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<title>andreas01</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>andreas01</h1>
<p><strong>"I can see you fly. You are an angel with wings, high above the ground!"</strong><br />(traditional haiku poem)<br /></p>
</div>
<img id="frontphoto" src="front.jpg" width="760" height="175" alt="" />
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Welcome!</a></li>
<li><a href="#">Litterature</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Oil paintings</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
<div class="announce">
<h3>Latest news:</h3>
<p><strong>June 23, 2005:</strong><br />
New design and layout finished and uploaded to OSWD. Since it is my first contribution to this site, it has been given the title "andreas01".<br/>
<a class="right" href="index.html">Read more...</a></p></div>
</div>
<div id="extras">
<h3>More info:</h3>
<p>This is the third column, which can be used in many different ways. For example, it can be used for comments, site news, external links, advertisements or for additional navigation links - or you can make up your own way to use it. It is all up to you. Here are a couple of relevant links:</p>
- <a href="http://andreasviklund.com/">My website</a><br />
- <a href="http://oswd.org/">OSWD.org</a><br />
- <a href="http://validator.w3.org/check/referer">Valid XHTML</a><br />
- <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a><br />
</div>
<div id="content">
<h2>Welcome to andreas01!</h2>
<p>This is a very simple (but also very useful) standard web layout: a fixed-width 3-column page with header and footer. There are thousands of variations of this layout, and this is no perfect solution. But it should be a great starting layout that you can customize in many ways and easily give a unique touch to. The layout is made of valid XHTML 1.0 Strict and CSS only, and it has no tables. If you remove all CSS, the page still works great in text mode (I've tested it on my old mobile phone, and it works like a charm).</p>
<p><img src="test.jpg" height="100" width="125" class="left" alt="" />The layout features one big image (front.jpg) which you can easily replace with your own header. The default image shows a snowy street in Porjus (northern Sweden), where I come from. The haiku can easily be replaced with an ad banner. There are also CSS classes for aligning text paragraphs and images.</p>
<p>This layout also has a print stylesheet, that you can customize in any way you want to. Per default, navigation menus and images are removed, and only the main content text is printed. <a href="index2.html">Look here</a> for an example of how the print layout looks, or print this page to see it in reality.</p>
<h3>The menubar</h3><p>The main navigation menu is an unsorted list, where each list item has been styled to be a button. There are lots of ways to style lists for navigation, but I've kept things simple for this layout. Adding "that little extra" is up to you! <img src="test.jpg" class="right" height="100" width="125" alt="" /></p>
<p>If you like this layout and would like to use it in any way, you are free to do so. This is an <a href="http://oswd.org">open source web design</a>, and all I ask for is that you leave the "Design by Andreas Viklund" link in the footer of the site. If you would like to remove that line, or if you would like professional help with anything related to this layout (such as custom design, branding, scripting or programming), please contact me <a href="http://oswd.org/email.phtml?user=Andreas">through OSWD.org</a> or through my website for more information.</p>
<p>Good luck with your new website!</p>
<p>Return to the <a href="index.html">screen</a> CSS version.</p>
</div>
<div id="footer">Copyright © 2005 (_your name_). Design by <a href="http://andreasviklund.com">Andreas Viklund</a>.</div>
</div>
</body>
</html>