Le javascript n'est utilisé que pour Internet Explorer dans ses versions antérieures à la version 7. Pour les autres navigateurs, ce design fonctionnera même si l'internaute à désactivé le javascript.
Cette mise en page illustre la façon de créer un menu déroulant à l'aide de styles CSS. Ce menu est opérationnel pour tous les navigateurs excepté pour les internautes utilisant Explorer 5.5 et 6 et ayant désactivé le javascript.
CODE :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Exemple de design fluide avec menu fixe par javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
html { overflow:hidden; }
body { overflow:hidden;
font-family: trebuchet ms,arial,tahoma,verdana,sans-serif;}
code {font-size:1em;}
#bloc-fixe {
position:fixed;
border:solid 1px;
background-color:#F7F3EA;
width:118px;
top:10px;
left:10px;
overflow:auto;
bottom:10px;
font-size:90%;
}
#bloc-variable {
position:fixed;
border:solid 1px;
background-color:#66CC99;
top:10px;
left:138px;
bottom:10px;
right:0px;
padding:10px;
overflow:auto;
}
</STYLE>
<!--[if lt IE 7]>
<STYLE type=text/css>
#bloc-fixe, #bloc-variable {
position:absolute;
height: expression((document.documentElement.clientHeight
? document.documentElement.clientHeight
: document.body.clientHeight) - (10+10) + "px");
}
#bloc-variable {
width: expression(( document.documentElement.clientWidth
? document.documentElement.clientWidth
: document.body.clientWidth) - (138+1) + "px");
}
</STYLE>
<noscript>
<STYLE type=text/css>
#bloc-fixe, #bloc-variable {height:100%;top:0px}
#bloc-variable { width:650px}
html { overflow:auto; }
body { overflow:auto; }
</STYLE>
</noscript>
<![endif]-->
</head>
<body>
<div id="bloc-fixe">
<p><a href="index.php"><img src="images/logo-css.jpg"
alt="css faciles" width="118" height="80"
vspace="20" border="0"></a></p>
<p align="center">Page d'exemple extraite du site<br>
<a href="index.php">css-facile</a></p>
</div>
<div id="bloc-variable">
<h1>Menu fixe, design fluide, avec Javascript </h1>
<p>Cette mise en page illustre la façon d'obtenir un
menu fixe à gauche, avec un bloc de largeur variable
dans la partie droite et ce, quel que soit le navigateur
affichant la page.</p>
<p>Quand la largeur d'un bloc s'adapte de cette façon
à la largeur de la fenêtre du navigateur,
on dit que l'on a affaire à un "design fluide"</p>
<p>Cette page a été testée et s'affiche
correctement sur :</p>
<ul>
<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>Pour les internautes utilisant Explorer 5.5 et 6 et ayant
désactivé le javascript, le design perd son
côté fluide, mais le contenu reste lisible
grâce à un style dédié à
ce cas de figure.
</p>
<pre><code>Code de la page</code><pre>
</div>
<script type="text/javascript">
document.getElementById("bloc-variable").focus()
</script>
</body>
</html>