Two column, two leve top menu bar
<!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" xml:lang="en" lang="en">
<head>
<meta name="author" content="Luka Cvrk (www.solucija.com)" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<style type='text/css'>
/* project: internet music template
author: luka cvrk (www.solucija.com) */
/* default styles
-------------- */
body {
padding: 0;
margin: 0;
font: 0.74em Arial, Helvetica, sans-serif;
line-height: 1.5em;
background: #fff;
color: #454545;
}
a {
color: #4A8EBC;
background: inherit;
}
a:hover {
color: #C3593C;
background: inherit;
}
a.title {
color: #FE6700;
background: #FFF;
}
h1 {
font: bold 2em "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing: -1px;
padding: 2px 0 0 0px;
margin: 0;
color: #464548;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
color: #464548;
background: inherit;
}
h1 a:hover, h2 a:hover {
color: #C3593C;
background: #FFF;
}
h1 .red{
color: #C3593C;
background: inherit;
}
h2 {
margin: 0 0 5px 0;
padding: 0;
font: bold 1.5em Arial, Helvetica, sans-serif;
letter-spacing: -1px;
color: #000;
background: inherit;
}
h2 .yellow{
color: #FFFCD1;
background: inherit;
}
p { margin: 0 0 5px 0; }
ul {
margin: 0;
padding : 0;
list-style : none;
}
form {
margin: 0;
}
input.search {
width: 145px;
height: 22px;
border: none;
background: #fff url(Internet-Music-images/input.gif) no-repeat;
padding: 5px 10px 0 25px;
color: #808080;
}
input.button {
border: 0;
height: 27px;
width: 76px;
background: #ABC43C url(Internet-Music-images/button.gif) no-repeat;
color: #FFF;
font: bold 1.1em Arial, Helvetica, Sans-Serif;
}
input.login {
width: 150px;
border: none;
background: url(Internet-Music-images/logininput.gif);
padding: 4px;
}
/* layout
------ */
.content {
margin: 10px auto;
width: 760px;
}
.logo {
float: left;
width: 180px;
padding: 10px 0 11px 10px;
}
.header_right {
float: right;
width: 550px;
height: 72px;
}
.logo p {
font-size: 0.9em;
color: #808080;
padding: 0 0 0 7px;
background: inherit;
}
.top_info {
width: 540px;
margin: 12px 0 5px 0;
padding: 0 5px 5px 0;
text-align: right;
background: #FFF url(Internet-Music-images/dot.gif) repeat-x bottom;
color: #444;
}
.slogan {
text-align: right;
width: 160px;
}
.bar {
text-align: right;
font-size: 1.1em;
height: 30px;
}
.bar li {
padding: 0px 10px 8px 10px;
color: #808080;
background: #FFF;
display: inline;
}
.bar li.active {
background: #FFF url(Internet-Music-images/bar.gif) no-repeat center bottom;
color: #C3593C;
font-weight: bold;
padding-bottom: 8px;
}
.bar a {
font-weight: bold;
color: #4A8EBC;
background: inherit;
}
.search_field {
text-align: right;
float: right;
width: 540px;
height: 38px;
background: #464548 url(Internet-Music-images/searchbg.gif) no-repeat top right;
color: #000;
clear: both;
padding: 10px 10px 0 0;
}
.grey {
font-size: 1.2em;
font-weight: bold;
color: #ccc;
background: inherit;
}
.search {
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background: inherit;
}
.newsletter {
float: left;
height: 33px;
padding: 15px 0 0 15px;
width: 192px;
background: #6E6E6E url(Internet-Music-images/newsletterbg.gif) no-repeat;
color: #FFF;
margin: 0 0 3px 0;
}
.subheader {
clear: both;
margin: 3px 0 10px 0;
padding: 8px;
background: #f4f4f4;
color: #808080;
border-bottom: 1px solid #ccc;
}
/* left side
--------- */
.left {
float: left;
width: 490px;
margin: 0 0 10px 0;
}
.left_articles {
margin: 0 0 15px 0;
padding: 0 0 0 10px;
}
.lt {
height: 10px;
background: #6E6E6E url(Internet-Music-images/lt.gif) no-repeat;
color: #FFF;
}
.lbox {
color: #eee;
padding: 3px 12px;
margin: 0 0 15px 0;
background: #6E6E6E url(Internet-Music-images/lb.gif) no-repeat bottom left;
height: 178px;
}
.lbox a {
color: #FFFCD1;
background: inherit;
}
.lbox h2 {
color: #FFF;
background: #6E6E6E;
}
.thumb {
float: left;
width: 150px;
border: 1px solid #d4d4d4;
color: #fff;
background: #6e6e6e;
margin: 0 15px 15px 0;
padding: 5px;
}
.thumb p { margin: 0; padding: 3px; color: #FFF; background: #6e6e6e; }
/* right side
---------- */
.right {
float: right;
width: 245px;
margin: 0 0 10px 0;
}
.right a {
color: #FFFCD1;
background: inherit;
}
.rt {
background: #C85E35 url(Internet-Music-images/rt.gif) no-repeat;
color: #FFF;
height: 7px;
}
.right_articles {
font-size: 0.9em;
background: #C85E35 url(Internet-Music-images/rb.gif) no-repeat bottom;
color: #FEE1D5;
padding: 4px 8px;
margin: 0 0 10px 0;
}
.image {
float: left;
margin: 0 9px 3px 0;
}
/* footer
------ */
.footer {
clear: both;
text-align: center;
line-height: 1.8em;
color: #808080;
background: #FFF url(Internet-Music-images/dot.gif) repeat-x;
padding: 8px 0;
}
.footer a {
color: #C3593C;
background: inherit;
}
</style>
<title>Internet Music</title>
</head>
<body>
<div class="content">
<div class="header_right">
<div class="top_info">
<div class="top_info_right">
<p><b>You are not Logged in!</b> <a href="#">Log in</a> or <a href="#">register</a> to start downloading music!</p>
</div>
</div>
<div class="bar">
<ul>
<li class="slogan">Search Categories:</li>
<li><a href="#" accesskey="b">Bands</a></li>
<li><a href="#" accesskey="a">Artists</a></li>
<li class="active">Music</li>
<li><a href="#" accesskey="p">Pictures</a></li>
<li><a href="#" accesskey="g">Gigs</a></li>
</ul>
</div>
</div>
<div class="logo">
<h1><a href="#" title="The best music on the net!">Internet <span class="red">Music</span></a></h1>
<p>What shall we play today?</p>
</div>
<div class="search_field">
<form method="post" action="?">
<p><span class="grey">Search Example:</span> <span class="search">Progressive Trance</span> <input type="text" name="search" class="search" /> <input type="submit" value="Play!" class="button" /></p>
</form>
</div>
<div class="newsletter">
<p>Subscribe for Newsletter!</p>
</div>
<div class="subheader">
<p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
<div class="left">
<div class="left_articles">
<h2><a href="#">Eurodance TOP 10</a></h2>
<p><a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
<p><a href="#">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
<div class="lt"></div>
<div class="lbox">
<h2>Featured Artist: <span class="yellow">Sonia</span></h2>
<div class="thumb">
<img src="images/sonia.jpg" alt="" />
<p><img src="images/play.gif" alt="Play" /> Sonia</p>
</div>
<p>Sonia, a Croatian dance and trance artist released a number of quality tunes which rely on strong rhythm and heavy riffs.</p>
<p>We suggest downloading and listening a dance track called <a href="http://www.solucija.com/Sonia_-_Last_night.mp3">Last Night</a></p>
</div>
<div class="lt"></div>
<div class="lbox">
<h2>Featured Artist: <span class="yellow">Andreas Viklund</span></h2>
<div class="thumb">
<img src="images/andreas.jpg" alt="" />
<p><img src="images/play.gif" alt="Play" /> Andreas Viklund</p>
</div>
<p><a href="http://andreasviklund.com">Andreas Viklund</a>, a music producer from northern Sweden released a number of great songs under his own name and participated in making several <a href="http://en.wikipedia.org/wiki/Lagoona">Lagoona</a> dance and techno albums along with Bjorn Karlsson.</p>
<p>We strongly suggest you listen to the song <a href="http://andreasviklund.com/music/lagoona/">Into my dream (Kaveh Azizi rmx)</a></p>
</div>
</div>
<div class="right">
<div class="rt"></div>
<div class="right_articles">
<p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>
<div class="rt"></div>
<div class="right_articles">
<p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>
<div class="rt"></div>
<div class="right_articles">
<p><img src="images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>
</div>
<div class="footer">
<p><a href="#">RSS Feed</a> | <a href="#">Contact</a> | <a href="#">Accessibility</a> | <a href="#">Products</a> | <a href="#">Disclaimer</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
© Copyright 2006 Internet Music, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="What's your solution?">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category