browntown
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/******************/
/* The body part */
/******************/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#8B4513;
background-image: url(bgr.gif);
background-repeat: repeat-x;
margin: 0px auto;
padding: 0px 0px 0px 0px;
color:#000000;
}
/************************/
/* Contain the design */
/************************/
#conteneur {
width:790px;
margin:0px auto;
padding: 0px 0px 0px 0px;
background-image:url(fond.jpg);
background-position:center;
background-repeat:repeat-y;
}
/*************************/
/* Contain the header */
/*************************/
#header {
width:790px;
height:166px;
background-image:url(header.jpg);
background-position:bottom center;
background-repeat:no-repeat;
}
/*******************************/
/* At the bottom of the header */
/*******************************/
#menu {
width:790px;
height:51px;
background-image:url(menu.jpg);
background-position: center;
background-repeat:no-repeat;
}
/*******************************/
/* At the bottom of the "menu" */
/*******************************/
#sousmenu {
width:790px;
height:51px;
background-image:url(sousmenu.jpg);
background-position: center;
background-repeat:no-repeat;
}
/********************/
/* the central part */
/********************/
#center {
width:790px;
}
/**********/
/* footer */
/**********/
#pied {
width:790px;
height:64px;
background-image: url(pied.jpg);
background-position: center;
background-repeat:no-repeat;
text-align: center;
clear:both;
}
/***************************/
/* Where you put your text */
/***************************/
#contenu {
float:left;
width:480px;
margin-left:30px;
text-align:justify;
}
/****************/
/* The left nav */
/****************/
#gauche {
float:left;
width:200px;
margin-left:20px;
display:inline; /* important for ie */
}
#nav {
width:195px;
float:left;
}
#nav a:link, #nav a:visited {
background-color: #FFFFFF;
background-image:url(tick.gif);
background-position:left;
background-repeat:no-repeat;
color:#333333;
width:175px;
margin:0px 0px 0px 0px;
padding:5px 0px 5px 20px;
text-decoration:none;
border-bottom:1px solid #666666;
border-left:1px solid #000000;
display:block;
}
#nav a:hover {
background-color: #ffffff;
width:175px;
background-image:url(tick_on.gif);
background-position:left;
background-repeat:no-repeat;
padding-left:20px;
color:#333333;
border-left:1px solid #000000;
text-decoration:none;
}
/*****************************************/
/* To say that picture don't have border */
/*****************************************/
img {
border:0px;
}
/***************************/
/* Modif for links in text */
/***************************/
a:link {
text-decoration:underline;
color:#990000;
}
a:visited {
text-decoration:line-through;
color:#990000;
}
a:hover {
text-decoration:underline;
color: #CC0000;
}
/**************/
/* Main title */
/**************/
#titre {
position:absolute;
font-size:36px;
padding-left:200px;
top:50px;
color:#800000;
}
/************/
/* Subtitle */
/************/
#subtitle {
position:absolute;
font-size: 10px;
padding-left:250px;
top:86px;
color:#800000;
}
#copy {
padding-top:20px;
}
/* The end ^^ */
</style>
<title>Brown town</title>
</head>
<body>
<div id="conteneur">
<div id="header"><span id="titre">Brown town</span><span id="subtitle">let's go throught brown colors</span></div>
<div id="menu"> </div>
<div id="sousmenu"> </div>
<div id="center">
<div id="gauche">
<div id="nav"> <a href="#">Accueil</a> <a href="#">un lien</a> <a href="#">Un autre</a> <a href="#">Encor un autre</a> <a href="#">Et un dernier</a> </div><br />
</div>
<div id="contenu">
<p>This design contain : </p>
<ul>
<li>9 images -> 23 Ko.</li>
<li>css & html -> 4,5 Ko.</li>
<li>few hours of work ^^</li>
</ul>
<p>This design passed successfully the following tests :</p>
<a href="http://validator.w3.org/">W3C : Valid XHTML 1.0 Strict</a> <a href="http://www.validome.org/">Validome : Valid XHTML 1.0</a>
<p>Test under windows xp, and display perfectly with ie6, firefox1 et opera 8.5</p>
<p>Like always, no ©, i've made all images, so do what you want with it. I put the .psd files in the archive, don't hesitate to personalize them.</p>
<p>If you like my work, please send me an email (or money ^^).</p>
</div>
</div>
<div id="pied"><p id="copy">No © - Brown town - v2005</p></div>
</div>
</body>
</html>
Related examples in the same category