Tuto menu déroulant en css/xhtml - tailles indépendantes

Bonjour,

je pense avoir fait le tour du positionnement et de l'accessibilité du menu présenté dans ce très bon tutorial.
j'ai changé l'aspect des menus pour leur substituer des images avec un on/off différent.

Mais j'ose poser une question plutôt générale. Afin d'adapter le menu à la taille de mes images j'ai changé

#menu dl {
float: left;
width: 12em;
}

en

#menu dl {
float: left;
width: auto;
}

Le soucis vous l'aurez compris c'est que les <ul> étant dans les <dd>, le menu déroulant apparaissant prend la taille du texte à l'intérieur des <li> et me décale les images du dessus d'autant.

Auriez-vous une piste pour rendre ces deux éléments indépendants? En fait que les deux tailles (menu visible niveau 0) et (menu déroulant) puissent être différentes?

Je me suis apparemment mal fait comprendre
Je souhaitais modifié le script du tuto pour obtenir ce type de menu horizontal Louvre (c'est à dire un menu de niveau 0 d'une taille et la div déroulante d'une autre) mais sans tout ce javascript ou si ça n'est pas possible trouver un lien proposant une autre démarche.

Merci beaucoup
Modifié par Toffi (25 Jan 2007 - 19:32)

Bonjour Toffi, et bienvenu sur ce forum
Une piste :

#menu ul{
position: absolute;
float: none;
width:15em;
}

Modifié par chmel (26 Jan 2007 - 00:51)

Bonjour Chmel, merci pour ta réponse, je vais tester ça.

En poursuivant mes recherches dans le monde anglo-saxons j'ai trouvé cet excellent site
http://www.cssplay.co.uk/menus/variable_dl.html qui justement propose ce que je recherchais: un drop down menu de taille variable.

Je laisse ouvert le ticket au cas ou certains d'entre vous voulaient implémenter et commenter tous ces exemples.

Le menu de cssplay ne permets pas l'accessibilité au clavier. Pour cela le "hover" doit se faire sur un lien comme ici

chmel a écrit :
Le menu de cssplay ne permets pas l'accessibilité au clavier. Pour cela le "hover" doit se faire sur un lien comme ici

Dans la mesure où le premier lien de chaque liste mène à une page de sommaire offrant un accès aux sous-items, ce point précis n'est pas invalidant pour l'accessibilité.

En revanche, attention au comportement de la barre de menu lorsque l'utilisateur a une taille de caractère plus grande que prévue
Modifié par Laurent Denis (26 Jan 2007 - 12:22)

Bonjour Laurent,
Merci pour la précision concernant le premier lien de chaque liste.
Tu veux dire par là que la partie visible du menu doit contenir des liens menants à un sommaire donnant accès aux liens non visibles et dans ce cas, la navigation clavier pour ces liens cachés n'est pas nécessaire.
Tout à fait d'accord, et le mieux serait que la partie non visible soit générée en javascript puisque innaccessible à ceux qui n'ont pas l'équation souris + javascript.

Pour ton deuxième point :

Toffi a écrit :
Bonjour,

Afin d'adapter le menu à la taille de mes images

est effectivement incompatible, quoique IE7 a la fonction zoom. Je pense que le malvoyant ayant un pc ancien aura pensé à installer Firefox ou Opéra. Tellement peu de webmasters pensent à mettre une police relative
Modifié par chmel (30 Jan 2007 - 06:35)

Bonsoir,

chmel a écrit :
Tout à fait d'accord, et le mieux serait que la partie non visible soit générée en javascript puisque innaccessible à ceux qui n'ont pas l'équation souris + javascript.

J'avoue que je ne comprends pas pourquoi. Quel est l'intérêt de générer cette partie en JavaScript ? Ce sera lourd, et ça la rendra inaccessible à ceux pour qui les CSS ne sont pas disponibles.

Bonjour Julien,

Julien Royer a écrit :
inaccessible à ceux pour qui les CSS ne sont pas disponibles.

En fait, je pensait à un gros menu comme ici.
Le menu complet du site dans un fichier texte. Grace à un language serveur + CSS, seul le sous-menu concernant la page en cours est présent dans le code html, le reste relèvant plus du plan de site. En dernier lieu, si on souhaite permettre l'accès à tout le site aux nantis d'un mulot, on charge le menu complet en js.

C'est tiré par les cheveux, je le conçois
Modifié par chmel (28 Jan 2007 - 10:34)