Un menu en CSS

1. Présentation

Réaliser un menu en HTML 4.1 et CSS 1 n'est pas difficile : quelques divisions de document (balises <DIV>) et le tour est joué ! Le seul problème est le rendu car Microsoft Internet Explorer ne respecte pas complètement les recommandations du W3C. Ce qui permet d'afficher du texte uniquement pour Microsoft Internet Explorer sans passer par javascript.

Vous êtes sous Microsoft Internet Explorer et ceci est le paragraphe 2, qu'on ne voit pas avec Firefox. Etonnant, non ?

Ainsi, avec Firefox, ce paragraphe est le paragraphe 2 alors que sous Microsoft Internet Explorer ceci est le paragraphe 3. Etonnant, non ? On peut bien sur inverser la tendance et ne rien afficher lorsqu'on est sous Microsoft Internet Explorer...

Un menu qui respecte les normes du W3C peut être fixé sur la page, sans être "perturbé" par le défilement du texte à l'intérieur du document, comme avec une frame, mais sans ses inconvénients (de référencement, d'impression, de marquage de page...). Ainsi, si vous cliquez sur le lien Références ce texte semble défiler alors que le menu à gauche ne bouge pas... avec Firefox, bien sûr. Sous IE, toute la page défile... Au passage, vous aurez remarqué que le lien change la couleur et le fond du texte, qu'il semble déplacer le texte... grâce à la propriété hover, et cela sans javascript. Bien pratique, ce CSS...

2. Discussion

Ce paragraphe est composé d'une simple balise <P> et ses marges suivent ce qui était défini dans la section <DIV> qui le contient. Il commence donc exactement au bord sous la valeur 2. qui correspond à la balise <H2>.

Par contre ce paragraphe est défini par la classe "texte" et ses marges sont légérements augmentées par rapport au paragraphe précédent. En conséquence, il bénéficie d'une retrait gauche et d'un retrait droit plus importants.

Nous ne rentrerons pas plus dans la discussion des positionnements, de la gestion du flux via les mode "block" et "inline", ni de l'importance des sélecteurs "class" et "id" car ces notions sont détaillées dans les références fournies.

3. Références

OpenWeb (apinc)

OpenWeb (eu)

Grappa

Boxes

4. Extraits de code-source

