4.1 page
4.2 style
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...
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.
<!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.
<A HREF="menu.htm#pres">Présentation </A>
</DIV>
<DIV CLASS="lienmenu">2.
<A HREF="menu.htm#disc">Discussion </A>
</DIV>
<DIV CLASS="lienmenu">3.
<A HREF="menu.htm#refs">Références </A>
</DIV>
<DIV CLASS="lienmenu">4.
<A HREF="menu.htm#srcs">Codes-Source </A>
</DIV>
<DIV CLASS="lienlien">4.1
<A HREF="menu.htm#page" CLASS="BOUTON">page </A>
</DIV>
<DIV CLASS="lienlien">4.2
<A HREF="menu.htm#styl" CLASS="BOUTON">style </A>
</DIV>
<DIV CLASS="lienmenu">5.
<A HREF="pdc.htm" >Retour cours T.I </A>
</DIV>
<DIV CLASS="lienbas">
</DIV><!-- fin DIV lienbas -->
<DIV CLASS="lienbas">
<A TITLE="Validation HTML du W3C : 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 : 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 <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.
</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>
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;
}