underthebridge
<!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>Under the Bridge</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
* {margin: 0;
padding: 0;}
p {padding-top: 7px;
padding-bottom:7px;}
h1 {
padding-top: 200px;
padding-right: 90px;
text-align: right;
font-size: 1.6em;
font-style: italic;
color: #FFFFFF;
}
h2 {
padding-right: 90px;
text-align: right;
font-size: 1em;
font-style: italic;
color: #EAEEF7;
}
h3 {
padding-top: 7px;
padding-bottom:7px;
font-style: italic;
color: #787C87;
font-size: 1.4em;
}
h4 {
margin-top: 40px;
margin-left: 40px;
margin-bottom: 10px;
}
a:link {color: #666666} /* unvisited link */
a:visited {color: #666666} /* visited link */
a:hover {color: #794353} /* mouse over link */
a:active {color: #666666} /* selected link */
body {
background-color: #6B6D82;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 62.5%;
}
#container {
margin: 0px auto;
width: 797px;
color: #797D88;
font-size: 1.2em;
}
#header-{
background-image: url(underthebridge-images/header.jpg);
height: 249px;
}
#linkbar {
background-image: url(underthebridge-images/linkbar_bg.jpg);
height: 79px;
}
#content {
background-image: url(underthebridge-images/content_tile.jpg);
background-repeat: repeat-y;
padding-left: 80px;
padding-right: 80px;
}
#right_menu {
background-image: url(underthebridge-images/right_menu.jpg);
height: 365px;
width: 277px;
float: right;
margin-right: -80px!important;
margin-right: -40px;
}
#footer {
background-image: url(underthebridge-images/footer.jpg);
height: 63px;
padding-top: 80px;
padding-left: 80px;
padding-right: 80px;
text-align: center;
font-size: .9em;
}
/******************************* menu ****************************************/
#navcontainer ul
{
margin-left: 100px!important;
margin-left: 50px;
color: White;
float: left;
margin-top: 14px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.2em 1em;
color: White;
text-decoration: none;
float: left;
}
#navcontainer ul li a:hover
{
color: #E3E9F1;
}
/********************************' right menu *******************************/
.navcontainer {
width: 200px;
margin-left: 40px;
}
.navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
.navcontainer a
{
display: block;
padding: 3px;
width: 168px;
border-bottom: 1px solid #BFC2C9;
}
.navcontainer a:link, .navlist a:visited
{
color: #666666;
text-decoration: none;
}
.navcontainer a:hover
{
background-color: #8D5764;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Under The Bridge</h1>
<h2>By Dieter Schneider</h2>
</div>
<div id="linkbar">
<div id="navcontainer">
<ul id="navlist">
<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/">Contact</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="right_menu">
<h4>Menu</h4>
<div class="navcontainer">
<ul class="navlist">
<li><a href="http://www.free-css.com/">a link</a></li>
<li><a href="http://www.free-css.com/">one more link</a></li>
<li><a href="http://www.free-css.com/">cool link</a></li>
<li><a href="http://www.free-css.com/">oh yes</a></li>
<li><a href="http://www.free-css.com/">ok enough links</a></li>
</ul>
</div>
</div>
<h3>About this template</h3>
<p>This template is created by Dieter Schneider a cold Desember night 2006. It's valid Xhtml 1.0 Strict! If you want the PSD file for this template you can purchase it at CssTemplateHeaven.com for only 7$, this will give you a lot more flexibility. Please do not remove the copyright in the footer if you have the free version of this template. </p>
<h3>Another Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce suscipit. Proin dignissim. Aenean elementum. Integer purus. Cras nonummy sapien ac eros. Morbi dictum, nisi quis ullamcorper ultricies, lacus elit bibendum arcu, in imperdiet orci purus gravida dolor. Sed lacus. In commodo, purus id iaculis mollis, nulla ipsum euismod justo, eu volutpat velit lacus sit amet quam. Donec bibendum mi et orci. Duis laoreet aliquet nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce massa arcu, mollis id, ornare et, convallis vitae, libero. Nulla commodo augue in odio. Suspendisse potenti.</p>
<h3>Another Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce suscipit. Proin dignissim. Aenean elementum. Integer purus. Cras nonummy sapien ac eros. Morbi dictum, nisi quis ullamcorper ultricies, lacus elit bibendum arcu, in imperdiet orci purus gravida dolor. Sed lacus. In commodo, purus id iaculis mollis, nulla ipsum euismod justo, eu volutpat velit lacus sit amet quam. Donec bibendum mi et orci. Duis laoreet aliquet nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce massa arcu, mollis id, ornare et, convallis vitae, libero. Nulla commodo augue in odio. Suspendisse potenti.</p>
</div>
<div id="footer">
<p>© <a href="http://csstemplateheaven.com">CssTemplateHeaven</a> | Created by Dieter Schneider 2006 | Valid Xhtml 1.0 Strict! </p>
</div>
</div>
</body>
</html>
Related examples in the same category