gardening-bug
<!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>The Gardening Bug</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
* { padding: 0; margin: 0; }
body {
font: normal 73% 'Century Gothic', Arial, Helvetica, sans-serif;
line-height: 1.8em;
color: #000;
background: #002C0F;
}
#wrapper {
width: 922px;
margin: 0 auto;
border: 5px solid #fff;
}
#faux {
width: 100%;
margin-bottom: 0;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
background: url(gardening-bug-images/2faux_bg.gif);
}
#header {
width: 902px;
height: 150px;
margin: 0;
padding-right: 20px;
color: #000;
background: #fff url(gardening-bug-images/header.jpg) no-repeat;
}
#header p{
font: bold 200% Helvetica, 'Century Gothic', Arial, sans-serif;
letter-spacing: 3px;
padding: 15px;
color: #fff;
}
#navigation {
width:auto;
padding: 0;
margin: 0;
color: #333;
background: #E2F2EC;
}
/* ^^^^^^^^ MENU ^^^^^^^^^^ */
ul#menu{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("gardening-bug-images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
ul#menu li{display:block;float:left;margin:0;padding:0;}
ul#menu li a{display:block;float:left;color:#880402;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("gardening-bug-images/bgDIVIDER.gif") no-repeat top right;}
ul#menu li a:hover{background:transparent url("gardening-bug-images/bgHOVER.gif") no-repeat top right;}
ul#menu li a.current,ul#menu li a.current:hover{color:#fff;background:transparent url("gardening-bug-images/bgON.gif") no-repeat top right;}
/* ^^^^^^^^ END MENU ^^^^^^^^^^ */
#intro {
width: 902px;
height: 200px;
margin: 0;
padding: 10px;
color: #333;
background: #B6DACB;
}
.intro {
padding:20px;
font-size:200%;
letter-spacing: 2px;
color: #002C0F;
background: transparent;
}
#leftcolumn {
display: inline;
margin: 10px;
padding: 0;
width: 205px;
float: left;
color: #333;
}
#leftmiddle {
float: left;
margin: 10px 13px;
padding: 0;
width: 209px;
display: inline;
position: relative;
color: #333;
}
#rightmiddle {
display: inline;
position: relative;
margin: 10px;
padding: 0;
width: 205px;
float: left;
color: #333;
}
#rightcolumn {
display: inline;
position: relative;
margin: 10px 10px 10px 17px;
padding: 0;
width: 205px;
float: left;
color: #333;
}
#navcontainer {
padding-bottom: 20px;
}
#navlist {
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#navlist li a {
text-decoration: none;
}
#footer {
clear: both;
width: 902px;
margin: 0;
padding: 10px;
border-top: 4px solid #336666;
font-size: 90%;
color: #666;
background: #B6DACB;
}
.clear {
clear: both;
background: none;
}
h1 {
padding:30px;
font-size:125%;
letter-spacing: 2px;
text-transform: uppercase;
color: #366;
background: transparent url(gardening-bug-images/bug_sm.png) right no-repeat;
}
.imgleft {
float: left;
padding: 10px;
}
a:link, a:visited {
text-decoration : none;
color : #880402;
background:inherit;
}
a:hover {
text-decoration : none;
color :#00515C;
background:inherit;
}
a:active {
text-decoration : none;
color : #F5DE1E;
background:inherit;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<p>Gardening Bug Template</p>
</div>
<div id="navigation">
<ul id="menu">
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ABOUT</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
<div id="intro">
<div class="intro">THE GARDENING BUG</div>
<blockquote>
<p><img class="imgleft" src="gardening-bug-images/bug.png" alt="" /> This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Strict using valid CSS level 2.1. It has been released under a <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 License</a> which basically means you are free to modify it in any way to suit your needs but you must include the link 'Design by www.mitchinson.net' in the footer of the template.</p>
</blockquote>
<p>* Template based on Keith Donegan's Faux Column CSS Layouts at code-sucks.com</p>
<p> </p>
<p>For more FREE CSS templates visit my website.</p>
</div>
<div id="faux">
<div id="leftcolumn">
<h1>Annuals</h1>
<p><img class="imgleft" src="gardening-bug-images/annual.jpg" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent accumsan, diam a hendrerit ultrices, nibh libero vulputate nulla, dictum porttitor dui lorem nec nunc. Donec eget odio sed nunc pretium interdum. Vivamus tristique. </p>
</div>
<div id="leftmiddle">
<h1>Perennials</h1>
<p><img class="imgleft" src="gardening-bug-images/perennial.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent accumsan, diam a hendrerit ultrices, nibh libero vulputate nulla, dictum porttitor dui lorem nec nunc. Donec eget odio sed nunc pretium interdum. Vivamus tristique. </p>
</div>
<div id="rightmiddle">
<h1>Wildlife</h1>
<p><img class="imgleft" src="gardening-bug-images/robin.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent accumsan, diam a hendrerit ultrices, nibh libero vulputate nulla, dictum porttitor dui lorem nec nunc. Donec eget odio sed nunc pretium interdum. Vivamus tristique. </p>
</div>
<div id="rightcolumn">
<h1>Garden Links</h1>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Item one</a></li>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
<h1>Garden Tips</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent accumsan, diam a hendrerit ultrices, nibh libero vulputate nulla, dictum porttitor dui lorem nec nunc. Donec eget odio sed nunc pretium interdum. Vivamus tristique. </p>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<p><a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> | © 2008 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a href="http://creativecommons.org/licenses/by/3.0/" rel="license">Creative Commons Attribution 3.0 License</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category