Menus simples en CSS / 3 colonnes avec en-tête et pied de page

Menus

CSS pour la disposition

/*adaptation d'une fiche générée par css creator*/
/*les noms de classes et d'identités ont été traduits*/
html,body{
margin:0;
padding:0;
}
.clear{
clear:both;
}
.contenu{
padding:5px;/*padding pour le contenu */
}
#zone_bas{
height:2em;
width:100%;
background-color:#C9DDE4;
}
#zone_bas_b{
height:1.1em;
width:100%;
background-color:#C9DDE4;
}
#zone_haut{
padding:.2em 0 .5em 0;
width:100%;
background-color:#C9DDE4;
}
#zone_haut .contenu{
padding-bottom:0;/*padding-bottom 0 pour ôter l'espace avec IE5 Mac*/
}
#interieur{
margin:0;
width:100%;
}
#zone_gauche{
float:left;
margin-left:-10em;
margin-right:2px;
position:relative;
width:10em;
}
* #zone_gauche{
background-color:#000;
/*ôter cette couleur fera disparaître les bordures
et les erreurs d'arrondi n'apparaîtront plus*/
}
#colonne_principale{
float:left;
margin:0 -8px 0 -2px;
position:relative;
width:100%;
background-color:#E9F5FE;
}
#exterieur{
border:solid #FFF 0;
border-left-width:10em ;   /* largeur colonne gauche */
border-left-color:#E9F5FE; /* couleur colonne gauche */
border-left-style:solid;
border-right-width:10em;   /* largeur colonne droite */
border-right-color:#E9F5FE;/* couleur colonne droite */
border-right-style:solid;
background-color:#E9F5FE;  /* couleur colonne centre */
width:auto;
}
#exterieur>#interieur{
border-bottom:1px solid #E9F5FE;
}
#largeur_page{
min-width:500px;
width:100%;
border-right-color:#E9F5FE;
}
#zone_droite{
width:10em;
float:right;
position:relative;
margin-right:-10em;
margin-left:1px;
}

Cette page permet d'accéder à plusieurs menus horizontaux et verticaux qui n'utilisent que CSS pour la disposition.
La balise <span> y est souvent utilisée.

Le code HTML utilise une liste <dl> :

<div id="zone_gauche">
<div class="content">
<dl>
<dt><a href="index.php">Accueil</a></dt>
<dt><a href="menus.php">Menus</a></dt>
<dt><a href="menu1.php" title="horizontal - en haut">Menu 1</a></dt>
<dt><a href="menu2.php" title="vertical - à droite">Menu 2</a></dt>
<dt><a href="menu3.php" title="horizontal - en bas">Menu 3</a></dt>
<dt><a href="menu4.php" title="vertical - à gauche">Menu 4</a></dt>
<dt><a href="pagecss.php" title="Créer une page sans tableau">Page</a></dt>
<dt><a href="hacks.php" title="Adapter CSS au navigateur">Hacks</a></dt>
<dt><a href="css_dyn.php" title="CSS dynamique">CSS/PHP</a></dt>
<dt><a href="popups.php" title="tests et techniques de base">CSS PopUps</a></dt>
<dt><a href="en/menus.php">In English</a></dt>
</dl>
</div>
</div>

Le code HTML des autres menus utilise soit une liste (<ul> ou <dl>) qui respecte la sémantique de l'HTML soit, pour une compatibilité avec Netscape 4, des balises <p> ou <div> ou encore une série de liens hypertextes.

Cliquez sur un des menus pour afficher son code CSS puis affichez la source pour le code de chaque page.

CSS / 3 colonnes / en-tête / pied de page

Menus