OpenWeb - Exemple d'utilisation de la position fixe dans un menu

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