Mon menu est finis et tout marche comme voulu à un détail prés : IE6 ne l'a pas centré. Vivement la version 7 de ce navigateur.
Voilà le code auquel je suis arrivé :
Le css à peu prés nettoyé.
Code :
- body {
- background: white;
- font: 80% verdana, arial, sans-serif;
- }
- ul, li {
- margin: 0;
- padding: 0;
- list-style-type: none;
- border-radius:10px;
- -moz-border-radius:10px;
- -khtml-border-radius:10px
- }
- ul.niveau1 {
- display: table;
- position: absolute;
- _position: static;
- z-index:5;
- align:center;
- top:2.5em;
- margin-left: auto;
- margin-right: auto;
- }
- li.niveau1 {
- float: left;
- width: 8em;
- max-width:200px;
- cursor: pointer;
- text-align: center;
- font-weight: bold;
- background: #ccc;
- border: 1px solid blue;
- margin: 1px;
- }
- li.niveau1 ul {
- display: none;
- _display: inherit;
- background: white;
- border: 1px solid gray;
- }
- li.niveau1:hover ul{
- display: inherit;
- }
|
la page html (avec du texte qui permet de vérifier qu'il se décale pas à cause du menu )
Code :
- <?xml version="1.0" encoding="iso-8859-1"?>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
- <head>
- <title></title>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
- <link rel="stylesheet" type="text/css" href="menu.css" title="menu de base"/>
- <link rel="alternate stylesheet" type="text/css" href="/css/menu1.css" title="Présentation alternative" />
- </head>
- <body>
- <ul class="niveau1">
- <li class="niveau1"><div>site web
- <ul>
- <li><a href="/bechat">site bechat</a>
- </li>
- <li><a href="/bechat/install.php5">installateur</a>
- </li>
- </ul></div>
- </li>
- <li class="niveau1"><div>autres tests
- <ul>
- <li><a href="/uuser">uuser</a>
- </li>
- <li><a href="/u/user">u/user</a>
- </li>
- <li><a href="/~user">~user</a>
- </li>
- </ul></div>
- </li>
- </ul>
- <p align=center>test<br/><br/><br/>test2</p>
- </body>
- </html>
|
Bon, je sais, les trois <br/> dans la page html, c'est pas génial, mais c'était juste pour vérifier si le menu s'affichait bien par dessus du texte. Et je voulais pas trop poluer le css.
A terme, les lignes "-moz-border-radius:10px;" et "-khtml-border-radius:10px" pouront disparaitre quand les navigateurs correspondant passeront au css3. De même pour les lignes "_display: inherit;" et "_position: static;" avec IE7 qui gérera (normalement) enfin les chôses comme il faut.