voilà du code, attention c'est long....
/* déclaration des bloc de base */
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; /* hauteur de l'entête: 191px */
background:#FF0000;
}
#menuDeroulant{
margin: 0;
padding: 0;
height: 30px; /* on force la hauteur du menu à 30px */
list-style-type: none;
/* on place le menu juste en dessous de l'entête en position absolue */
/* afin que lorsque le menu se déroule il se face sur le contenu qu'il */
/* y a en dessous */
position: absolute;
text-align:center;
/* la position du menu est donnée par la hauteur de tous les éléments */
/* qu'il y a au dessus: entête + Bordure soit 191px + 5px = 196px */
top: 196px;
z-index: 100;
font-weight: bold;
width: 1024px;
}
#main-index {
width: 1024px;
margin: 30px 0 0 0; /* pour laisser de la place au menu juste au dessus */
/* on ajoute une marge égale à la hauteur du menu soit 30px */
padding: 0;
background:#0000FF;
}
#bottom {
width:1024px;
height: 20px;
background:#00FF00;
}
/* gestion du menu à tiroirs */
#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" /> <!-- Appel de la feuille de style (css) -->
</head>
<body>
<div id="page"> <!-- definie la zone de la page -->
<div id="entete">
</div>
<!--<img src="99_ressources/images/logos/gerc.jpg"> -->
<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> <!-- menu -->
<div id="main-index"> <!-- definie la zone de contenu -->
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> <!-- fin main -->
<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> <!-- fin bottom -->
</div> <!-- fin page -->
</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)
