Indented vertical menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas09: have a bubble-gum</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your description goes here." />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Original design by Andreas Viklund - http://andreasviklund.com" />
<style type="text/css">
/* andreas09 v1.0 (Dec 10th 2005) - An open source template by Andreas Viklund - http://andreasviklund.com. Free to use for any purpose as long as the proper credits are given to the original author. */
body {
background: #8b8b8b;
color: #303030;
font: 76% Verdana, Tahoma, Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
a {
color: #505050;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #808080;
text-decoration: underline;
}
p {
line-height: 1.5em;
margin: 0 0 15px;
}
/*** Main container ***/
#container {
background: #f0f0f0 url(andreas091-img/bodybg.jpg) repeat-x;
color: #303030;
margin: 0;
min-width: 770px;
padding: 0;
text-align: left;
width: 100%;
}
/*** Header section ***/
#sitename {
color: #ffffff;
height: 92px;
margin: 0 20px 10px;
text-align: left;
}
#sitename h1,#sitename h2 {
font-weight: 400;
letter-spacing: -2px;
margin: 0;
padding: 0;
}
#sitename h1 {
font-size: 2.4em;
padding-top: 20px;
}
#sitename h2 {
font-size: 1.6em;
}
/*** Horizontal menu ***/
#mainmenu {
float: left;
margin-bottom: 25px;
}
#mainmenu ul {
font-size: 16px;
margin: 0;
padding: 0;
}
#mainmenu li {
float: left;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#mainmenu a {
border-right: 1px solid #b0b0b0;
color: #606060;
display: block;
font-size: 0.7em;
padding: 11px 10px 10px;
text-transform: uppercase;
}
#mainmenu a:hover {
background: #f0f0f0 url(andreas091-img/menuhover.jpg) top left repeat-x;
color: #505050;
text-decoration: none;
}
#mainmenu a.current {
background: #f0f0f0 url(andreas091-img/menuhover.jpg) top left repeat-x;
color: #505050;
text-decoration: none;
}
/*** Content wrap ***/
#wrap {
clear: both;
font-size: 0.9em;
padding: 0;
}
/*** Sidebars ***/
#leftside,#rightside {
margin: 0;
padding: 0 10px 10px;
width: 165px;
}
#leftside {
float: left;
margin-right: 10px;
}
#rightside {
float: right;
margin-left: 10px;
}
#leftside h1,#rightside h1 {
color: #505050;
font-size: 1.6em;
font-weight: bold;
letter-spacing: -1px;
margin: 0 0 12px;
}
#leftside h2,#rightside h2 {
font-size: 1.1em;
margin: 0 0 20px;
}
#leftside p,#rightside p {
font-size: 0.9em;
line-height: 1.4em;
margin: 0 0 16px 10px;
}
.linklist {
list-style: none;
margin: 0 0 16px 10px;
padding: 0;
}
.linklist li {
margin-bottom: 0.7em;
}
/*** Sidebar menu ***/
.nav {
background: #e8e9ea;
border: 1px solid #b0b0b0;
color: #606060;
display: block;
margin-top: 8px;
padding: 5px 4px 4px 10px;
position: relative;
text-transform: uppercase;
width: 140px;
}
.nav:hover,.active {
background: #f8f9fa;
border: 1px solid #909090;
color: #303030;
text-decoration: none;
}
.sub {
font-size: 0.8em;
letter-spacing: 1px;
margin: 3px 0 2px 10px;
padding: 4px 2px 2px 8px;
width: 125px;
}
/*** Content ***/
#content,#contentalt {
background-color: #fafcff;
border: 1px solid #909090;
color: #2a2a2a;
padding: 15px 20px 5px;
}
#content {
margin: 0 200px;
}
#contentalt {
margin: 0 200px 0 20px;
}
#content h1,#content h2,#contentalt h1,#contentalt h2 {
background-color: inherit;
color: #606060;
font-size: 1.8em;
font-weight: bold;
letter-spacing: -1px;
margin: 0 0 15px;
padding: 0;
}
#content h2,#contentalt h2 {
font-size: 1.6em;
margin-bottom: 10px;
}
#content img,#contentalt img {
border: 1px solid #b0b0b0;
float: left;
margin: 5px 15px 6px;
padding: 5px;
}
/*** Footer ***/
#footer {
background: #8b8b8b url(andreas091-img/footerbg.jpg) top left repeat-x;
clear: both;
color: #d0d0d0;
font-size: 0.9em;
font-weight: bold;
margin: 0;
padding: 20px 0;
text-align: center;
width: 100%;
}
#footer a {
color: #d0d0d0;
font-weight: bold;
}
/*** Various classes ***/
.thumbnail {
background: #fafbfc;
border: 1px solid #b0b0b0;
margin: 0 0 10px 10px;
padding: 5px;
}
.searchform {
margin: 0;
}
.searchbox {
background: #f0f0f0;
border: 1px solid #b0b0b0;
margin: 0 4px 0 0;
width: 100px;
}
.searchbutton {
background: #f0f0f0;
border: 1px solid #b0b0b0;
}
.clearingdiv {
clear: both;
height: 30px;
width: 1px;
}
.hide {
display: none;
}
/*** Text format ***/
.intro {
font-size: 1.1em;
font-weight: bold;
letter-spacing: -1px;
}
.small {
font-size: 0.8em;
}
.large {
font-size: 1.4em;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
/*** End of file ***/
</style>
</head>
<body>
<div id="container">
<div id="sitename">
<h1>andreas09 / have a bubble-gum</h1>
<h2>An Open Source Web Design Template</h2>
</div>
<div id="mainmenu">
<ul>
<li><a class="current" href="index.html">Blue</a></li>
<li><a href="green.html">Green</a></li>
<li><a href="orange.html">Orange</a></li>
<li><a href="purple.html">Purple</a></li>
<li><a href="red.html">Red</a></li>
<li><a href="black.html">Black</a></li>
</ul>
</div>
<div id="wrap">
<div id="rightside">
<h1>Included layouts</h1>
<p>
<a class="nav" href="index.html">3 columns</a><span class="hide"> | </span>
<a class="nav active" href="2col.html">2 columns</a><span class="hide"> | </span>
<a class="nav" href="no-img.html">No images</a><span class="hide"> | </span>
<a class="nav" href="#">Example menu</a><span class="hide"> | </span>
<a class="nav sub" href="#">Sub-page 1</a><span class="hide"> | </span>
<a class="nav sub" href="#">Active sub-page</a><span class="hide"> | </span>
<a class="nav sub" href="#">Sub-page 2</a>
</p>
<h1>Included colors</h1>
<img src="img/colors.jpg" height="104" width="125" class="thumbnail" alt="Included colors" />
<h1>Search</h1>
<p class="searchform">
<input type="text" alt="Search" class="searchbox" />
<input type="submit" value="Go!" class="searchbutton" />
</p>
<h1>Latest news</h1>
<p><strong>Dec 11: </strong>
andreas09 is built with valid XHTML 1.1 and CSS2. It is simple and easy to work with, and it comes in several different flavors. This is version 1.0 (Dec 11th 2005).</p>
<p><strong>Dec 10: </strong>
Place for news or important messages, maybe?</p>
<h1>Links:</h1>
<ul class="linklist">
<li><a href="http://andreasviklund.com">My website</a></li>
<li><a href="http://andreasviklund.com/templates">Free website templates</a></li>
<li><a href="http://openwebdesign.org">OpenWebDesign.org</a></li>
<li><a href="http://oswd.org">OSWD.org</a></li>
</ul>
</div>
<div id="contentalt" >
<h1>Just like a bowl of candy...</h1>
<img src="img/thumb1.jpg" height="130" width="130" alt="Thumbnail example" />
<p class="intro">Blue is one of the most common main colors in webdesign. It is so common that it is considered very non-trendy today. But it is still a soft and nice color that does no harm - and also my favorite color. So andreas09, which is the last design in the andreasXX series in a while, is aqua blue by default. But there is a twist:</p>
<p>If you don't like the blue colors you can easily change to another color using any of the attached alternative background image pairs: green, orange, purple, red or black! The alternative images are located in a separate folder, and changing color is done by replacing the bodybg.jpg and menuhover.jpg colors in the "img" folder with any pair of images from the "alt-img" folder. Pick a color, move the files and make sure that they have the same filename as the original files - and you're done! As a little bonus, I have also included an alternative layout with 2 columns.</p>
<h2>Open source design</h2>
<p>This template is released as an open source web design template, which means that you are free to use it in any way you may want to without any limitations or obligations. However, I kindly ask you to leave the small credit link in the footer (the line that says "Design by Andreas Viklund"). If you remove that line and then use the template for commercial purposes, please consider making a symbolic donation through my <a href="http://andreasviklund.com">website</a> to support my work!</p>
<p>If you want more templates to choose from, I have more <a href="http://andreasviklund.com/templates">free website templates</a> on my website. You can also find my templates (and thousands of free templates by other designers) on <a href="http://openwebdesign.org">OpenWebDesign.org</a> and <a href="http://oswd.org">OSWD.org</a>.</p>
<h2>And finally, some tech details</h2>
<p>Like my other templates, the code is 100% valid XHTML 1.1 and CSS2. The template is compliant with Section 508 and the WCAG double-A rating. Don't settle for less!</p>
</div>
<div class="clearingdiv"> </div>
</div>
</div>
<div id="footer">© 2005 Your Name | Design by <a href="http://andreasviklund.com">Andreas Viklund</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a></div>
</body>
</html>
Related examples in the same category