body{
height: 100%;
}

body {
margin: 0;
padding: 0;
background-color : #000;
text-align :left;
font-family : arial;
font-size : 10px;
color : #fff;


scrollbar-base-color:#80A23A;

scrollbar-arrow-color:#FFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#80A23A;
scrollbar-highlight-color:#ccc;

scrollbar-track-color:#80A23A;
}

/* BLOC CONTENEUR */

#cont {
position:absolute;
left: 50%;
top: 50%;
width: 750px;
height: 500px;
margin-top: -255px;
margin-left: -375px;
background :#000 url(images/bg_all_003.jpg);
text-align : left;
border : 10px solid #fff; }


#menu {
padding : 0;
margin : 0;
list-style : none;
float : left;
margin-right : 0px;
height : 0px;}

#menu li a span{
position: absolute;
left: -5000px;
}

li {
float : left;
display : block;

}

li a {
padding : 0;
margin : 0 0 0 1px;
width : 250px;
height : 30px;
display : block;
background : #ccc;
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);
}

li a:hover {
background : #666;
}

a.photos{
background: url(images/boot_photo_photos.jpg);
background-position : 30px 0;

}
a.photos:hover {
background: url(images/boot_photo_photos.jpg);
background-position : 0 0;}

a.home{
background: url(images/boot_photo_accueil.jpg);
background-position : 30px 0}
a.home:hover {
background: url(images/boot_photo_accueil.jpg);
background-position : 0 0;}

a.news{
background: url(images/boot_photo_news.jpg);
background-position : 30px 0}
a.news:hover {
background: url(images/boot_photo_news.jpg);
background-position : 0 0;}

a.musique{
background: url(images/boot_photo_musique.jpg);
background-position : 30px 0;
}
a.musique:hover {
background: url(images/boot_photo_musique.jpg);
background-position : 0 0;}

a.liens{
background: url(images/boot_photo_liens.jpg);
background-position : 30px 0}

a.liens:hover {
background: url(images/boot_photo_liens.jpg);
background-position : 0 0;}

a.contact{
background: url(images/boot_photo_contact.jpg);
background-position : 30px 0}
a.contact:hover {
background: url(images/boot_photo_contact.jpg);
background-position : 0 0;}

a.sponsors{
background: url(images/boot_photo_sponsors.jpg);
background-position : 30px 0}
a.sponsors:hover {
background: url(images/boot_photo_sponsors.jpg);
background-position : 0 0;}


/* BLOC GAUCHE*/

#texte {
background : transparent;
width : 250px;
height : 500px;
text-align : left;
float : left;
overflow : auto; }

#texte p{
margin : 0 0 0 10px; padding : 0}

.englobe_texte {
margin-top : 10px;
background : #fff;
color : #000;
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80); }

/* images du bloc texte */
#texte img{
margin : 10px 0 10px 10px; }


/* BLOC CENTRE */
#centre {
background : transparent;
float : absolute;
margin-left : 0px;
border-left :10px solid #fff;
height : 500px;
width : 250px;
overflow : auto;}



#centre_blanc {
background : #fff;
float : right;
border-right :8px solid #fff;
height : 500px;
width : 250px;
overflow : auto;
color : #000}

#centre_blanc img{

margin-left : 7px; margin-top : 5px;
float : right
}


/* Titres*/
h1{margin: 10px 0 0 10px;
padding: 0; font-size : 12px; }

h2 span {font-size : 10px; font-style : italic}
h2 {
margin : 10px 5px 0 0;
padding : 0;
font-size : 12px;
border-bottom : 1px dotted #B9C899;
padding-bottom : 5px;
color : #B9C899;}


h3 {
margin : 10px 10px 10px 0;
padding : 0;
font-size : 10px;
border-bottom : 1px dotted #B9C899;
padding-bottom : 5px;
color : #B9C899;
text-align : right;
text-transform : uppercase}

h4{
margin : 10px 10px 0 0;
padding : 0;
font-size : 12px;
border-bottom : 1px dotted #B9C899;
padding-bottom : 5px;
color : #B9C899;}

/* paragraphes */
p {
padding : 0;
margin-top : 5px;
margin-bottom : 0;
margin-right : 10px}

.para_top2 {margin : 5px 0 0 0}
.notop{margin : 0}


/* iLiens */
a {color : #B9C899 }
a:hover {color : #B9C899 }

a.class1 {text-decoration : none; text-transform : uppercase; font-weight : bold}
a:hover.class1 {text-decoration : none; text-transform : uppercase; }

/* FORMULAIRE */

input {
width : 275px;
margin : 0 0 5px 0
}
textarea {
margin : 0 0 10px 0;
width : 275px;
}

a.blanc {text-decoration : none; font-weight : bold; color : #ffffff}

<!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="fr"
lang="fr">
<head>
<title>nouveau site test 2006 : musique</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css"
href="pictures.css" />
</head>
<body>
<div id="global"></div>
<ul id="menu">
<li><a href="acceuil.html" class="acceuil"><span>acceuil</span></a></li>
<li><a href="actualit%E9es.html" class="actualit&eacute;es"><span>actualit&eacute;es</span></a></li>
<li><a href="presentation.html" class="presentation"><span>presentation</span></a></li>
<li><a href="groupes.html" class="groupes"><span>groupes</span></a></li>
<li><a href="musique.html" class="musique"><span>musique</span></a></li>
<li><a href="dates.html" class="dates"><span>dates</span></a></li>
<li><a href="photos.html" class="photos"><span>photos</span></a></li>
<li><a href="ddp.html" class="ddp"><span>ddp</span></a></li>
<li><a href="forum.html" class="forum"><span>forum</span></a></li>
<li><a href="streeteam.html" class="streeteam"><span>streeteam</span></a></li>
<li><a href="sponsors.html" class="sponsors"><span>sponsors</span></a></li>
<li><a href="liens.html" class="liens"><span>liens</span></a></li>
<li><a href="contact.html" class="contact"><span>contact</span></a></li>
</ul>
<div id="texte">
<h1>Test site 2006</h1>
<p style="width: 251px;">Nouveau site test pour 2006/2007.</p>
<p>&nbsp;</p>
</div>
<div id="centre_blanc">
<h3>titre</h3>
<img src="mini/shakira_005.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/anastacia_005.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/021.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/024.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
<h3>titre</h3>
<img src="mini/027.jpg" alt="" />
<p>Et dolore, nisl nonummy molestie. Commodo vel duis eum dolor
magna wisi. Exerci lorem ea iusto et, ex ea. Euismod illum luptatum,
feugiat. Aliquip hendrerit vulputate feugiat et dolore amet feugait,
blandit, odio duis autem illum ex dolore vero ipsum nostrud molestie
vero.
<a href="#">Voir le site</a></p>
</div>
</body>
</html>