ourhouse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Our House</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
* {margin: 0; padding: 0;}
body {margin: 0 0 20px 0; font: 90% Verdana, sans-serif; color: #e8e8e8; background-color: #6a816f;}
a, a:visited { text-decoration: underline; color: #44ccdd; }
a:hover, a:active { text-decoration: none; color: #63C91E; }
#container {width: 760px; margin: 0 auto; background: #e8e8e8 url(ourhouse-images/bg.png) repeat-y; color: #333;}
#header {width: 760px; height:170px; background: transparent url(ourhouse-images/header.png) no-repeat; margin: 0 auto;}
#header h1 {width: 285px; height: 170px; background: url(ourhouse-images/callout.gif) no-repeat; position: absolute; top: 15px; left: auto; margin-left: 10px; font-size: 1.80em; color: #333; padding: 55px 0 0 0; text-align: center;}
#header span { position: absolute; top: 110px; left: auto; text-align: center; width: 285px; }
#main { float:left; padding: 20px 10px; width: 530px; font-size: 0.95em; }
#main h1 { font-size: 1.4em; color: #63C91E; padding-bottom: 10px; }
#main h2 { font-size: 1.1em; color: #63C91E; padding-bottom: 10px; }
#main p {padding-bottom: 10px;}
blockquote { margin: 10px 10px; padding: 10px; background: #C7DEB6; color: #333; border-right: 2px solid #63C91E; border-left: 2px solid #63C91E; font-size: 0.85em; }
#right {float:left; padding: 20px 10px; width: 180px; font-size: 0.85em;}
#right h2 { font-size: 1.2em; color: #63C91E; padding-bottom: 10px; }
#nav {width : 180px; margin : 0 0 10px 0;}
ul#menu {margin-left : 0; padding-left : 0; list-style-type : none;}
#menu a {display : block; padding : 3px; width : 169px; margin-bottom : 1px; background : #63C91E; color : #e8e8e8; border-left: 4px solid #44ccdd; font-weight: normal !important;}
#menu a:link, #menu a:visited {color : #e8e8e8; background : #63C91E; text-decoration : none; }
#menu a:hover, #menu a:active { background : #44ccdd; color : #333; border-left: 4px solid #63C91E;}
#current { background : #C7DEB6 !important; color : #333 !important; border-left: 4px solid #63C91E !important;}
#footer { clear:both; width: 760px; height: 60px; font-size: 0.75em; margin: 0 auto; background: transparent url(ourhouse-images/footer.png) no-repeat; text-align: center; }
#footer p { padding: 10px; }
img {float: left; margin: 5px; padding: 2px; border: 1px solid #C7DEB6;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Our House...</h1>
<span>is a very, very, very fine house</span> </div>
<div id="main">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. <a href="http://www.free-css.com/">Integer volutpat tellus</a> consequat quam auctor congue.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. Integer volutpat tellus consequat quam auctor congue.</p>
</blockquote>
<h2>Photos</h2>
<p><img src="ourhouse-images/lroom.png" alt="Living Room" /><img src="ourhouse-images/lroom.png" alt="Living Room" /></p>
</div>
<div id="right">
<h2>Navigation</h2>
<div id="nav">
<ul id="menu">
<li><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">Link two</a></li>
<li><a href="http://www.free-css.com/">Link three</a></li>
<li><a href="http://www.free-css.com/">Link four</a></li>
<li><a href="http://www.free-css.com/">Link five</a></li>
</ul>
</div>
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec placerat semper dolor. Vivamus rutrum arcu vel turpis. Donec elit. Integer volutpat tellus consequat quam auctor congue. <a href="http://www.free-css.com/">Read More »</a></p>
</div>
<div id="footer">
<p>Copyright©2007 You XHTML template by <a href="http://karenblundell.com">Karen Blundell</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category