Gabarit XHTML/CSS de deux colonnes extensibles avec menu à droite

Gabarit XHTML/CSS centré de deux colonnes extensibles avec menu à droite et entête et pied de page.
gabarit css flexible2 colonnes menu à droite
Largeur : 80%.
Longueur : extensible.
Colonnes indépendantes et extensibles.
Menu à droite.
Entête et pied de page fixé à 150px de hauteur.
CSS valide niveau 2.1.
Valide XHTML 1.0 Strict.
Testé sous Firefox 4, Internet Explorer 8 et Chrome.

Code XHTML :
<div id="conteneur">
 
<div id="header"></div>
 
<div id="contenu"></div>
 
<div id="menu-droit"></div>
 
<div id="footer"></div>
 
</div>
Code CSS :
/* ============================================== 
Gabarit HTML/CSS
© creer-un-site.fr
Conditions d'utilisation: http://creativecommons.org/licenses/by/2.0/fr/
============================================== */
body { margin : 0; background : #002f2f; } #header { width : 100%; height : 150px; background : #a7a37e; } #footer { width : 100%; height : 150px; background : #a7a37e; float : left; } #conteneur { margin : 0 auto; width : 80%; height : auto; background : #e6e2af; overflow : auto; } #contenu{ float : left; width : 77%; margin : 5px 0 5px 5px; padding : 5px; background : #eeeeee; border : 1px solid #002f2f; } #contenu a{ color : #a7a37e; text-decoration : none; } #menu-droit { float : right; width : 21%; margin : 5px 5px 5px 0; background : #eeeeee; border : 1px solid #002f2f; } #menu-droit ul { list-style-type : none; padding : 0; } #menu-droit li a { display : block; height : 25px; color : #002f2f; text-decoration : none; line-height : 25px; padding-left : 10px; } #menu-droit li a:hover { background : #002f2f; color : #ffffff; }
Démo du gabarit XHTML/CSS
Voir/déposer un commentaire (0) | Signaler un problème