daleri-structure
<!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" lang="en" xml:lang="en">
<head>
<title>Daleri Structure v1.0</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Original design: Daleri Structure (v1.0 - Jul 07, 2008) - A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/daleri-structure/
*/
/* Body */
* {margin:0; padding:0;}
body {background:#474d59 url(daleri-structure-images/bodybg.gif) top left repeat-x; color:#eee; font:76% Verdana,Arial,Tahoma,"Trebuchet MS",sans-serif; line-height:1.4em; text-align:center; padding:0;}
#wrap {width:960px; background-color:#fff; color:#555; padding:10px; margin:10px auto 0 auto; text-align:left; border:1px solid #555;}
#top {width:960px; text-align:right; margin:10px auto 5px auto; color:#ddd; font-size:0.9em;}
#top p {margin:2px; padding:0;}
#top a {color:#eee; border-bottom: 1px dotted #aaa;}
#top a:hover {color:#fff; text-decoration:none; border-bottom:1px dotted #fff;}
/* Header and title */
#header {text-align:left; padding:0; margin:0 0 10px 0;}
#sitetitle {width:340px; float:left;}
#sitetitle h1 {font-weight: 700; font-size:2.2em; letter-spacing:-2px; line-height:0.9em; margin:20px 0 10px 10px; padding:0;}
#sitetitle h1 a {font-weight:700; letter-spacing:-1px;}
#sitetitle p {margin:5px 0 20px 20px; padding:0; letter-spacing:-1px; font-size:1.4em; color:#777;}
/* Main menu */
#mainmenu {float:right; width:600px; margin:0;}
dl.nav {width:140px; float:left; margin: 0 0px 5px 10px;}
dl.nav dt {border-bottom:1px solid #aaa; padding:0; font-weight:700; margin:0; color:#777;}
dl.nav dt a {font-weight:700; color:#777;}
dl.nav dt a:hover {color:#222;}
dl.nav dd {padding:0; margin:0; border-bottom:1px solid #ccc;}
dl.nav dd a {font-weight:400; padding:1px 0 1px 5px; color:#4d699d; display:block; width:135px;}
dl.nav dd a:hover {color:#222; background:#f4f4f4;}
/* Headline */
#headline {width:958px; text-align:center; margin:5px 0 15px 0; border:1px solid #ccc; background-color:#f0f0f0; color:#777; font-size:0.9em;}
#headline p {margin:2px; padding:0;}
/* Headers */
h2, h3, h4 {margin:0 0 14px; padding-bottom:5px; color:#666; font-weight:700;}
/* Content */
#content {float:left; text-align:left; width:700px; margin:10px 0 0 0;;}
#content h2 {font-size:1.7em; letter-spacing:-1px; clear:left; border-bottom:2px solid #ccc;}
#content h3 {font-size:1.4em; letter-spacing:-1px;}
#content h2 a, #content h3 a {font-weight:700;}
#content p {margin:0 0 15px;}
#content a {border-bottom:1px dotted #888;}
#content a:hover {color: #222; border-bottom:1px dotted #000;}
#content ul, #content ol {margin:0 0 15px 10px; padding:0 0 0 10px;}
#content ul li, #content ol li {margin:0 0 10px 10px;}
#content ul ul, #content ol ol {margin:5px 0 5px 10px;}
/* Sidebar */
#sidebar {text-align:left; margin:5px 0 0 718px; width:220px; padding:10px; background:#f0f0f0; border:1px solid #ccc;}
#sidebar h2, #sidebar h3 {font-size:1.4em; padding:0 0 2px 0; margin:0 0 5px 0; border-bottom:2px solid #ccc;}
#sidebar p, #sidebar ul, #sidebar ol {margin:0 0 15px 0; padding:0;}
#sidebar a {font-weight:400;}
#sidebar ul li {list-style:none; margin:0 0 3px 0;}
#sidebar ul li a {font-size:1.1em;}
#sidebar ul ul {margin:3px 0 3px 10px; font-size:1em;}
#sidebar ul ul li {margin:2px 0;}
#sidebar ul ul li a {font-weight:400;}
#sidebar ul.sidemenu li {list-style: none; width:218px; padding:0; margin:0 0 2px 0;}
#sidebar ul.sidemenu li a {display: block; overflow: visible; padding:2px 0 2px 5px; background-color:#f4f4f4; font-weight:400; border:1px solid #ddd; font-size:1.1em; }
#sidebar ul.sidemenu li a:hover, #sidebar ul li.current a {border:1px solid #555; color:#444; background-color:#fff;}
#sidebar ul.sidemenu li.current li a {background-color:#f8f8f8; color:#467aa7; border:1px solid #ddd; border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul {margin:0; padding:2px 0 0 15px;}
#sidebar ul.sidemenu ul li {width:203px; letter-spacing:0;}
#sidebar ul.sidemenu ul li a {font-size:0.9em; padding:1px 0 1px 5px;}
/* Footer */
#footer {clear:both; font-size:0.9em; width:960px; line-height:1.5em; color:#ccc; margin: 5px auto 10px auto; padding:0;}
#footer p {margin:0; padding:0;}
#footer a {color:#ddd; border-bottom: 1px dotted #aaa;}
#footer a:hover {color:#eee; text-decoration:none; border-bottom:1px dotted #fff;}
/* Links */
a {color:#4d699d; font-weight:400; text-decoration:none;}
a:hover {color:#444; text-decoration:none;}
a img {border:0;}
/* Various classes */
.left {float:left; width:49%; text-align:left;}
.right {float:right; width:49%; text-align:right;}
.textleft {text-align:left;}
.textright {text-align:right;}
.textcenter {text-align:center;}
.introtext, .introtext a {font-weight:700;}
.clear {visibility:hidden; clear:both; height:1px;}
.hide {display:none;}
</style>
</head>
<body>
<div id="top">
<p>Skip to: <a href="#content">content</a> | <a href="#sidebar">sidebar</a></p>
</div>
<div id="wrap">
<div id="header">
<div id="sitetitle">
<h1><a href="http://www.free-css.com/">Daleri Structure v1.0</a></h1>
<p><strong>- A free website template -</strong></p>
</div>
<div id="mainmenu">
<dl class="nav">
<dt><a href="http://www.free-css.com/">Main pages</a></dt>
<dd><a href="http://www.free-css.com/">Blog</a></dd>
<dd><a href="http://www.free-css.com/">Archives</a></dd>
<dd><a href="http://www.free-css.com/">Categories</a></dd>
<dd><a href="http://www.free-css.com/">Tags</a></dd>
</dl>
<dl class="nav">
<dt><a href="http://www.free-css.com/">Blog topics</a></dt>
<dd><a href="http://www.free-css.com/">Web design</a></dd>
<dd><a href="http://www.free-css.com/">Accessibility</a></dd>
<dd><a href="http://www.free-css.com/">CMS solutions</a></dd>
<dd><a href="http://www.free-css.com/">Templates</a></dd>
</dl>
<dl class="nav">
<dt><a href="http://www.free-css.com/">Extras</a></dt>
<dd><a href="http://www.free-css.com/">Music archive</a></dd>
<dd><a href="http://www.free-css.com/">Photo gallery</a></dd>
<dd><a href="http://www.free-css.com/">Poems and lyrics</a></dd>
<dd><a href="http://www.free-css.com/">Digital art</a></dd>
</dl>
<dl class="nav">
<dt><a href="http://www.free-css.com/">Community</a></dt>
<dd><a href="http://www.free-css.com/">Guestbook</a></dd>
<dd><a href="http://www.free-css.com/">Members</a></dd>
<dd><a href="http://www.free-css.com/">Link collection</a></dd>
<dd><a href="http://www.free-css.com/">Sitemap</a></dd>
</dl>
</div>
<hr class="clear" />
</div>
<div id="headline">
<p>Space for advertisements, additional navigation, news headlines or other highlighted content. Easy to remove if not wanted.</p>
</div>
<div id="content">
<h2><a href="http://www.free-css.com/">Introducing: Daleri Structure!</a></h2>
<p class="introtext">This is Daleri Structure, a free XHTML/CSS design in the Daleri website template series by Andreas Viklund. The template was created with categorized content in mind, and it provides site owners with a number of different ways to organize the site structure.</p>
<p>The main navigation is created with definition lists, and the menu can be expanded to contain more links if needed. You can also use the main menu as an overview or a basic sitemap, and expand the site with subpages using the sidebar buttons or regular link lists. On sites with fewer pages, the definition list menu can be removed and replaced with an ad banner (600px wide) or a large logo. You can also place a horizontal text link menu in the the gray space between the header and the content, just to give another example. Feel free to experiment with the spaces to find your own preferred structure.</p>
<div class="left">
<h3>Template copyright and usage rights</h3>
<p>Like all my XHTML/CSS templates, this template is completely free to download, free to use and free to modify in any way you may want to - without any limitations or obligations. I kindly ask you to keep the original design credits and the link to my website in the footer since it is a good way to support my template design work, but it is no requirement.</p>
<p>If you find this template useful and use it for commercial purposes, please consider donating or advertising on my site to encourage the development of more free templates.</p>
</div>
<div class="right textleft">
<p><img src="daleri-structure-images/logo.jpg" width="340" height="182" alt="" /><br />
Professional template customization services are available. Contact me for rates and availability.</p>
</div>
<hr class="clear" />
</div>
<div id="sidebar">
<h2>Your own structure...</h2>
<p>Space for presentation, advertisements or extras - or maybe additional navigation links? You decide!</p>
<h2>Sample button menu</h2>
<ul class="sidemenu">
<li><a href="http://www.free-css.com/">First page</a></li>
<li><a href="http://www.free-css.com/">Second page</a></li>
<li><a href="http://www.free-css.com/">Third page with subpages</a>
<ul>
<li><a href="http://www.free-css.com/">First subpage</a></li>
<li><a href="http://www.free-css.com/">Second subpage</a></li>
</ul>
</li>
<li><a href="http://www.free-css.com/">Fourth page</a></li>
</ul>
<h2>Sample links</h2>
<ul>
<li><a href="http://www.free-css.com/">ileva design</a></li>
<li><a href="http://www.free-css.com/">Free website templates</a></li>
<li><a href="http://www.free-css.com/">WordPress themes</a></li>
<li><a href="http://www.free-css.com/">4Templates</a></li>
<li><a href="http://www.free-css.com/">Your link here?</a></li>
</ul>
</div>
<p class="hide"><a href="#top">Return to top</a></p>
<hr class="clear" />
</div>
<div id="footer">
<div class="left">
<p>© 2008 <a href="http://www.free-css.com/">Your Name</a> | Contact information | Policy<br />
<a href="http://www.free-css.com/">Original design</a> by <a href="http://andreasviklund.com/">Andreas Viklund</a> | Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a></p>
</div>
<div class="right">
<p>Sample footer menu: <a href="http://www.free-css.com/">Link 1</a> | <a href="http://www.free-css.com/">Link 2</a> | <a href="http://www.free-css.com/">Link 3</a></p>
<p class="hide"><a href="#top">Return to top</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category