4.1 Source de la page




     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

     <HTML>
     <HEAD>
     <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
     <TITLE>Un menu en CSS</TITLE>
     <LINK REL="stylesheet" TYPE="text/css" HREF="menu.css"  MEDIA="screen">
     </HEAD>

     <BODY BACKGROUND="beige.jpg">

     <H1>
     Un menu en CSS
     </H1>

     <DIV CLASS="menu">

     <DIV CLASS="lienmenu">1.&nbsp;&nbsp;
        <A HREF="menu.htm#pres">Présentation      </A>
     </DIV>

     <DIV CLASS="lienmenu">2.&nbsp;&nbsp;
        <A HREF="menu.htm#disc">Discussion        </A>
     </DIV>

     <DIV CLASS="lienmenu">3.&nbsp;&nbsp;
        <A HREF="menu.htm#refs">Références        </A>
     </DIV>

     <DIV CLASS="lienmenu">4.&nbsp;&nbsp;
        <A HREF="menu.htm#srcs">Codes-Source      </A>
     </DIV>

     <DIV CLASS="lienlien">4.1&nbsp;&nbsp;
        <A HREF="menu.htm#page" CLASS="BOUTON">page        </A>
     </DIV>

     <DIV CLASS="lienlien">4.2&nbsp;&nbsp;
        <A HREF="menu.htm#styl" CLASS="BOUTON">style          </A>
     </DIV>

     <DIV CLASS="lienmenu">5.&nbsp;&nbsp;
        <A HREF="pdc.htm"      >Retour cours T.I  </A>
     </DIV>

     <DIV CLASS="lienbas">
     &nbsp;
     </DIV><!-- fin DIV lienbas -->
     <DIV CLASS="lienbas">
     <A TITLE="Validation HTML du W3C&nbsp;: ces pages respectent la norme"
        HREF="http://validator.w3.org/check/referer"><IMG border="0"
        SRC="validhtml.png"
        ALT="Valid HTML 4.01!"></A>
     </DIV><!-- fin DIV lienbas -->
     <DIV CLASS="lienbas">
     <A TITLE="Validation CSS du W3C&nbsp;: la feuille de style respecte la norme"
        HREF="http://jigsaw.w3.org/css-validator/check/referer"><IMG  border="0"
        SRC="vcss.png"
        ALT="Valid CSS!"></A>
     </DIV><!-- fin DIV lienbas -->

     </DIV><!-- fin DIV menuflottant -->

     <DIV CLASS="page">

     <DIV CLASS="texte">
     <H2><A NAME="pres">1. Présentation</A></H2>
     <P>
     Réaliser un menu en HTML 4.1 et CSS 1 n'est pas difficile : quelques
     divisions de document (balises &lt;DIV&gt;) et le tour est
     joué ! Le seul problème est le rendu car Microsoft Internet Explorer
     ne respecte pas complètement les recommandations du W3C. Ce qui permet
     d'afficher du texte uniquement pour Microsoft Internet Explorer sans
     passer par javascript.
     </P>

     <DIV CLASS="IE">
     <P CLASS="texte">
     Vous êtes sous Microsoft Internet Explorer et ceci est le paragraphe 2,
     qu'on ne voit pas avec Firefox.
     Etonnant, non ?
     </P>
     </DIV><!-- fin DIV IE -->

     <P>
     Ainsi, avec Firefox, ce paragraphe est le paragraphe 2  alors que sous
     Microsoft Internet Explorer ceci est le paragraphe 3. Etonnant, non ?
     On peut bien sur inverser la tendance et ne rien afficher lorsqu'on est
     sous Microsoft Internet Explorer...
     </P>

     <P>
     Un menu qui respecte les normes du W3C peut être fixé sur la page, sans
     être "perturbé" par le défilement du texte à l'intérieur du document, comme
     avec une frame, mais sans ses inconvénients (de référencement, d'impression,
     de marquage de page...). Ainsi, si vous cliquez sur le lien
     <A HREF="#refs" CLASS="BOUTON">Références</A> ce texte semble
     défiler alors que le menu à gauche ne bouge pas... avec Firefox, bien sûr.
     Sous IE, toute la page défile... Au passage, vous aurez remarqué que le lien
     change la couleur et le fond du texte, qu'il semble déplacer le texte...
     grâce à la propriété hover,
     et cela sans javascript. Bien pratique, ce CSS...
     </P>

     <H2><A NAME="disc">2. Discussion</A></H2>

     <P>
     </P>

     <H2><A NAME="refs">3. Références</A></H2>

     <P>
     </P>

     <H2><A NAME="refs">4. Extraits de code-source</A></H2>

     <H3><A NAME="styl">4.1 Source de la page</A></H3>

     <PRE>
     ...
     </PRE>

     <H3><A NAME="styl">4.2 Source de la feuille de style</A></H3>

     <PRE>
     ...
     </PRE>

     ...

     </BODY>
     </HTML>

4.2 Source de la feuille de style



     BODY {
       text-align:left;
       font-family: Helvetica, Arial Black, Wide Latin, sans-serif;
     }

     DIV.IE {
       background:#ffc;
       color:blue;
       border-color:blue;
       border-width:thin;
       border-style:solid;
       margin:25px;
       padding:25px;
     }

     HTML>BODY DIV.IE {
       display:none;
     }

     div.page {
       margin-left: 19%;
       margin-right: 4%;
       margin-left: 22%;
       padding-bottom: 0.5em;
       padding-left: 2em;
       padding-top: 0.5em;
       text-align: left;
     }
     div.menu {
       float: left;
       margin-left: 1.0em;
       margin-top: 1.5em;
       position: fixed;
       width: 20%;
       background:#EEEEEE;
       padding:0.5em;
       border-color:black;
       border-width:thin;
       border-style:solid;
       text-align:right;
       top:1.5em;
     }
     DIV.lienmenu {
       bottom:1.5em ;
       padding:0.8em;
       text-align:left;
     }
     DIV.lienlien {
       bottom:1.5em ;
       margin-left: 1.5em;
       padding:0.3em;
       text-align:left;
     }
     DIV.lienbas {
       margin:0;
       padding:0.5em;
       text-align:center;
     }
     H1 {
       margin-top:0.5em;
       text-align:center;
     }
     A.BOUTON:link{
       width:80px;
       text-decoration:none;
       color:blue;
       text-align:center;
       background:#EEEEEE;
       padding:5px;
       border-width:2px;
     }
     A.BOUTON:visited{
       width:80px;
       text-decoration:none;
       color:blue;
       text-align:center;
       background:#EEEEEE;
       padding:5px;
       border-width:2px;
     }
     A.BOUTON:hover{
       width:80px;
       text-decoration:none;
       color:#990000::
       text-align:center;
       background:#990000;
       font-weight:bold;
       color:yellow;
       padding:5px;
       border-width:2px;
     }
     .texte {
       margin:25px;
       padding:25px;
       text-align:justify;
       background:white;
     }

retour haut de page