Alors là, on a changé le menu de place, là encore sans toucher au contenu de la page, bien entendu. Pour cela on a juste bidouillé la CSS : changement d'images pour un nouveau style et une légère modification des classes "#nav" et ".contenu" :
div#nav {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 608px;
border: 1px solid #000000;
z-index: 2;
}
.lebloccontenu {
position: absolute;
margin-right: 0px;
margin-top: 5px;
width: 600px;
border: 1px solid #000000;
z-index: 1;
}
Vous remarquerez que seules les marges ont été modifiées.
Le fait que le menu soit extrait du flux (position: fixed ou absolute) permet de changer la position des diverses parties composant la page sans les changer de place dans le contenu HTML.
La CSS comporte aussi une nouveauté :
Cette ligne de code permet de définir un ordre de superposition explicitement. Cela devient utile ici car si on laissait faire les choses normalement, les sous-menus apparaitraient sous le contenu, ce qui pourrait être pour le moins ennuyeux...