Cette page est un exemple de la technique de mise en page exposée dans Initiation au Positionnement CSS : 3.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>
Accueil OpenWeb | Plan du site | Conditions de réutilisation
Cette page est valide Xhtml et Css
Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi