(div id=principal)
<div id="titre"> Mise en page avec des calques</div>
<div id="navigation"> (un menu de navigation)</div>
<div id="principal"> (le corps de la page) </div>
<div id="voiraussi"> (des renvois) </div>
#titre{
width:100%;height=auto;
background-color: #FF0000;
z-index:3;
/* z-index permet de déterminer la position du calque en cas d'empilement
: le plus en-dessous de la "pile" aura un z-index:1 */
}
#navigation{
width:25%;height=auto;
background-color: #00FF00;
z-index:3;
float:left ;
/* le calque "flottera" à gauche : ce qu'on écrira
à la suite viendra se placer à autour de lui et non en-dessous
("habillage") */
}
#principal
{
width: 50%;height=auto;
background-color: #CCCCCC;layer-background-color: #CCCCCC;
z-index:4;
float:left;
/* lui aussi "flottera" à gauche, mais il viendra "buter"
contre le calque flottant précédent */
}
#voiraussi
{
width:25%;height=auto;
background-color: #FFFF00;
float:right;
/* lui flotte à droite */
}
(div id=voiraussi)
Un site de référence : www.openweb.eu.org
Télécharger cette feuille de style (compressée)