Oxford_Sunset
<!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">
<head>
<title>Oxford Sunset by Dan Abrey</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="An XHTML 1.0/CSS standards-compliant open source template" />
<meta name="author" content="Dan Abrey" />
<style type='text/css'>
/*---------------------------------------
Title: Oxford Sunset main css
Version: 1.0
Author: Dan Abrey
Contact: danabrey@gmail.com
----------------------------------------*/
/*---------------------------------------
GENERAL LAYOUT RULES
----------------------------------------*/
* { margin: 0; padding: 0; } /* sets all margin and padding (browser defaults)
back to zero for ease of use */
body { background: url("Oxford_Sunset-display_images/bg.gif") repeat; }
div#container { width: 85%; margin: 10px auto; text-align: center;
background-color: #fff; border: 1px solid #aaa; }
/* centers layout (text-align: center for IE), defines overall
width and sets background colour of main container div */
div#container * { text-align: left; }
/* restores text-align to left in elements contained in container
div */
div#header { position: relative; width: 100%; height: 150px; float: left;
background: url(Oxford_Sunset-display_images/banner.jpg) no-repeat top left; }
/* defines header background image (1600px x 150px image with
overflow: hidden) */
div#sidebar { width: 18%; padding: 1%;
background: #663333 url("Oxford_Sunset-display_images/sidebar_bg.jpg") no-repeat top left;
float: left; }
div#content { width: 76%; padding: 1% 2%; float: left; }
/* padding+width of #sidebar and padding+width of #content must
add up to 100% */
* html div#content { width: 75%; }
/* hack for IE due to float problem (makes content div 1%
narrower so it doesn't float below the sidebar) */
div#footer { width: 98%; padding: 1%; clear: both; background-color: #ccc; }
div#header div.header_text { position: absolute; bottom: 5px; left: 5px; color: #fff; }
/* position and colour of header text */
/*---------------------------------------
GENERAL STYLING
----------------------------------------*/
p { margin: 10px 0 0 0; line-height: 1.5; }
h1,h2,h3,h4,h5,h6 { margin: 0 0 15px 0; }
html, body, div { font-family: "Lucida Sans", Arial, Verdana, Helvetica, sans-serif;
font-size: 95%; }
blockquote { padding: 2%; background-color: #fff;
border: 1px solid #ccc; text-indent: 20px; }
/*---------------------------------------
DEFAULT LINK STYLES
----------------------------------------*/
a { color: #663333; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
/*---------------------------------------
HEADER STYLES
----------------------------------------*/
div#header div.header_text a { color: #fff; text-decoration: none; }
div#header div.header_text a:hover { border-bottom: 2px solid #fff; }
div#header h1, div#header p { margin: 0px; }
/* overrides h1 and p default margins */
/*---------------------------------------
SIDEBAR STYLES
----------------------------------------*/
#sidebar { color: #fff; }
#sidebar a { color: #fff; }
#sidebar h3 { color: #BEAEA5; text-align: right; border-bottom: 1px solid #BEAEA5; margin: 5px 0; }
#sidebar p { line-height: 1.0; }
ul#navigation , ul#links { list-style-type: none; }
/* set nav and links ul to display no bullets */
ul#navigation li { display: block; width: 96%; border: 1px solid #663333; margin-bottom: 5px;
padding: 2%; background-color: #CFBFC0; }
ul#navigation li a { color: #663333; }
/*---------------------------------------
CONTENT STYLES
----------------------------------------*/
div.item { margin-bottom: 20px; }
div.item h3 { border: 1px solid #ccc; background: #eee; padding: 10px; position: relative; }
/* position:relative fixes random IE bug which means borders aren't displayed */
</style>
<style type="text/css" media="all">
@import "css/main.css";
</style>
</head>
<body lang="en">
<div id="container">
<div id="header">
<div class="header_text">
<h1 class="title"><a href="#">Oxford Sunset v1.0</a></h1>
<p>An XHTML 1.0/CSS standards-compliant open source template</p>
</div>
</div>
<div id="sidebar">
<ul id="navigation">
<li><a href="#">Diary</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h3>Links</h3>
<ul id="links">
<li><a href="http://www.the-smallprint.co.uk">The Smallprint</a></li>
<li><a href="http://www.torchbox.com">Torchbox Ltd</a></li>
<li><a href="http://www.456bereastreet.com">456 Berea Street</a></li>
</ul>
<h3>Other stuff</h3>
<p>This area be used for anything you like.</p>
</div>
<div id="content">
<h2>Oxford Sunset v1.0</h2>
<div class="item">
<h3>About Oxford Sunset</h3>
<p>This is a simple, accessible, standards-compliant XHTML 1.0 Strict-validating template for free open source use, although credit where credit is due would be much appreciated. The template is only one way of creating a two-column layout, and it can be easily modified to your liking.</p>
<p>It works in all tested browsers and scales down to 800x600 resolution with no problems at all.</p>
<p>The header image is a 1600 x 150 image that is contained in the #header div, which has <em>overflow: hidden</em> applied to it. This means that the header image will scale up to a browser width of 1600px.</p>
<p>Please give feedback on this template to <a href="mailto:danabrey@gmail.com">danabrey@gmail.com</a>.</p>
</div>
<div class="item">
<h3><a href="#">Example of styles</a></h3>
<h1>Here's an h1</h1>
<h2>And an h2</h2>
<h4>And maybe an h4 (h3 is the news headings)</h4>
<p>You've already seen some <a href="#">links</a>, but here's another one anyway.</p>
</div>
<div class="item">
<h3><a href="#">This could be a news item..</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec accumsan tempor mauris. Aenean cursus lectus ac quam lacinia iaculis. Aliquam ante magna, mattis in, sollicitudin vitae, blandit vitae, mauris. Proin placerat lobortis diam. Ut tempor augue sed orci sollicitudin ultrices. Maecenas imperdiet. Nunc ornare nibh sed pede. Sed ac elit. Maecenas tortor risus, pretium interdum, dignissim ut, tristique at, enim. Quisque suscipit. Nulla pretium velit sed elit. Etiam sit amet purus. Ut sed libero. Morbi consequat purus non est. Etiam id arcu eget nibh volutpat viverra. Fusce at ipsum. Integer ac nulla non augue commodo vestibulum. </p>
<p>Aenean sagittis tellus eget metus. Sed a lorem non ipsum ultrices facilisis. Ut interdum vestibulum massa. Nunc sodales quam ac pede. Etiam at ante eget lacus sodales fringilla. Vestibulum ac mi. Nunc ullamcorper. Nulla malesuada mauris vitae turpis. Donec mi. Proin condimentum ipsum nec felis. Donec egestas, elit et ultricies rhoncus, elit massa vestibulum nulla, at viverra pede nibh quis ipsum. Nullam malesuada porta lacus. Nullam augue nunc, tincidunt facilisis, consequat vitae, suscipit rutrum, tortor. Maecenas iaculis. In sed lacus. Duis semper tincidunt velit. Quisque euismod, odio venenatis sodales fringilla, quam orci faucibus sapien, sed semper lacus massa et neque. Aenean bibendum tortor luctus enim. Donec ultricies, sem vel tempus iaculis, nunc quam imperdiet odio, non egestas diam turpis congue arcu. Nulla in urna in dui faucibus pulvinar. </p>
<p>Etiam ultrices. Nunc sapien dui, vehicula sollicitudin, laoreet semper, ultricies et, urna. Nulla enim massa, imperdiet a, vulputate non, bibendum eget, eros. Curabitur at lectus at nulla aliquam fermentum. Sed eros nisi, venenatis nec, varius at, commodo vitae, eros. Morbi accumsan, magna vitae fermentum congue, felis metus tristique erat, quis imperdiet eros lectus at dolor. Curabitur dapibus lectus ac est. Ut risus sem, elementum a, blandit ac, tristique sed, lorem. Nam ultrices, mi id dignissim rutrum, libero purus convallis pede, eu rhoncus odio risus eu enim. Aliquam purus. Nam euismod purus non nunc. </p>
<p><a href="#">Read more</a></p>
</div>
</div>
<div id="footer">
<p>Design by Dan Abrey. Feel free to modify and use this template for whatever purpose - initial credit is appreciated.</p>
</div>
</div>
</body>
</html>
Related examples in the same category