SELFHTML/Aides à la navigation Feuilles de style CSS Mise en page avec les CSS
Domaines fixes avec les CSS
Utilisation des domaines fixes
Définir une mise en page avec domaine fixe
Adaptation pour Internet Explorer
Vous aimeriez que votre logo ou bien votre barre de menu soient toujours visibles sur votre page, même si son contenu nécessite une barre de défilement? Vous connaissez sûrement les inconvénients des 
cadres ou 
cadres incorporés. Une alternative serait de positionner un élément de la page par rapport à une certaine grandeur de fenêtre, et de le mettre à disposition dans un domaine visible par défilement en utilisant la propriété CSS overflow. Ceci est peu flexible et nécessite une barre de défilement à l'intérieur de la page.
A l'aide de la propriété CSS position vous pouvez fixer des éléments de la page à un endroit spécifique de la fenêtre d'affichage, de manière qu'ils ne défilent pas avec le reste du contenu. Cependant cette solution n'est pas toujours avantageuse: Un élément fixé en haut de la fenêtre en diminue la partie visible. La vision d'ensemble du contenu peut s'en trouver restreinte et peut nécessiter davantage de défilements, ce qui diminue l'efficacité de la page. Peuvent s'y rajouter des problèmes d'ancres internes à la page. Posez-vous donc la question si, par exemple, un logo visible en permanence, donne assez d'information pour justifier ces restrictions.
Ce qui en revanche peut être utile est une barre de menu verticale, fixe, se trouvant à gauche (ou à droite) de la fenêtre. La partie de la fenêtre servant à afficher la page est en général plus large que haute. Une ligne de texte plus courte améliore la lisibilité. De plus, la partie libre sous une barre de menu placée de côté n'est, la plupart du temps, pas utilisée. Un menu toujours visible peut augmenter la convivialité, et elle rendra aussi superflue un lien "haut de page".
La position fixée n'est pas toujours bien adaptée. Elle est pratique pour des barres de menu suffisamment courtes pour s'afficher complètement même dans des fenêtres de petite taille, car elles ne défileront pas avec le reste de la page. En plus cela exige une correction compliquée pour Internet Explorer, qui ne reconnait cette technique que depuis la version 7.
L'exemple suivant montre l'emploi de la propriété CSS position:fixed, qui ne sera rendue accessible que pour les navigateurs modernes par un aiguillage spécifique. Pour les autres navigateurs, on indiquera position:absolute, pour que la position de départ des éléments soit identique pour de vieux navigateurs comme Netscape 4. Le domaine ne pouvant être fixé, il défilera avec la page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu fixé pour navigateurs modernes</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
min-width: 40em; /* une largeur minimale évite des erreurs d'affichage dans des nagateurs modernes */
}
p {
margin: 3em 0 0 3em; /* positonnement du lien 'retour' */
}
p a {
color:black; /* couleur du lien 'retour' */
}
html {
padding: 0;
}
body {
margin: 0; padding: 0;
}
#fixe {
position: absolute;
top: 2.8em; left: 2em;
width: 18em;
background-color: white;
border: 1px solid silver;
}
html>body #fixe { /* seulement pour navigateurs modernes! */
position: fixed;
}
#fixe img {
height: 6.8em; float: right;
}
#contenu {
margin-left: 22em; padding: 0 1em;
border-left: 2px ridge gray; border-top: 2px ridge gray;
}
* #contenu { /* caché de Netscape 4 */
background-color: #ffffe0;
}
#contenu h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#contenu p {
font-size: 1em;
margin: 1em 0;
}
#contenu #pied {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}
#menu {
font-size: 0.83em;
margin: 0 0 1.2em; padding: 0;
}
#menu li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#menu a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#menu a:link {
color: black; background-color: #eee;
}
ul#menu a:visited {
color: #666; background-color: #eee;
}
ul#menu a:hover {
color: black; background-color: white;
}
ul#menu a:active {
color: white; background-color: gray;
}
</style>
</head>
<body>
<div id="defilement"> <!-- utile seulement pour la correction suivante (plus bas) -->
<h1>Menu fixé</h1>
<div id="contenu">
<h2>Exemple pour navigateurs modernes</h2>
<p>Dans cet exemple le menu de gauche est d'abord fixé de manière absolue
et sera fixée ensuite pour des navigaturs modernes par un aiguillage.
Dans les navigateurs anciens, cela donne une erreur d'affichage, car
ils placent en haut le menu se trouvant à la fin du code source.</p>
<p>Pour cet exemple, la "présentation en colonnes avec entête et
pied de page" de la page précédente a été modifiée légèrement.
Elle s'adapte à la taille de la fenêtre et de la police d'écriture, et même le logo
'grandit' aussi avec le texte, par la hauteur donnée en <strong>em</strong>.</p>
<p>Remarquez bien que le domaine fixe devient partiellement inaccessible,
lorsque la hauteur de la fenêtre diminue fortement et/ou lorque la taille
de la police augmente!</p>
<p id="pied">Vous avez vraiment fait défiler la fenêtre jusqu'ici? ;-)</p>
</div>
</div>
<div id="fixe"> <!-- empêche une erreur d'affichage d'un ul fixé -->
<ul id="menu">
<li><a href="intro.htm">Introduction à la mise en page avec les CSS</a></li>
<li><a href="colonnes.htm">Présentation en colonnes avec les CSS</a></li>
<li><a href="domainefixe.htm">Domaines fixes avec mise en page CSS</a></li>
<li><a href="barredemenu.htm">Barres de menu avec les CSS</a></li>
<li><a href="aiguillage.htm">Aiguillage de navigateurs avec les CSS</a></li>
</ul>
<img src="../../../src/logo.gif" alt="SELFHTML">
<p><a href="../domainefixe.htm#definir">retour</a></p>
</div>
</body>
</html>
Cet exemple montre à quel point cela pourrait être simple de réaliser un menu fixé. Seulement, Internet Explorer ne soutient le standard CSS 2, publié en 1998, seulement depuis la version 7, huit années plus tard. D'un autre côté, Internet Explorer interprète déjà depuis sa version 5.0, une propriété CSS, prévue pour CSS3, et qui permet une adaptation.
Cet exemple montre trois avantages aussi bien du positionnement fixe que du positionnement absolu:
Des chevauchements (ici de l'entête et du titre) sont possibles, qui peuvent être exploités utilement dans des buts précis.
Des éléments placés plus loin dans le code source (ici le menu) peuvent s'afficher avant tous les autres, ce qui rend le contenu atteignable plus facilement par des outils basés sur le texte comme des moteurs de recherche ou lecteurs d'écran.
Le positionnement absolu pose moins de problèmes aux anciens navigateurs que la propriété CSS float.
Le positionnement fixé ou absolu n'est pas à employer dans tous les cas et ne peut pas toujours remplacer la propriété CSS float, employée précédemment dans la présentation en colonnes avec les CSS.
Les éléments fixés ne peuvent pas défiler, même pas s'ils sont partiellement invisibles dans une fenêtre d'affichage trop petite, ou à cause d'une taille de police trop grande. C'est pourquoi ce positionnement ne peut être favorable que pour des éléments prenant peu de place. Car il serait fâcheux que, dans un menu riche, le dernier lien justement, qui mène par exemple à une page d'informations légales, soit placé hors affichage.
Comme Internet Explorer jusqu'à la version 6 comprise est le seul navigateur actuel à ne pas reconnaître la position:fixed, une adaptation pour ce seul navigateur suffit pour utiliser cette propriété CSS. Pour cela, le code suivant est à placer dans la partie <head> du code source HTML:
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#defilement {
height: 100%; width: 100%; overflow: auto;
}
#contenu {
position: static;
}
}
</style><![endif]-->
Pour rendre accessible ces indications CSS (encore) pas valables pour Internet Explorer 5 et 6, elles sont reliées par un commentaire conditionnel dans le fichier HTML. Vous pouvez aussi transférer les définitions CSS dans cette partie <style> avec @import, ou bien utiliser une élément <link>.
Pour commencer, une hauteur de 100% est définie pour la partie affichée et grâce à la propriété CSS overflow-y:hidden, prévue pour CSS niveau 3, une (double) barre de défilement est évitée. Dans le code source les éléments à défiler ont été groupés par un div#defilement, qui devra remplir toute la partie d'affichage et qui prendra en charge le défilement par overflow:auto. Le contenu est à placer explicitement avec position:static, bien que cela corresponde à la valeur par défaut.
Le div#fixe avec le menu est placé dans le code source en dehors de l'élément dorénavant défilable, et (pour Internet Explorer jusqu'à la version 6), positionné de manière absolue. Cela l'exclut de la partie à défiler et le rattache à l'écran.
Il est important que vous utilisiez cette adaptation (par @media screen) uniquement pour le média de sortie écran, car une barre de défilement ne serait d'aucune utilité à l'impression.
|
| |
 |
Barres de menu avec les CSS
|
 |
Présentation en colonnes avec les CSS
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Mise en page avec les CSS |
|
© 2007 Redaktion SELFHTML / © 2007 Traduction Beate Niklewicz
selfhtml@fr.selfhtml.org