Page modèle

Voir cet exemple en action.

La page du menu

Ci-dessous il y a un modèle afin de remplacer les IFRAME et les FRAMSET. Voici la page principale :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr-CA">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Alternatif aux cadres</title>
    <link rel="stylesheet" href="./Styles.css" type="text/css" media="projection, screen, tv, print">
  </head>

  <body>
    <p>Contenu du document</p>
  
    <!-- Remplir la page pour s'assurer que le menu reste fixé. -->
    <ol>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
      <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>

    <!-- L'objet ci-dessous est requise pour le menu. Inclure sur chaque page! -->
    <div>
      <object data="./Menu.html type="text/html" id="menu">
        <!-- Au cas où que le navigateur ne reconnais pas les objets -->
        <div id="pasObjet">Votre navigateur ne supporte pas les objets, veuillez <a href="./Menu.html">visiter la page du menu</a></div>
      </object>
    <div>
  </body>
</html>

Voici la page des styles (./Styles.css) :

body {
  margin: 15px 15px 15px 215px; /* Le dernier nombre doit considérer le menu. */
}

#menu {
  border: 0px solid #FFFFFF;
  height: 100%;
  left: 0px;
  position: fixed; /* Si l'utilisateur se déplace sur la page, le menu reste à la même place. */
  top: 0px;
  width: 200px;
}

#menu>object {
  border: 0px solid #FFFFFF;
  height: 100%;
  margin: 0px;
  width: 200px;
}

#pasObjet {
  left: 0px;
  height: 60%;
  margin: 20%;
  position: fixed;
  top: 0px;
  width: 60%;
}