thepiano
<!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 Piano</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider 2006 www.csstemplateheaven.com */
* {margin: 0;
padding: 0;
}
/*********************************** Site Structure ******************************/
body {
font-size: 62.5%;
background-color: #000000;
font-family: Georgia, "Times New Roman", Times, serif;
}
#container {margin: 10px auto;
width: 729px;
font-size: 1.2em;}
#header-{
background-image: url(thepiano-images/header_bg.jpg);
height: 186px;
width: 670px;
padding-top: 214px;
padding-left: 59px;
}
#content_top {
background-image: url(thepiano-images/content_top.jpg);
height: 120px;
width: 529px;
text-align: center;
padding-top: 25px;
padding-left: 100px;
padding-right: 100px;
}
#content {
background-image: url(thepiano-images/content_tile.jpg);
background-repeat: repeat-y;
padding-left: 60px;
padding-right: 60px;
}
#footer {
background-image: url(thepiano-images/footer.jpg);
background-repeat: no-repeat;
height: 211px;
text-align: center;
}
/********************************** Text formatting *****************/
p {
padding-bottom: 25px;
}
p.text:first-letter
{
font-size: 2.5em;
padding: 0.143em;
float: left;
}
.footertxt {
padding-top: 180px;
color: #F1DBC6;
}
h2 {
font-weight: bold;
padding: 10px;
color: #673711;
font-size: 1.2em;
}
/*************************** Hyperlinks ***********************/
a:link {color: #F1DBC6} /* unvisited link */
a:visited {color: #F1DBC6} /* visited link */
a:hover {color: #FFCC66} /* mouse over link */
a:active {color: #FFFFFF} /* selected link */
/*************************** Navigation **********************/
#navlist
{
width: 210px;
text-align: center;
}
#navlist li
{
list-style: none;
padding-bottom: 18px;
font-weight: bold;
}
#navlist li a { text-decoration: none; }
/************************************ Image Headings ******************************/
#heading_piano {
background-image: url(thepiano-images/heading_the_piano.png);
height: 40px;
background-repeat: no-repeat;
background-position: center;
}
#heading_about {
background-image: url(thepiano-images/heading_about.png);
height: 40px;
background-repeat: no-repeat;
background-position: center;
}
#heading_ipsum {
background-image: url(thepiano-images/heading_headings.png);
height: 40px;
background-repeat: no-repeat;
background-position: center;
}
.invisible_headings {
margin-left: -3000px; /* This is used to remove the original heading*/
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
<li><a href="http://www.free-css.com/">forums</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Contact me</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
</div>
<div id="content_top">
<h1 id="heading_piano"><span class="invisible_headings">The Piano</span></h1>
<h2>Music is the divine way to tell beautiful, poetic things to the heart.</h2>
</div>
<div id="content">
<h3 id="heading_about"><span class="invisible_headings">About this template</span></h3>
<p class="text">This template should be great for music blogs or something like that. It's a simple one column layout. It's quite a heavy weight on the graphics, so if you want a under 10k graphics template this is not the template for you. It works perfect in the latest versions of IE, FF and Opera. I kindly ask you to not remove the footer link if you have the free version. For more please visit my site</p>
<h3 id="heading_ipsum"><span class="invisible_headings">Lorem Ipsum</span></h3>
<p>Finaly IE supports transparent PNG's. This makes it very easy to make cool headings with custom fonts. You can still have text headings for clean text browsers, just push them out of the way with a span class. It's very simple (try edit the headings in the stylesheet to see how it works.) Remember when you make your own headings that you have to save them as PNG 24, and that they will not work with older versions of IE</p>
</div>
<div id="footer">
<p class="footertxt">Created by Dieter Schneider 2006 | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category