hifinews
<!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>HiFi News</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: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-image: url(hifinews-images/shadow_left.jpg);
background-repeat: no-repeat;
}
#container {
font-size: 1.2em;
margin-left: 20px;
}
#header {
height: 155px;
background-image: url(hifinews-images/header_bg.jpg);
background-repeat: repeat-x;
}
#linkbar {
background-image: url(hifinews-images/linkbar_bg.jpg);
background-repeat: repeat-x;
height: 59px;
}
#left {
background-image: url(hifinews-images/content_top_bg.jpg);
background-repeat: repeat-x;
height: 417px;
margin-right: 221px;
padding-left: 30px;
padding-right: 50px;
padding-top: 50px;
}
#sub_left {width: 30.3%;
float: left;}
#sub_right {width: 30.3%;
float: right;}
#sub_content {margin-left: 33.4%;
margin-right: 33.4%}
#left_topBox {
height: 45px;
padding-top: 1px;
margin-bottom: 35px;
color: #FFFFFF;
font-size: 0.9em;
}
#right {
background-image: url(hifinews-images/main_graphics.jpg);
position: absolute;
top: 0;
right: 0;
width: 246px;
padding-top: 284px;
background-repeat: no-repeat;
height: 492px;
}
#footer {
clear: both;
padding: 10px;
text-align: center;
border-top: 1px solid #CCCCCC;
}
/******************** Top Navigation ************************/
#navcontainer ul
{
background-color: #036;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
background-image: url(hifinews-images/linkbar_bg.jpg);
background-repeat: repeat-x;
height: 39px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 21px 20px 0px 20px;
color: #fff;
text-decoration: none;
float: left;
}
#navcontainer ul li a:hover
{
background-image: url(hifinews-images/hover_link_bg.jpg);
background-repeat: repeat-x;
height: 35px;
color: #FFFFFF;
}
/********************* End top navigation ***************************/
p {margin-bottom: 15px;
margin-top: 0px;}
.ingress {margin-bottom: 15px;
margin-top: 10px;}
.sign_up {
font-weight: bold;
color: #66FFCC;
}
h1 {
font-size: 2em;
padding-top: 50px;
padding-left: 50px;
color: #FFFFFF;
font-style: italic;
font-weight: bold;
}
h2 {
font-size: 1em;
padding-left: 50px;
color: #FFFFFF;
font-style: italic;
font-weight: bold;
}
h3 {
font-size: 1.3em;
margin-bottom: 20px;
color: #666666;
font-style: italic;
font-weight: bold;
}
a:link {
color: #6E2B32;
text-decoration: none;
font-weight: bold;
} /* unvisited link */
a:visited {
color: #6E2B32;
text-decoration: none;
font-weight: bold;
} /* visited link */
a:hover {
color: #333333;
text-decoration: none;
font-weight: bold;
} /* mouse over link */
a:active {
color: #006633;
text-decoration: none;
font-weight: bold;
} /* selected link */
.img_left {float: left;
margin-right: 4px;}
/***************************** sidebar navigation ****************************/
.navcontainer {
width: 246px;
background-image: url(hifinews-images/right_navbar_bg.jpg);
height: 250px;
padding-top: 74px;
background-repeat: no-repeat;
}
.navcontainer ul
{
list-style-type: none;
margin-left: 40px;
}
.navcontainer a
{
display: block;
padding: 3px;
width: 160px;
background-color: #FFFFFF;
border-bottom: 1px solid #eee;
color: #000000;
}
.navcontainer a:link, #navlist a:visited
{
text-decoration: none;
}
.navcontainer a:hover
{
background-color: #76333A;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>HiFi News</h1>
<h2>Audio & Video</h2>
</div>
<div id="linkbar">
<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/">Audio</a></li>
<li><a href="http://www.free-css.com/">Video</a></li>
<li><a href="http://www.free-css.com/">FAQ</a></li>
<li><a href="http://www.free-css.com/">Links</a></li>
</ul>
</div>
</div>
<div id="left">
<div id="sub_left">
<h3>About this template</h3>
<p><img src="hifinews-images/demo_image_01.jpg" alt="Microphone" width="80" height="68" class="img_left" />This is a four column fluid layout. Nice if you have a music site with lots of information you ned to present. I kindly ask you to not remove the footer link. PSD file can be found at my site </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. Nulla gravida sagittis neque. Donec dolor. Duis fringilla fermentum ipsum. Vivamus lectus. Donec ultrices convallis pede. Nam et augue sit amet mauris blandit mattis. Vivamus venenatis ligula vel elit.</p>
<h3>New sound</h3>
<p><img src="hifinews-images/demo_image_01.jpg" alt="Microphone" width="80" height="68" class="img_left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. Nulla gravida sagittis neque. Donec dolor. Duis fringilla fermentum ipsum. Vivamus lectus. Donec ultrices convallis pede. Nam et augue sit amet mauris blandit mattis. Vivamus venenatis ligula vel elit.</p>
</div>
<div id="sub_right">
<h3>Amazing screens</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. Nulla gravida sagittis neque. Donec dolor. Duis fringilla fermentum ipsum. Vivamus lectus. .</p>
<h3>perfect speakers</h3>
<p><img src="hifinews-images/demo_image_01.jpg" alt="Microphone" width="80" height="68" class="img_left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. Nulla gravida sagittis neque. Donec dolor. Duis fringilla fermentum ipsum. Vivamus lectus. Donec ultrices convallis pede. Nam et augue sit amet mauris blandit mattis. Vivamus venenatis ligula vel elit.</p>
</div>
<div id="sub_content">
<h3>Pump up the bass</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. </p>
<h3>CD history?</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur massa. Nullam enim arcu, adipiscing id, porta eget, consequat ut, lacus. Aliquam nibh. Etiam tortor ligula, facilisis sed, mattis sit amet, faucibus ut, turpis. In risus ipsum, pharetra eu, placerat id, mollis quis, justo. Mauris sollicitudin tincidunt justo. Sed suscipit tristique nulla. Suspendisse sit amet massa. Nulla gravida sagittis neque. Donec dolor. Duis fringilla fermentum ipsum. Vivamus lectus. Donec ultrices convallis pede. Nam et augue sit amet mauris blandit mattis. Vivamus venenatis ligula vel elit.</p>
</div>
<div id="footer">Created by Dieter Schneider 2006 | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></div>
</div>
<div id="right">
<div class="navcontainer">
<ul class="navlist">
<li><a href="http://www.free-css.com/">New sound</a></li>
<li><a href="http://www.free-css.com/">Perfect image</a></li>
<li><a href="http://www.free-css.com/">Killer bass</a></li>
<li><a href="http://www.free-css.com/">Hip Hop</a></li>
<li><a href="http://www.free-css.com/">Rock</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category