green piece
<!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" >
<head>
<title>GREEN PIECE</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 76% "Trebuchet MS", verdana, arial, sans-serif;
background : #2e2e2e;
color : #333;
}
#container {
width : 740px;
margin-left : auto;
margin-right : auto;
padding : 0;
border : 5px solid #336633;
background : #e9eee4;
color : #333;
}
#topimg {
height : 150px;
padding : 0;
margin : 0;
background : #417c2c url(img/topimg.jpg) no-repeat;
color : #333;
}
#navcontainer ul {
float : left;
width : 100%;
padding-left : 0;
margin : 0 0 20px 0;
font-size : 110%;
border-top : 1px solid #fff;
border-bottom : 1px solid #fff;
background : #417c2c;
color : #333;
}
#navcontainer ul li {
display : inline;
}
#navcontainer ul li a {
float : left;
padding : 0.2em 1em;
text-decoration : none;
border-right : 1px solid #fff;
background : #336633;
color : #fff;
}
#navcontainer ul li a:hover {
background : #91ae00;
color : #000;
}
#content {
margin : 0 0 5px 170px;
padding : 5px;
background : inherit;
color : #333;
}
#content a:link, #content a:visited {
text-decoration : underline;
background : inherit;
color : #4e6811;
}
#content a:hover {
background : inherit;
color : #996681;
}
#sidebar {
float : left;
width : 160px;
margin : 0 10px 0 0;
padding : 5px;
border-right : 1px dashed #999;
background : #e9eee4;
color : #333;
}
.sidemenu ul {
list-style-type : none;
text-align : left;
}
.sidemenu ul li {
display : block;
color : #666;
background : inherit;
}
.sidemenu ul li a {
background : transparent url(img/list-off.gif) no-repeat left center;
padding-left : 15px;
font : normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration : none;
color : #000;
}
.sidemenu ul li a:hover {
background : transparent url(img/list-on.gif) no-repeat left center;
color : #666;
}
.sidemenu ul li a#current {
background : transparent url(img/list-active.gif) no-repeat left center;
color : #666;
}
#bottomimg {
height : 50px;
padding : 0;
margin : 0;
border-top : 1px solid #fff;
background-color : #336633;
color : #333;
}
#bottomimg h1 {
float : left;
margin : 10px 0 0 5px;
font-size : 150%;
color : #fff;
background : #336633;
}
#footer {
clear : both;
padding : 5px;
margin : 0;
font-size : 90%;
border-top : 1px solid #fff;
background : #417c2c;
color : #333;
}
#footer a:link, #footer a:visited {
text-decoration : none;
background-color : inherit;
color : #fff;
}
#footer a:hover {
border-bottom : 1px dashed #eee;
background-color : inherit;
color : #333;
}
p {
margin : 15px;
}
h1 {
margin-top : 10px;
padding : 0;
font-size : 140%;
text-transform : uppercase;
color : #336633;
background-color : inherit;
}
h2 {
margin : 10px 0 0 5px;
padding-left : 10px;
font-size : 120%;
text-transform : uppercase;
letter-spacing : 5px;
color : #fff;
background : #417c2c;
}
.img {
float : left;
padding : 10px;
border : none;
}
.img a {
border : none;
}
</style>
</head>
<body>
<div id="container">
<div id="topimg"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.html" id="current">Item one</a></li>
<li><a href="index.html">Item two</a></li>
<li><a href="index.html">Item three</a></li>
<li><a href="index.html">Item four</a></li>
<li><a href="index.html">Item five</a></li></ul>
</div>
<div style="clear:both;"></div>
<div id="sidebar">
<h2>Menu 1</h2>
<div class="sidemenu">
<ul>
<li><a href="http://www.mitchinson.net">Snapp Happy</a></li>
<li><a href="http://www.openwebdesign.org" title="OpenWebDesign">OWD</a></li>
<li><a href="http://andreasviklund.com">Andreas Viklund</a></li>
<li><a href="http://www.jameskoster.co.uk">James Koster</a> </li>
<li><a href="http://www.oswd.org">OSWD</a></li>
<li><a href="http://www.cssplay.co.uk"> CSS play </a></li>
<li><a href="http://css.maxdesign.com.au/listamatic/" title="CSS menus">Listamatic </a> </li> </ul>
</div>
<h2>Menu 2</h2>
<div class="sidemenu">
<ul>
<li><a href="index.html">Item one</a></li>
<li><a href="index.html">Item two</a></li>
<li><a href="index.html">Item three</a></li>
<li><a href="index.html">Item four</a></li> </ul>
</div>
</div>
<div id="content">
<h1>Welcome</h1>
<p><em>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE6/7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />This is a <a href="#">link</a> to nowhere. The side menu is from <a href="http://css.maxdesign.com.au/listamatic/" title="CSS menus">Listamatic</a>. For more templates visit <a href="http://www.mitchinson.net" title="my website" >my website</a>.</em></p>
<div style="float: right; width: 120px; height: 5em; margin-top: 5px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; font-family: Georgia, arial, helvetica; font-size: 16px; line-height: 1.5em; color: #336633;">
<span style="color:#333;"><img src="img/quote.gif" alt="quote"/>.... this is a </span><span style="color:#336633;">magazine style </span><span style="color: #999;">pullquote .... <img src="img/unquote.gif" alt="unquote"/></span> </div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam facilisis dui a nisi. Phasellus euismod augue quis erat.
</p>
<h1>About</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam facilisis dui a nisi. Phasellus euismod augue quis erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis. Nam facilisis dui a nisi. Phasellus euismod augue quis erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi. Sed interdum. Nam facilisis dui a nisi. Phasellus euismod augue quis erat. Nunc libero libero, lobortis ut, placerat vel, dapibus eu, nisl. Fusce a nisi sed urna aliquet molestie. Aenean pretium, orci vitae lobortis rutrum, magna arcu pulvinar elit, id suscipit nunc tellus in felis.
</p>
</div>
<div id="bottomimg">
<h1>GREEN PIECE</h1>
</div>
<div id="footer">
<a href="index.html"> [ homepage ]</a> | <a href="mailto:denise@mitchinson.net">[ contact ]</a> | <a href="http://validator.w3.org/check?uri=referer">[ xhtml ]</a> | <a href="http://jigsaw.w3.org/css-validator">[ css ]</a> | © 2006 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a></div>
</div>
</body>
</html>
Related examples in the same category