rockband
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rock Band</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 9px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
}
td, th {
font-size: 9px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 532px;
position: relative;
padding-top: 27px;
}
#body {
background: url(rockband-images/body_bg.gif) repeat-y;
width: 532px;
}
#bodyi {
background: url(rockband-images/body_top.gif) no-repeat;
width: 532px;
}
#bodyj {
background: url(rockband-images/body_bot.gif) bottom no-repeat;
padding: 1px 0;
}
h1, h2, h3, #nav, #nav li {
margin: 0; padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 78px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 162px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(rockband-images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 362px;
}
#content .content {
margin: 7px 35px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(rockband-images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left { float: left; margin-right: 14px; }
img.right { float: right; margin-left: 14px; }
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {color:#fff;text-align:center;}
#power a {color:#fff;}
</style>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">about us</a></li>
<li><a href="http://www.free-css.com/">members</a></li>
<li><a href="http://www.free-css.com/">tickets</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
<h1><a href="http://www.free-css.com/"><img src="rockband-images/logo.gif" width="118" height="25" alt="" /></a></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Our Gallery</h2>
<p>This is demo text. It will be replaced by the original. This is demo text. It will be replaced by <img src="rockband-images/pic_1.jpg" width="61" height="42" alt="" /> the original. This is demo text. It will be replaced by the original. This demo text.</p>
<p>This is demo text. It will be <img src="rockband-images/pic_2.jpg" width="61" height="42" alt="" /> replaced by the original. This is demo text.</p>
<p class="readmore"><a href="http://www.free-css.com/">Read More</a></p>
</div>
<div class="divider"></div>
<div class="content">
<h2>Latest News & Updates</h2>
<h3>June 23, 2005</h3>
<p>This is demo text. It will be replaced by the original. This is demo text. It will be replaced by the original. This is demo <img src="rockband-images/pic_3.jpg" width="65" height="43" alt="pic 3" /> text. It will be replaced by the original. This is demo text. It will be replaced by the original. This is demo text. It will be replaced by the original.</p>
<p class="readmore"><a href="http://www.free-css.com/">Read More</a></p>
</div>
</div>
<div id="content"> <img src="rockband-images/four_men_walking.jpg" width="346" height="234" alt="four men walking" />
<div class="content">
<h2>Latest Album</h2>
<img src="rockband-images/pic_4.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text. It will be replaced by the original. This is a demo text.</p>
<p class="readmore"><a href="http://www.free-css.com/">Read More</a></p>
<div class="divider"></div>
<h2>Hit List</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Tracks</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Still loving you</td>
<td>Ablaze</td>
<td class="download"><a href="http://www.free-css.com/">Download</a></td>
</tr>
<tr>
<td>Fade rose</td>
<td>Eternity</td>
<td class="download"><a href="http://www.free-css.com/">Download</a></td>
</tr>
<tr>
<td>Gone with the wind</td>
<td>Showtime</td>
<td class="download"><a href="http://www.free-css.com/">Download</a></td>
</tr>
<tr>
<td>Summer holidays</td>
<td>Machine X</td>
<td class="download"><a href="http://www.free-css.com/">Download</a></td>
</tr>
</table>
<p class="readmore"><a href="http://www.free-css.com/">More Tracks</a></p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<p id="power">Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a></p>
</div>
</body>
</html>
Related examples in the same category