css faciles

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
Valid HTML 4.01 Transitional

Un menu fixe en CSS (pseudo-frame)

solution avec hauteur calculée en javascript

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%;}
#bloc-fixe, #contenu {
position:absolute;
width:100%;
}
#contenu {
position:absolute;
height: expression(document.documentElement.clientHeight - 85);
}
</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&ccedil;on d'obtenir un menu fixe en haut, avec un bloc d&eacute;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&eacute;filements verticaux (ascenseur de droite) sont ind&eacute;pendants, on parle de &quot;pseudo-frames&quot;.</p>
<p>Cette page a &eacute;t&eacute; test&eacute;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&eacute; en fin de page donne le focus &agrave; l'&eacute;l&eacute;ment &quot;contenu&quot; (bloc de droite) afin de faciliter la navigation par le clavier. Pour les internautes ayant d&eacute;sactiv&eacute; le javascript, cette petite facilit&eacute; dispara&icirc;tra. Ils seront donc oblig&eacute;s de cliquer sur le bloc de droite avant de pouvoir naviguer &agrave; l'aide des fl&egrave;ches du clavier. </p>
<p><strong>CODE : </strong></p>
</div>
<script type="text/javascript">
document.getElementById("contenu").focus()
</script>
</body>
</html>