Cette page est un exemple de la technique de mise en page exposée dans 2.position absolue et fixe.
Dans les navigateurs conformes au standard CSS2, le menu de la colonne de droite reste fixé à la même position lorsque le reste de la page défile. Dans les navigateurs qui ne reconnaissent pas le positionnement fixe (Internet Explorer 5.x Windows), ce menu est en position absolue : il est donc alors soumis au défilement.
Le code correspondant est :
En CSS :
.page {
width: 70%;
border: 1px solid #000000;
padding: 1em 1%;
}
.menu {
position: absolute;
top: 2em;
right: 1em;
background-color: #ffecce;
border: 1px solid #666666;
padding: 1em;
width: 20%;
}
html>body .menu {
position: fixed;
}
En HTML :
<body> <div class="page"> ... </div> <div class="menu"> <ul> <li>lien_1</li> <li>lien_2</li> <li>lien_3</li> </ul> </div> </body>