Renseignement sur un code de menu deroulant

[hegalaldia]

Slt

Pour faire un menu deroulant, j'ai pris ce code CSS que je voudrais personnaliser. Mais j'ai quelque question (etant un gros nulos en anglais j'ai traduit les commentaires avec google) :

1)

.menu{
    position:absolute;
    /* solve a Opera7/IE display bug */
    width:152px;
    width/**/:150px;

Le fait de mettre 2 fois width resoud le bug ? et de quel beug sagit-il.

2)

padding:0;
    position:absolute; /* important */
    width:152px;
    width/**/:150px;

Pourquoi, juste la, c'est important la position ?

3)

.menu li ul{
    margin-left:150px; /* be careful */
    margin-top:-24px;
    }

Pourquoi faut-il etre prudent ?

4)

/* for a mozilla better display with key nav */
.menu a:focus{
    background-color: #aaf;
}

Traduc de google : "pour un meilleur affichage avec mozilla touche NAV". Pas trop compris la

5)

.menu span{
    /* hide some accessibility stuff */
    display:none;
    }

C'est quoi ca les commandes d'accessibilite ??

6)

/* IE PC selector */
* html .menu li {
    display:inline; /* solve a IE PC list bug */
    float:none; /* solve a IE5 clav nav bug */
    }

Ca resout quel beug ?

Voila mes questions. Merci d'avance pour vos lumieres.

Modifié 28 Septembre 2009 par hegalaldia

[SStephane]

Hello,

1) Non ce n'est pas mettre 2* width qui résout un bug, le premier est normal, le seconde est un hack qui ne sera lu que par une certaine catégorie de navigateur. Cela vise à harmoniser la taille de la boite qui va différer à cause des border (rien que sur le premier élément de menu, il y a mieux à faire)

2) Parce que si tu l'enlèves, ça fonctionnera pas (enfin j'imagine), en général les menus déroulants sont en position absolute pour éviter de tirer les autres éléments du dom dans le flux.

3) Aucune idée... il a peur... sans doute que tu éloignes trop le sous menu du menu ce qui le rendra inaccessible à la souris.

4) le a:focus permet de situer l'état du focus, afin de te situer sur la page lorsque tu tabules

5) un des critères d'accessibilité précise qu'il faut un caractère imprimable entre les éléments d'une liste comme celle ci afin d'avoir une meilleur lisibilité; dans le cas présent, faire de cette manière est complétement débile puisque les lecteurs d'écran et autres dispositifs n'y auront pas plus accès; une meilleure manière de procéder est de faire comme suis :

.menu span{
    /* hide some accessibility stuff */
    position:absolute;
    overflow:hidden;
    top:-500000px;
    }

6) un bug sous ie fera apparaître une ligne (impossible à retirer) lorsque l'on enchaine les items de cette manière, les mettre en display:inline est une solution comme une autre : je préfère tout mettre en float pour éviter ce type de hack.

Point de vue perso : d'une manière générale, recourir à des hacks à outrance est plutôt casse-gueule.

Un excellent ouvrage sur le sujet : http://oreilly.com/catalog/9780596515058/ (il doit se trouver en français)

[hegalaldia]

Merci pour t'es infos. En fait je ne fait plus de menu deroulant, mais avec onglets. J'ai perdu un peu de temps a bataille pour que la structure CSS soit clair pour moi, mais bon, ca ma permis de voir comment il faut faire. J'ai perdu du temps pour avancer notre site.