Menu horizontal

Nous pouvons aussi avoir un menu1 horizontal. Mais Nescape 4, Opera 5 et IE 4 ne seront pas en mesure de l'afficher correctement.

Il nous faut toujours deux feuilles de style :
pagecss2nn4.css contenant les règles qui sont ignorées ou correctement interprétées par nn4.
pagecss2.css avec les nouvelles règles et ce qui pose problème.
On a ajouté ce qui est nécessaire à MSIE 5 et 5.5.
Quelques filtres ou "hacks" vont permettre la compatibilité.
On définit maintenant menu_horizontal :

<link rel="stylesheet" href="pagecss2nn4.css" type="text/css" />
<style type="text/css">
<!--
/*<![CDATA[*/
   /*n'est pas interprété par nn4 ou ie4*/
@import "pagecss2.css";/*écrase les styles précédemment définis*/
/*modifications à apporter mais plutôt dans pagecss2nn4*/
#menugauche li{
margin-top:0;
border-bottom:0;
border-top:1px solid #90BADE;
margin-bottom:-5px;
border-bottom/*ignoré par IE5.0/Win à partir d'ici*/:1px solid #90BADE;
margin-bottom:-1px;
}
* html #menugauche li a{
width:155px;
w\idth:135px;/*n'est pas interprété par IE 5.x*/
}
/*on redéfinit ce qui n'a pas été modifié dans pagecss2nn4*/

#content{
margin-top:2.2em;/*pour IE5*/
margin-top/*ignoré par IE5.0/Win*/:2em;
}
/*On utilise ici les mêmes techniques que pour le menu à gauche
  On positionne en haut à gauche si on le souhaite
  On ajoute nowrap pour éviter un passage à la ligne si l'écran est trop petit
  (sauf avec IE 5.01)*/

#menu_horizontal ul{
top:0;
  /*
  top:expression(body.scrollTop + 0 + "px");
  permet une position du menu fixe avec IE5 et 5.5
  mais CSS ne sera plus valide !
  */
left:157px;/*0 peut permettre d'utiliser toute la largeur*/
position:absolute;
white-space:nowrap;
background-color:transparent;
color:#0A00B0;
/*width:83%;*//*peut permettre d'utiliser toute la largeur*/
margin:.3em 0 0;
padding:2px 3px 0 0;
padding-bottom:/*pour IE5.5 et IE6 ignoré de IE5.0*/2px;
border:1px solid #90BADE;
}
/*Pour Mozilla et Opera position fixe haut gauche
  et on definit la couleur de fond*/
html>body #menu_horizontal ul{
position:fixed;
background-color:#C9DDE4;
}
/*Ici on écrase la définition par défaut de ul : display:block;
  C'est ce qui va permettre d'afficher tout sur une même ligne*/
#menu_horizontal ul li{
display:inline;
}
/*On procède comme avec le menu de gauche pour afficher les liens
  et animer.
  Dans ce contexte IE5 n'interprète pas border, margin, padding
  sauf avec height:0;*/
#menu_horizontal ul li a{
font-weight:800;
background-color:#D2E1FB;
text-decoration:none;
border-left:6px solid #E9F5FE;
border-right:6px solid #E9F5FE;
margin-right:-3px;
margin-left:0;
padding:2px 7px 2px 7px;
margin-bottom:-4px;/*pour IE5.0*/
height:0;
}
#menu_horizontal ul li a:hover{
background-color:#A9CFFE;
color:#FFF;
border-left:8px solid #5200A4;
border-right:8px solid #5200A4;
border-bottom:2px solid #E9F5FE;
border-top:2px solid #E9F5FE;
padding:0 5px 0 5px;
}

/*]]>*/
-->
</style>
Un titre pour un tableau avec trois colonnes

Gauche

Centre

Droite

Le texte disparaît

s'il dépasse

les possibilités de l'écran

afin de conserver

l'alignement.

 

 

 

 

Un titre pour un tableau avec deux colonnes

Colonne de gauche large

colonne étroite

texte centré

caractères gras

 

 

Une colonne à gauche occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Une colonne à droite occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.

CSS uniquement, pas de tableau ni javascript.
Voilà ce qui semble possible2, mais qui reste réservé aux navigateurs récents.

MSIE 7 risque de bouleverser les choses car il devrait lire html > body, body > element, head:first-child + body et ne plus lire le "star hack" (* html).
Si cela se confirme, utiliser des commentaires conditionnels pour les différentes versions de MSIE deviendra l'option la plus raisonnable.

Et pour IE6.

1 CSS cutting edge propose d'autres solutions sans liste pour des menus horizontaux et verticaux.
1 Autres solutions pour des menus horizontaux et verticaux.
2 Si le mode "quirks" de IE6 vous convient, devnull propose d'autres solutions pour IE5, 5.5 et 6.