voilà du code, attention c'est long....
html, body{
margin: 0px;
padding: 0px;
outline: 0px;
color:#000000;
background-color:#999999;
height: 100%;
}
#page{
background-color: #D3D3D3;
width: 1024px;
margin: 0 auto;
border: 5px solid #FFFFFF;
}
#entete {
margin: 0;
width:1024px;
height: 191px;
background:#FF0000;
}
#menuDeroulant{
margin: 0;
padding: 0;
height: 30px;
list-style-type: none;
position: absolute;
text-align:center;
top: 196px;
z-index: 100;
font-weight: bold;
width: 1024px;
}
#main-index {
width: 1024px;
margin: 30px 0 0 0;
padding: 0;
background:#0000FF;
}
#bottom {
width:1024px;
height: 20px;
background:#00FF00;
}
#menuDeroulant li{
float: left;
width: 128px;
margin: 0;
padding: 0;
border: 0;
text-align:left;
}
#menuDeroulant li a{
background: #000000;
border-bottom: 1px solid #fff;
color:#FFFFFF;
letter-spacing:.1em;
text-decoration: none;
text-align:center;
padding:6px 6px 8px;
font-family: "Comic Sans MS",verdana,arial,"Trebuchet MS",Georgia, serif, sans-serif;
font-size: 11px;
font-weight: bold;
display: block;
margin: 0;
}
#menuDeroulant li a:hover {
background:#000000;
color:#999999;
}
#menuDeroulant .sousMenu{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuDeroulant .sousMenu li{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 128px;
}
#menuDeroulant .sousMenu li a{
background: #000000;
color:#FFFFFF;
line-height:10px;
letter-spacing:.1em;
text-decoration: none;
text-align:center;
padding:6px 6px 8px;
font-family: "Comic Sans MS",verdana,arial,"Trebuchet MS",Georgia, serif, sans-serif;
font-size: 11px;
font-weight: bold;
display: block;
margin: 0;
border-bottom: 1px solid #fff;
}
#menuDeroulant .sousMenu li a:hover{
background:#000000;
color:#999999;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Site Officiel du GERC</title>
<link rel="SHORTCUT ICON" href="http://gerc.free.fr/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="entete">
</div>
<ul id='menuDeroulant'>
<li><a href="index.php?page=p1">Calendrier</a></li>
<li><a href="index.php?page=p2"><label class='rouge'>Communications</label></a></li>
<li><a href="#">Le Club</a>
<ul class="sousMenu">
<li><a href='index.php?page=p3'>Accès</a></li>
<li><a href='index.php?page=p4&photo=f1'>Nos structures</a></li>
<li><a href='index.php?page=p6'>Horaires</a></li>
<li><a href='index.php?page=p7'>Inscriptions</a></li>
<li><a href='index.php?page=p8'>Le CA</a></li>
<li><a href='index.php?page=p9'>Programmes</a></li>
</ul>
</li>
<li><a href="index.php?page=p10">Les sorties</a>
<ul class="sousMenu">
<li><a href='index.php?page=p11'>Organisation</a></li>
<li><a href='index.php?page=p12'>Les topos</a></li>
<li><a href='index.php?page=p13'>Carte des sites</a></li>
</ul>
</li>
<li><a href="index.php?page=p14">The Forum</a></li>
<li><a href="#">Divers</a>
<ul class="sousMenu">
<li><a href="index.php?page=p15">Conseils d'Alex</a></li>
<li><a href="index.php?page=p16">Les liens</a></li>
<li><a href="index.php?page=p17">Compétitions</a></li>
</ul>
</li>
<li><a href='index.php?page=p18'>Bar'O Gerc</a>
<ul class="sousMenu">
<li><a href='index.php?page=p19'>Explications</a></li>
<li><a href='index.php?page=p20&limit=10'>Top Ten</a></li>
<li><a href='index.php?page=p20'>Classement</a></li>
<li><a href='index.php?page=p24'>Inscription</a></li>
</ul>
</li>
<li><a href='index.php?page=p27'>Connexion</a></li>
</ul>
<div id="main-index">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eget ante ac quam tempor rhoncus. Mauris dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ipsum massa, ultricies a, fringilla a, blandit vitae, leo. Suspendisse potenti. Maecenas euismod nulla at purus. In vitae libero in est hendrerit vehicula. Praesent convallis nisi sit amet arcu. Sed mauris dui, pellentesque et, luctus quis, tincidunt ac, ante. Proin a lorem nec massa consequat porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ut odio id massa vestibulum imperdiet. Etiam elementum mauris nec odio. Vivamus a velit in magna rhoncus consectetuer. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras iaculis ipsum rhoncus dolor. Nunc lobortis, nibh ac viverra semper, nibh enim bibendum metus, vel pellentesque nulla erat dignissim risus.
Aliquam porttitor rutrum neque. Quisque pellentesque facilisis ante. Maecenas tempor tortor eu diam dapibus varius. In ac eros a elit dapibus vestibulum. Suspendisse luctus, tortor ac interdum tincidunt, magna leo molestie dui, at lobortis pede sapien nec urna. Integer et neque. Aenean massa tortor, pharetra ut, vehicula vel, sagittis iaculis, eros. Proin at magna ac orci posuere tempor. Sed non nunc. Aenean non nibh quis nibh scelerisque adipiscing. Curabitur hendrerit dui quis est. Integer ac neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nonummy nibh sit amet eros. Nam imperdiet gravida mauris. Phasellus congue enim a augue. Proin faucibus imperdiet arcu.
</div>
<div id="bottom">
<div align="center">© 2009-2010 <a href='index.php'>GERC</a> - Tous droits réservés - Webmaster : Jérémy GATEFAIT</div>
</div>
</div>
</body>
</html>
et voici un lien pour le footer en bas de page:
http://www.paperblog.fr/1368069/fixer-en-bas-de-page-un-footer-avec-les-css/ Modifié par mamax (03 Oct 2009 - 00:12)
