Cette page est en rapport avec :
La mise en page par css
Les pseudo-frames en CSS
Page d'exemple extraite du site
css-facile
Cette mise en page illustre la façon d'obtenir un menu fixe en haut, avec un bloc défilant dans la partie basse et ce, quel que soit le navigateur affichant la page.
Quand on scinde une page en plusieurs blocs dont les défilements verticaux (ascenseur de droite) sont indépendants, on parle de "pseudo-frames".
Cette page a été testée et s'affiche correctement sur :
Un petit code javascript situé en fin de page donne le focus à l'élément "contenu" (bloc de droite) afin de faciliter la navigation par le clavier. Pour les internautes ayant désactivé le javascript, cette petite facilité disparaîtra. Ils seront donc obligés de cliquer sur le bloc de droite avant de pouvoir naviguer à l'aide des flèches du clavier.
CODE :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Exemple de menu fixe en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
html, body {overflow:hidden;margin:0px;padding:0px;}
body { font-family: trebuchet ms,arial,tahoma,verdana,sans-serif;}
code {font-size:1em;}
#bloc-fixe {
position:fixed;
overflow:auto;
right:0px;
left:0px;
top:0px;
height:80px;
border:solid 1px;
background-color:#F7F3EA;
font-size:90%;
}
#contenu {
position:fixed;
overflow:auto;
right:0px;
left:0px;
bottom:0px;
top:85px;
border:solid 1px;
background-color:#86ECB9;
}
</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]-->
</head>
<body>
<div id="bloc-fixe">
<a href="index.php" style="position:absolute;left:10px"><img src="images/logo-css.jpg" alt="css faciles" border="0" ></a>
<p align="center" style="position:absolute;right:10px;margin-top:8px">
Cette page est en rapport avec : <br>
<a href="mise-en-page.php#dimensions_implicite" target="_blank">La mise en page par css</a><br>
<a href="pseudo-frames.php" target="_blank">Les pseudo-frames en CSS </a></p>
<p align="center" style="margin-top:8px">Page d'exemple extraite du site<br>
<a href="index.php">css-facile</a><br>
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img style="margin-top:8px;" src="images/valid-html401.gif" alt="Valid HTML 4.01 Transitional" border="none"></a></p>
</div>
<div id="contenu">
<h1 align="center">Un menu fixe en CSS (pseudo-frame)</h1>
<p>Cette mise en page illustre la façon d'obtenir un menu fixe en haut, avec un bloc défilant dans la partie basse et ce, quel que soit le navigateur affichant la page.</p>
<p>Quand on scinde une page en plusieurs blocs dont les défilements verticaux (ascenseur de droite) sont indépendants, on parle de "pseudo-frames".</p>
<p>Cette page a été testée et s'affiche correctement sur :</p>
<ul>
<li>Internet Explorer 5.01 PC</li>
<li>Internet Explorer 5.5 PC</li>
<li>Internet Explorer 6</li>
<li>Intenet Explorer 7</li>
<li>Mozilla 1.7.8</li>
<li>Firefox 2.0.0.4</li>
<li>Opera 9.21</li>
</ul>
<p>Un petit code javascript situé en fin de page donne le focus à l'élément "contenu" (bloc de droite) afin de faciliter la navigation par le clavier. Pour les internautes ayant désactivé le javascript, cette petite facilité disparaîtra. Ils seront donc obligés de cliquer sur le bloc de droite avant de pouvoir naviguer à l'aide des flèches du clavier. </p>
<p><strong>CODE : </strong></p>
</div>
<script type="text/javascript">
document.getElementById("contenu").focus()
</script>
</body>
</html>