wood-guitar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Wood Guitar</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
background-color: #993300;
clear: both;
}
#container{
margin: 0px auto;
width: 888px;
background-image: url(wood-guitar-images/sfondocorpo.jpg);
background-repeat: repeat-y;
height: 100%;
overflow: hidden;
}
/* beginning top part */
#header{
margin: 0px auto;
width: 740px;
height: 244px;
background-image: url(wood-guitar-images/corpohead.jpg);
background-repeat: repeat-y;
}
#top{
margin: 0px auto;
width: 740px;
height: 12px;
background-image: url(wood-guitar-images/ombrasu.jpg);
background-position: top;
background-repeat: no-repeat;
}
#middle{
margin: 0px auto;
width: 740px;
height: 220px;
background-image: url(wood-guitar-images/header.jpg);
background-position: center;
background-repeat: no-repeat;
}
#title{
width: 400px;
height: 100px;
float: right;
text-align: right;
color: #ffffff;
margin-top: 34px;
padding-right: 60px;
}
#down{
margin: 0px auto;
width: 740px;
height: 12px;
background-image: url(wood-guitar-images/ombragiu.jpg);
background-position: bottom;
background-repeat: no-repeat;
}
/* end top part*/
/* start main part*/
#main {
margin: 0px auto;
width: 888px;
height: 100%;
overflow: hidden;
}
#mainleft{
width: 264px;
float: left;
}
#contmenu{
width: 264px;
height: 278px;
background-image: url(wood-guitar-images/menuback.jpg);
background-repeat: no-repeat;
float: left;
}
#menu{
width: 120px;
height: 200px;
margin: 43px 34px 35px 110px;
}
/* menu formatting*/
#menu ul{
margin-left: 5px;
padding-left: 5px;
}
#menu ul li{
margin-top: 10px;
list-style-type: none;
}
#menu ul li a{
font-family: Verdana, Arial, san-serif, Times;
font-size: 12px;
color: #663333;
text-decoration: none;
}
/*end menu*/
/*undermenu round links*/
.roundcontainer{
width: 157px;
height: 108px;
float: right;
}
.roundcontainer a img{
text-decoration: none;
border: none;
}
/*content formatting*/
#changing{
margin-top: 0px;
width: 560px;
height: 100%;
float: left;
overflow: hidden;
}
#words{
margin-top: 0px;
width: 560px;
height: 95px;
background-image: url(wood-guitar-images/words.jpg);
background-repeat: no-repeat;
background-position: center;
}
#left{
margin-top: 0px;
width: 330px;
float: left;
overflow: hidden;
}
#right{
margin-top: 0px;
width: 230px;
float: right;
overflow: hidden;
}
.flowerlarge{
width: 330px;
height: 40px;
margin-top: 5px;
background-image: url(wood-guitar-images/flowerlarge.jpg);
background-repeat: no-repeat;
text-align: right;
}
.flowersmall{
width: 230px;
height: 40px;
margin-top: 5px;
background-image: url(wood-guitar-images/flowerlarge.jpg);
background-repeat: no-repeat;
text-align: right;
}
.squaresmall{
margin-top: 10px;
margin-left: 20px;
width: 200px;
background-color: #ffffff;
border: 1px solid #cc9999;
}
.squaresmall p{
padding: 10px;
}
/* text formatting*/
#footer{
margin: 0px auto;
width: 888px;
height: 86px;
background-image: url(wood-guitar-images/foot.jpg);
background-repeat: no-repeat;
}
/* text formatting*/
h3{
font-family: Verdana, Arial, Times, san-serif;
font-size: 12px;
font-weight: bold;
color: #663333;
}
p{
font-family: Verdana, Arial, Times, san-serif;
font-size: 11px;
color: #333333;
padding-left: 20px;
}
#credits{
line-height: 30px;
font-family: "Trebuchet MS", Verdana, Arial, san-serif;
font-size: 11px;
text-align: center;
color: #cc9966;
}
#credits a{
text-decoration: none;
font-weight: bold;
color: #cc9966;
}
#credits a:hover{
text-decoration: underline;
font-weight: bold;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="top"> </div>
<div id="middle">
<div id="title">
<h1>My Music Site</h1>
</div>
</div>
<div id="down"> </div>
</div>
<div id="main">
<div id="mainleft">
<div id="contmenu">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">My Page</a></li>
<li><a href="http://www.free-css.com/">My Gallery</a></li>
<li><a href="http://www.free-css.com/">My Links</a></li>
<li><a href="http://www.free-css.com/">News</a></li>
<li><a href="http://www.free-css.com/">Contacts</a></li>
</ul>
</div>
</div>
<div class="roundcontainer"> <a href="http://www.kykoo.it"><img src="wood-guitar-images/round01.jpg" alt="link 1"></img></a> </div>
<div class="roundcontainer"> <a href="http://www.kykoo.it"><img src="wood-guitar-images/round02.jpg" alt="link 2"></img></a> </div>
</div>
<div id="changing">
<div id="words"></div>
<div id="left">
<div class="flowerlarge">
<h3>My First Article</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="flowerlarge">
<h3>My Second Article</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="right">
<div class="flowersmall">
<h3>My News</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="flowersmall">
<h3>My Somethings</h3>
</div>
<div class="squaresmall">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div id="footer"> </div>
</div>
<div id="credits"> barbecued by <a href="http://www.kykoo.it" title="web art agency">kykoo</a> </div>
</body>
</html>
Related examples in the same category