superposition de blocs

Pseudo-frames en CSS

Comment avoir un menu fixe avec un contenu mobile

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 sites Internet. Les "frames", souvent utilisés dans ce but, présentent hélas de graves inconvénients. Voici comment obtenir ce résultat (sans les inconvénients) à l'aide de CSS.

Sélection de liens concernant
les
"pseudo-frames"

Ces liens pointent vers des pages dont les contenus complètent notre article.

Zones fixes
Batraciens propose 4 exemples de zones fixes compatibles avec IE6. Dommage toutefois que les propositions passent par des hacks plutôt que par des feuilles de style altérnatives.

Utiliser les bugs d'Explorer
Une explication parfaitement claire du principe de base permettant de simuler la propriété "fixed" avec IE6. Bien que basée sur un "hack", elle est beaucoup plus propre que l'exemple de "Batraciens"

Position "fixed" for Internet Explorer
Voilà un feu d'artifice d'exemples trés détaillés et clairement commentés pour ceux que l'anglais n'effraie pas.

Mots clés
de cette page :

Création de site Web, design de site Web, conception de sites Internet.

 

Cliquez ici pour voir un exemple simple de pseudo-frames avec menu vertical

Cliquez ici pour voir un exemple simple de pseudo-frames avec menu horizontal

Les avantages des "pseudo-frames"

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.

Ce besoin tout à fait évident trouve une solution simple et élégante à l'aide de la propriété CSS nommée "fixed". 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 !)

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.

Devant ces difficultés, la plupart des concepteurs de site renoncent aux formidables avantages que présentent les menus fixes.

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 totalité des navigateurs existant (dont Internet Explorer 6).

A propos des ascenseurs

Par défaut, le bloc <html> d'une page Web 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 !).

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.

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.

L'ascenseur automatique par défaut du bloc <HTML> va donc être inactivé tandis que nous allons créer un ou plusieurs blocs internes qui seront pourvus d'ascenseurs indépendants. Cette disposition va permettre de faire défiler le contenu de certains blocs tandis que les autres blocs restent fixes sur la page.

Exemple 1 : un menu fixe en partie gauche de la page

Voir un exemple

Internet Explorer 5.5 et 6.x ne reconnait pas la propriété "fixed" qui permet de figer la position d'un bloc sur une page.

Solution :

a) 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).

html, body {overflow:hidden; margin:0px; padding:0px;}

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: fixed dans notre déclaration de style principale
position: absolute pour la déclaration de style destinée à Internet Explorer 5.5 et 6

#bloc-fixe {
  position:fixed;
  overflow:auto;
  left:0px;
  width:118px;
  bottom:0px;
  top:0px;
}
#contenu {
  position:fixed;
  overflow:auto;
  left:138px;
  width:450px;
  bottom:0px;
  top:0px;
}
<!--[if lt IE 7]>
  <STYLE type=text/css>
    html, body {height:100%;}
    #bloc-fixe, #contenu {
      position:absolute; height:100%;
    }
  </STYLE>
<![endif]-->

Notez le height:100% indispensable pour que IE 5.5 et 6 attribuent une taille au blocs pourvus d'un ascenseur. Sans cette taille, l'ascenseur n'apparaîtra pas.

Pour les autres navigateurs, cette déclaration n'est pas utile car les deux déclarations bottom:0px; et top:0px; suffisent à fixer une taille implicite aux blocs.

En résumé : 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.

Note : 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).

Exemple 2 : un bloc fixe horizontal

Voir un exemple

La partie se complique un peu car l'instruction height:100% que nous avons inclus dans notre exemple précédent était indispensable pour faire apparaître l'ascenseur dans IE 5.5 et 6.

Pour dégager l'espace nécessaire à un bloc horizontal fixe , on peut utiliser 2 méthodes différentes :

1- Attribuer un padding au bloc html

Cette méthode un peu étrange aura pour effet de réduire la taille du bloc "contenu".


html, body {overflow:hidden; margin:0px; padding:0px;}
#bloc-fixe {
  position:fixed;
  overflow:auto;
  right:0px;
  left:0px;
  top:0px;
  height:80px;
}
#contenu {
  position:fixed;
  overflow:auto;
  right:0px;
  left:0px;
  bottom:0px;
  top:85px;
}
</STYLE>

<!--[if lt IE 7]>
  <STYLE type=text/css>
    html, body {height:100%;}
    html {padding-top:85px}
    #bloc-fixe, #contenu {
      position:absolute;
      width:100%;
    }
    #contenu {
      position:absolute;
      height:100%;
    }
  </STYLE>
<![endif]-->

Bien qu'elle ait l'avantage d'être simple, cette méthode est à déconseiller en raison de deux inconvénients majeurs :

a) Elle ne convient pas aux mises en page complexes comportant plusieurs blocs de contenu avec ascenseur.

b) Elle perturbe le fonctionnement des liens internes du type <a name="nom_de_l_ancre"> : en cas de clic sur un lien vers cette ancre (<a href= "#nom_de_l_ancre">), Internet Explorer va déplacer l'ascenseur de façon à positionner l'ancre en haut de page, c'est à dire sous le menu. L'ancre ne sera pas visible !

2- Remplacer le height:100% par une expression calculée en javascript

Voir un exemple

Cette astuce est un grand classique permettant de compenser l'absence de dimensionnement implicite de IE 5.5 et 6.

html, body {overflow:hidden; margin:0px; padding:0px;}
#bloc-fixe {
  position:fixed;
  overflow:auto;
  right:0px;
  left:0px;
  top:0px;
  height:80px;
}
#contenu {
  position:fixed;
  overflow:auto;
  right:0px;
  left:0px;
  bottom:0px;
  top:85px;
}
</STYLE>

<!--[if lt IE 7]>
  <STYLE type=text/css>
    html, body {height:100%;}
    html {padding-top:85px}
    #bloc-fixe, #contenu {
      position:absolute;
      width:100%;
    }
    #contenu {
      position:absolute;
      
height: expression (document. documentElement .clientHeight - 85);
    }
  </STYLE>
<![endif]-->

Les limites de ce type de mise en page :

a) 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é.

b) 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.

c) 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.

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.

<script type="text/javascript">
  document.getElementById("contenu").focus()
</script>

Combiner un menu gauche fixe avec un design fluide

Consultez notre page consacrée au design fluide.




Le copyright de cette page appartient à css-faciles.

This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.

Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Dans cette page :
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu