<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Pseudo frames avec « height: expression »</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
html {
margin: 0px;
padding: 0px;
overflow: hidden;
}
img {
border: none;
}
#top {
height: 52px;
BACKGROUND: #FFEFC5;
overflow: auto;
text-align: center;
}
#content {
position: absolute;
top: 52px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #F9FFE1;
padding: 20px;
}
.decal1 {
padding-left: 30px;
}
.decal2 {
padding-left: 30px;
}
.centered {
text-align: center;
}
.rouge {color: #FF0000}
</style>
<!--[if IE 6]>
<style type="text/css">
#content {
height: expression(document.documentElement.clientHeight -52 -40);
width: expression(document.documentElement.clientWidth -0 -40);
}
</style>
<noscript>
<style>
html {OVERFLOW: auto;}
</style>
</noscript>
<![endif]-->
<!--[if lt IE 6]>
<style type="text/css">
html {OVERFLOW: auto;}
#content {OVERFLOW: hidden;}
</style>
<![endif]-->
</head>
<body>
<div id="top">
<h3 style="padding-top: 5px;top: 5px;font-size: small;"><a href="http://www.rankspirit.com/indexfr.php"><img src="paporange.gif" width="20" height="18" alt="rankspirit" /> Visiter le site RankSpirit</a> • <a href="#lorem">Aller au début du texte</a> • <a href="alan2_zapman2_code.htm">Voir le code source de cette page</a> </h3>
</div>
<div id="content">
<h2 class="centered"><a name="lorem" id="lorem"></a>Comment utiliser les CSS pour obtenir une mise en page avec un menu fixe<br />
sur tous les navigateurs </h2>
<h4 class="centered">Solution avec une utilisation conditionnelle de Javascript </h4>
<p> Faire en sorte de conserver un menu fixe, même lorsque l'internaute fait défiler le texte de la page, est le rêve de beaucoup de concepteurs de site. Cette disposition facilite grandement la navigation en proposant à l'internaute un repère fixe et toujours présent.</p>
<p>L'expérience démontre que la présence d'un menu fixe améliore le confort de navigation, fidélise les visiteurs et augmente sensiblement le temps passé sur le site et l'appréciation générale que les internautes en font.</p>
<p>Ce besoin tout à fait évident trouve une solution simple et élégante à l'aide des CSS. Malheureusement, si cette solution fonctionne parfaitement avec tous les navigateurs "modernes" (FireFox, Mozilla, Opera, ...), Internet Explorer 5.5 et 6.x ne reconnaissent pas les instructions qui permettent de réaliser ce type de mise en page (mais comme nous allons le voir, il y a une astuce !)</p>
<p>Le principe des "frames" permet de régler le problème. Les "frames" sont hélas un système obsolète qui ne répond plus aux normes Web actuelles et qui présente de graves inconvénients notamment en ce qui concerne le référencement des sites qui l'utilisent.</p>
<p>Devant ces difficultés, la plupart des concepteurs de site renoncent aux formidables avantages que présentent les menus fixes.</p>
<p>La solution présentée ici fait le pari de contourner l'ensemble des obstacles ennoncés ci-dessus et de proposer un code conforme avec les normes Web actuelles et compatible avec la quasi-totalité des navigateurs existant (dont Internet Explorer).</p>
<p>Mille merci à Alan du forum <a href="http://forum.alsacreations.com/forum.php">Alsacréation</a> pour son aide dans la mise au point de cette solution ainsi qu'à "<a href="http://batraciens.net/css-astuces/zone-fixe-1.htm">Batraciens</a>", l'<a href="http://www.grappa.univ-lille3.fr/polys/htmlcss-2004/index.php?page=css_ie">Université de Lille</a>, <a href="http://tagsoup.com/-dev/null-/css/fixed/">TagSoup</a> et <a href="http://www.fu2k.org/alex/css/frames/">Alex Robinson</a> pour les pages qu'ils ont déjà publié sur ce thème. </p>
<p> </p>
<h3><strong>1- Principes de base du CSS</strong></h3>
<p>Pour comprendre le principe de mise en page proposée, il est d'abord essentiel de bien comprendre les principes de base du positionnement des blocs avec le CSS. Si toutefois vous vous sentez parfaitement à l'aise avec le CSS, vous pouvez <a href="#paragraphe2">sauter ce paragraphe</a>.</p>
<div class="decal1">
<h4>a) Emboîtement des blocs </h4>
<div class="decal2">
<p class="rouge"><html><br />
<body><br />
<div id="mon_style_css"><br />
</div><br />
</body><br />
</html> </p>
<p>Les blocs définis en CSS peuvent s'emboîter les uns dans les autres. Le premier bloc d'une page est le bloc <html> dans lequel vient se positionner le bloc <body>. </p>
<p>Dans un cas de ce type, on dit que le bloc <html> est le "parent" et que le bloc <body> et le fils. Tous les blocs CSS que vous créerez seront des "enfants" du bloc <body> à l'intérieur duquel ils se positionneront. Vos propres blocs pourront eux-même avoir des "enfants", ou des "frères" (blocs ayant le même parent).</p>
</div>
<h4>b) Ascenseurs automatiques par défaut </h4>
<div class="decal2">
<p class="rouge">overflow: auto </p>
<p>- Par défaut, le bloc <html> occupe toute la fenêtre du navigateur (bien qu'Internet Explorer réserve une petite marge à droite et une autre en bas pour les ascenseurs), et le bloc <body> remplit complètement le bloc <html>. </p>
<p>- Par défaut, le bloc <html> est pourvu d'ascenseurs automatiques. Si vous remplissez le bloc <body> avec une grande quantité de texte et d'image, un ascenseur sera nécessaire pour visualiser l'ensemble du contenu de la page. Etant donné que le bloc <body> n'a généralement pas d'instruction particulière concernant la gestion des ascenseurs il renvoi la demande à son bloc parent, c'est à dire <html>. Ce bloc affiche alors un ascenseur qui permet de faire défiler l'ensemble de son contenu, c'est à dire l'ensemble du bloc <body> (une vraie partie de ping-pong !).</p>
<p>La quasi-totalité des sites que vous pouvez visiter sur le Web utilise ce système d'ascenseur automatique : le bloc <body> est rempli avec l'ensemble du contenu à présenter et son ascenseur permet de faire défiler l'ensemble du contenu comme on voit défiler un paysage à travers la fenêtre d'un véhicule. </p>
<p>A l'inverse, notre proposition de mise en page vous permet de positionner des ascenseurs indépendants sur chaque bloc et multiplie donc le nombre de "fenêtres" permettant de faire défiler du contenu.</p>
</div>
<h4>c) Positionnements " static ", " fixed ", " relative " et " absolute " </h4>
<div class="decal2">
<p class="rouge"><strong>position: static </strong></p>
<p>Le type de positionnement par défaut de tout bloc est "<span class="rouge">static</span>". Avec cette propriété, le bloc sera positionné dans le "flux" de la page. C'est à dire que si ce bloc est placé au milieu d'un texte, il se déplacera avec le texte. Ajoutez du texte au dessus et le bloc descend. </p>
<p>Quand un bloc est positionné en "<span class="rouge">static</span>", les propriétés, <span class="rouge">top, left, bottom, right</span> et <span class="rouge">margin</span> sont ignorées et ne servent à rien.</p>
<p class="rouge"><strong>position: relative </strong></p>
<p>Le bloc reste positionné dans le flux, mais peut être plus ou moins décalé à l'intérieur du flux grace aux propriétés <span class="rouge">top, left, bottom, right</span> et <span class="rouge">margin-top, margin-left, margin-bottom, margin-right</span> .</p>
<p class="rouge"><strong>position: absolute </strong></p>
<p>Le bloc sort du flux, c'est à dire qu'il ne tient plus du compte des autres éléments contenus dans son bloc parent. </p>
<p>Ne vous laissez cependant pas tromper par le terme "<span class="rouge">absolute</span>" : cet "absolute" est en quelque sorte relatif, puisque les propriétés <span class="rouge">top, left, bottom, right </span>et <span class="rouge">margin</span> positionneront le bloc par rapport à son bloc parent. Si le bloc parent a pour propriété "<span class="rouge">left: 10px</span>" et que votre bloc fils a pour propriété "<span class="rouge">left: 20px</span>", il sera en fin de compte décalé de 10+20 = 30px par rapport au bord du bloc qui contient le bloc parent.</p>
<p class="rouge"><strong>position: fixed </strong></p>
<p>Le bloc est positionné par rapport à la fenêtre du navigateur, indépendamment du flux et de la position de son bloc parent. C'est a priori la propriété idéale pour définir un menu fixe dans une page mouvante. Malheureusement, Internet Explorer 5.5 et 6.x ne reconnaissent pas cette propriété que nous n'utiliserons donc pas dans notre conception.</p>
</div>
<h4>d) Taille des blocs </h4>
<div class="decal2">
<p class="rouge"><strong>width: xxpx ; height: xxpx </strong></p>
<p>Quand on aborde la mise en page, le premier réflexe consiste à créer des blocs de hauteur et de largeur fixe, définies par " <span class="rouge">width: </span>" et " <span class="rouge">height: </span>". Cette façon de procéder est toutefois bien mal adaptée à la diversité des écrans existant dans le monde. Pour que votre site reste utilisable par tout les internautes, vous devrez fixer des dimensions très faibles qui ne conviendront pas aux utilisateurs équipés de grands écrans.</p>
<p class="rouge"><strong>width: xx% ; height: xx% </strong></p>
<p>La première option consiste à fixer une hauteur et une largeur en %. Notez toutefois que cela ne pourra fonctionner que si le bloc parent a des propriétés de dimension clairement définies (le pourcentage est en effet calculé par rapport aux dimensions du bloc parent). Si l'idée est de fixer la taille d'un bloc à 100% de la hauteur ou de la largeur, ce type de dimensionnement est parfait. Si vous souhaitez par contre contre faire cohabiter plusieurs blocs côte à côte, il est essentiel que tous ces blocs soient dimensionnés en pourcentages. Mélanger un dimensionnement fixe (exprimé en px) avec un dimensionnement en pourcents n'est pas une bonne idée car le total de vos hauteurs ou de vos largeurs ne pourra plus être égal à 100%.</p>
<p class="centered"> <img src="fixe-pourcents.gif" width="300" height="107" alt="hauteur fixe ou en pourcentage" /></p>
<p> </p>
<p><strong>Taille fixée par <span class="rouge">top, left, bottom et right</span> </strong></p>
<p>Si on ne précise ni largeur ni hauteur, la taille d'un bloc peut être calculée à parti de la position de ses bords. </p>
<p>Par exemple : </p>
<p>- <span class="rouge">top: 0; bottom: 0;</span> forcera la taille du bloc à 100% de la hauteur du bloc parent<br />
-<span class="rouge"> top: 0; bottom: 10px;</span> forcera la taille du bloc à la hauteur du bloc parent moins 10 pixels. </p>
<p>Cette solution est idéale pour mettre en place un bloc exploitant toute la place laissée libre par un bloc de dimensions fixes.<br />
Attention toutefois : ce type de dimensionnement ne fonctionne pas avec Internet Explorer dans ses versions antérieures à la 7.0.</p>
<p> </p>
</div>
</div>
<h3>2- <a name="paragraphe2" id="paragraphe2"></a>Comment contourner ces limitations</h3>
<div class="decal1">
<p>A la lecture de ce qui précède, on s'apperçoit que les limitations d'Internet Explorer 5.5 et 6.x présentent deux difficultés importantes pour la réalisation d'une mise en page avec menu fixe. Voici comment nous avons contourné ces difficultés.</p>
<h4>- Position: fixed n'est pas reconnu par Internet Explorer 5.5 et 6.0 </h4>
<p>à) L'ascenseur automatique du bloc <html> est désactivé à l'aide de l'instruction overfow: hidden . De ce fait, le "flux" de ce bloc principal est bloqué (son contenu restera fixe). </p>
<p>b) Tous les blocs (y compris le menu et le bloc qui contiendra le texte) sont positionnés dans le bloc <body> à l'aide de position: absolute . </p>
<p><html> ayant un flux bloqué, le bloc <body> hérite de ses propriétés et restera également fixe. Dans cette configuration particulière, la position "<span class="rouge">absolute</span>" devient donc équivalente à la position "<span class="rouge">fixed</span>". </p>
<p>c) On crée un bloc qui contiendra le texte de la page et on lui donne l'attribut overflow: auto ; ce qui le dotera d'ascenseurs permettant de faire défiler son contenu. </p>
<p><strong>En résumé </strong> : l'ascenseur de la page est désactivé et sera remplacé par l'ascenseur d'un bloc indépendant qui contiendra le texte de la page. </p>
<p><strong>Note </strong>: une fois cette configuration mise en place, il est parfaitement possible de créer dans notre page plusieurs blocs indépendants pourvus d'ascenseurs et contenant chacun un texte. Le bloc qui contiendra les menus pourra lui-même être pourvu d'un ascenseur afin de gérer les menus trop longs pour tenir dans la page (n'oubliez pas que la page peut avoir n'importe quelle dimension selon le type d'écran de l'utilisateur et la taille qu'il souhaite donner à la fenêtre du navigateur). </p>
<p> </p>
<h4>- <span class="rouge">top, left, bottom et right</span> permettent de donner une position, mais ne permettent pas de donner une taille avec Internet Explorer 5.5 et 6.0 </h4>
<p>Le bloc fixe contenant le menu ayant généralement une largeur et/ou une hauteur constante, il est donc délicat d'exploiter le reste de l'espace avec un bloc de taille variable. Cette difficulté est contournée par deux biais : </p>
<p>a) Une feuille de style particulière est fabriquée à l'attention d'Internet Explorer. Dans cette feuille, la dimension des blocs est calculée en Javascript. On obtient ainsi exactement le même résultat que si IE était capable de calculer la taille d'un bloc en fonction de la position de ses bords. </p>
<p>b) Une autre feuille de style est générée pour les utilisateurs équipés d'Internet Explorer et ayant désactivé le Javascript. Dans ce cas, on réactive l'ascenseur du bloc <html> et on se retrouve avec une page défilante traditionnelle (les menus ne seront plus fixes dans ce cas particulier). </p>
<p><strong>En résumé </strong> : les feuilles de style générées par CSS Frame Player permettent d'obtenir une compatibilité avec l'ensemble des navigateurs, quelles que soient leurs versions. Le menu ne sera toutefois pas fixe pour les utilisateurs équipés d'Internet Explorer et ayant désactivé le Javascript (1 à 10% des utilisateurs, selon les études réalisées sur le sujet).</p>
<p> </p>
</div>
<h3>3- Les limites de cette solution de mise en page : </h3>
<div class="decal1">
<p><strong>a)</strong> Les blocs horizontaux que vous définirez comme "fixes" consomment une partie de la hauteur de page disponible. Prenez garde à ne pas trop réduire cette hauteur sous peine de forcer vos utilisateurs à faire défiler le texte principal dans un rectangle "écrasé" offrant une faible visibilité. </p>
<p><strong>b)</strong> Si votre ou vos bloc(s) fixes ont une hauteur fixe (le "header"/en-tête, par exemple), attention à ce qui peut se produire si l'utilisateur augmente la taille des polices : le texte contenu dans ces blocs risque d'être "rogné" et de devenir illisible. Essayez donc de réserver les blocs de hauteur fixe à l'affichage d'images ou placez des ascenseurs dans ces blocs. Nous vous conseillons en particulier de placer un ascenseur " auto " dans votre bloc menu pour être sûr que l'ensemble de votre menu sera toujours accessible. </p>
<p><strong>c)</strong> La navigation à l'aide du clavier n'est plus possible pour Internet Explorer 5.5 et 6.x ainsi que pour Firefox antérieur à la version 1.5 : impossible de "scroller" directement via les flèches du clavier ou via la molette de souris. Un clic dans le bloc "scrollable" permet toutefois de rétablir ces fonctionnalités. A partir de la version 1.5 de FireFox, comme pour Opera, on peut également rétablir ces fonctionnalités en déplaçant le curseur sur le bloc "scrollable" à l'aide de la touche de tabulation.</p>
<p>Cet inconvénient pourrait être réglé avec un petit script donnant le "focus" au bloc principal au moment de l'ouverture de la page. </p>
<p><strong>d)</strong> Comme nous l'indiquons plus haut, les utilisateurs équipés d'Internet Explorer 5.5 et 6.x qui ont désactivé le Javascript (1 à 10% des utilisateurs, selon les études réalisées sur le sujet) ne bénéficieront pas des menus fixes. Ils pourront toutefois naviguer sur le site en mode "traditionnel". </p>
<p> </p>
</div>
<h3>4- Une variante sans utilisation de Javascript </h3>
<p><a href="alan3_sans_javascript.htm">Une variante de ce type de mise en page</a> n'utilisant pas le Javascript est également proposée sur ce site.</p>
<p class="centered"><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid HTML 4.01 Transitional" /></a></p>
</div>
</body></html>