[ABANDON] Menu déroulent et CSS, conséquence de position: absolute

Bonjour tout le monde,

J'ai suivis le tuto Un menu déroulant en CSS et XHTML (horizontal et vertical).

Jusque là je n'avais pas de problème. Avant je remplissais moi même les liens, maintenant le menu est généré à partir d'une base de données, donc je ne sais pas quel largeur aura le sous menu.

Justement le problème est là, pour que le sous menu s'adapte à la longueur du texte il suffit de ne plus lui attribuer de taille. Hors le fait de mettre dans le CSS :

#menu {position: absolute;}

Le sous menu à une largeur ridicule voyez la capture d'écran. En fait la case de déforme en hauteur (1 mot par ligne). Et si je supprime la position absolu, et bien, vous vous doutez bien qu'après c'est du grand n'importe quoi ... le menu se balade au milieu de la page.

Avec position: absolute
http://img160.imageshack.us/img160/2627/111111111111111111111pp1.jpg

Sans position: absolute
http://img502.imageshack.us/img502/136/22222222222222222222na9.jpg


Si vous avez une solution ... merci d'avance.


PS : pour les puristes de l'accessibilité sachez que je n'ai oublié personne et que mon menu est parfaitement accessible à tous.
Modifié par Spark (03 Apr 2007 - 13:42)

Bonjour,

a écrit :
PS : pour les puristes de l'accessibilité sachez que je n'ai oublié personne et que mon menu est parfaitement accessible à tous.

Ah ?! presque on va dire...

Lit donc ceci :

Accessibilité du menu déroulant
http://blog.alsacreations.com/2006/10/17/291-accessibilite-menus-deroulants
FairyTells

Ca ne m'aide pas à résoudre mon problème, même si le 3ème lien est très intéressant. Rien que pour ce menu j'ai prêt de 200 lignes de CSS et x heures de travail, j'ai pas trop envi de recommencer juste parce qu'il est un peu mieux, en plus il est horizontal, ça prendrais trop d'heure de tout reprendre j'ai autre chose à faire
Mon site est entièrement accessible avec la touche tab et entrer, que demander de plus.
Modifié par Spark (02 Apr 2007 - 23:11)

Spark a écrit :
Mon site est entièrement accessible avec la touche tab et entrer, que demander de plus.

D'expérience, un menu déroulant ne posant pas le moindre problème à la navigation clavier, ça n'existe pas. Et il y a bien d'autres contextes d'utilisation pour lesquels les menus déroulants posent problèmes (avec une loupe d'écran par exemple, c'est pas évident à gérer). Ceci dit, ta solution est sans doute globalement satisfaisante par rapport à tes objectifs et contraintes. koala64 réagissait sur le « parfaitement accessible à tous », qui est une affirmation parfaitement erronée.

Salut,

Spark a écrit :
Rien que pour ce menu j'ai prêt de 200 lignes de CSS et x heures de travail

200 lignes ?! pour un menu ? A mon avis, tu as plus qu'un simple problème de dimensionnement.

Quant aux nombreuses heures de travail, si tu veux bien faire, tu n'es pas au bout de tes peines... Un menu déroulant est loin d'être une partie de plaisir et lorsqu'on peut l'éviter, ça vaut mieux car les contraintes sont nombreuses et ont de quoi en décourager plus d'un... En outre, l'accessibilité ne se résume pas à la navigation clavier, chose pour laquelle un menu déroulant habituel est d'ailleurs loin d'être optimal.

Bref, à toi de voir, c'est plus pour te mettre au courant que de te dire de ne pas le faire.

Le mieux serait que tu laisses une page en ligne ou, à défaut, quelques bouts de code.
Modifié par koala64 (03 Apr 2007 - 08:54)

Florent V. a écrit :
D'expérience, un menu déroulant ne posant pas le moindre problème à la navigation clavier, ça n'existe pas.

Oh la bonne blague ! Le tuto que j'ai cité plus haut, le tuto d'Alsacreations ne permet pas en l'état la navigation au clavier.

koala64 a écrit :
200 lignes ?! pour un menu ? A mon avis, tu as plus qu'un simple problème de dimensionnement.

Mauvaise langue

Le menu parent est tout simplement cliquable pour arriver sur une page sur laquelle ce trouve les liens des sous menu.

Les sous menu pourrait être purement et simplement supprimer, mais je tien à les garder car c'est plus rapide d'accès, il ne faut pas oublier aussi que la majorité des gens n'ont pas de problèmes à naviguer sur le web !


Merci pour le trolling
Modifié par Spark (03 Apr 2007 - 11:51)

Spark a écrit :
Oh la bonne blague ! Le tuto que j'ai cité plus haut, le tuto d'Alsacreations ne permet pas en l'état la navigation au clavier.

Ce tuto date de 2005 et est en cours de rénovation.

a écrit :
Mauvaise langue

Mauvaise langue ? Pourtant, il faut vraiment que j'y mette de la mauvaise volonté pour arriver à un tel résultat.

a écrit :
Le menu parent est tout simplement cliquable pour arriver sur une page sur laquelle ce trouve les liens des sous menu.

Très bien... c'est une bonne chose.

a écrit :
Les sous menu pourrait être purement et simplement supprimer, mais je tien à les garder car c'est plus rapide d'accès,(...)

Pour celui qui navigue à la souris oui... mais justement pas pour celui qui navigue au clavier... Cette redondance par rapport aux pages où se trouvent les liens du sous-menu est optionnelle... Là, tu la rends obligatoire, ce qui complique la maintenance et la navigation tout en rendant le menu moins clair... Dommage, t'étais bien parti...

a écrit :
il ne faut pas oublier aussi que la majorité des gens n'ont pas de problèmes à naviguer sur le web !


Merci pour le trolling

Je ne te le fais pas dire. Tout le monde a des problèmes, toi y compris... mais peut-être n'en as-tu pas conscience.

a écrit :
Oh la bonne blague ! Le tuto que j'ai cité plus haut, le tuto d'Alsacreations ne permet pas en l'état la navigation au clavier.

La bonne blague, c'est surtout que tu ne sais pas le corriger de manière propre. ... et puis il n'y a pas que ça comme problème... Connais-tu les autres d'ailleurs ? Peut-être que tu comprendrais alors pourquoi la mise à jour tarde...

koala64 a écrit :
Mauvaise langue

Mauvaise langue ? Pourtant, il faut vraiment que j'y mette de la mauvaise volonté pour arriver à un tel résultat.
Jolie menu plusieurs background différent, transparence + png = hack IE . Ca chiffre vite en quantité de code CSS

koala64 a écrit :
Le menu parent est tout simplement cliquable pour arriver sur une page sur laquelle ce trouve les liens des sous menu.

Très bien... c'est une bonne chose.

a écrit :
Les sous menu pourrait être purement et simplement supprimer, mais je tien à les garder car c'est plus rapide d'accès,(...)

Pour celui qui navigue à la souris oui... mais justement pas pour celui qui navigue au clavier... Cette redondance par rapport aux pages où se trouvent les liens du sous-menu est optionnelle... Là, tu la rends obligatoire, ce qui complique la maintenance et la navigation tout en rendant le menu moins clair... Dommage, t'étais bien parti...
Non il n'est pas obligatoire, puisque comme je viens de le dire le menu parent est cliquable, lors de la navigation au clavier les sous menu ne s'affiche pas puis qu'il n'apparaissent qu'au survole de la sourie.

De toute façon je l'ai supprimer, j'ai d'autre truc à faire pour que le site soir mis en ligne. Je trouverais un moyen plus tard (100% CSS).

koala64 a écrit :
il ne faut pas oublier aussi que la majorité des gens n'ont pas de problèmes à naviguer sur le web !

Merci pour le trolling

Je ne te le fais pas dire. Tout le monde a des problèmes, toi y compris... mais peut-être n'en as-tu pas conscience.
Ce qui veut dire ? Va au bout de ta pensé.

koala64 a écrit :
Oh la bonne blague ! Le tuto que j'ai cité plus haut, le tuto d'Alsacreations ne permet pas en l'état la navigation au clavier.

La bonne blague, c'est surtout que tu ne sais pas le corriger de manière propre. ... et puis il n'y a pas que ça comme problème... Connais-tu les autres d'ailleurs ? Peut-être que tu comprendrais alors pourquoi la mise à jour tarde...
Oui je ne sais pas le corriger de manière propre (ou parle bien ne la navigation au clavier dans les sous menu), et je ne vais pas en rougir. Si j'en était capable je n'aurais probablement pas suivis le tuto, et fais mon propre menu. Il faut bien commencer quelque par. Mais qu'on vienne pas me dire que de tel menu n'existe pas ...

Tu peux faire le procès de mon ignorance si tu veux, moi je cherchais juste un moyen d'avoir un sous menu à la taille de son contenu. Mais soit sur que je ne cherche pas la facilité au détriment des autres.

Maintenant cela m'a permis de trouver un excellent site, pour ce qui veulent des menus accessibles tout en CSS :

http://www.cssplay.co.uk/menus/index.html

Spark a écrit :
Jolie menu plusieurs background différent, transparence + png = hack IE . Ca chiffre vite en quantité de code CSS

ok

a écrit :
Non il n'est pas obligatoire, puisque comme je viens de le dire le menu parent est cliquable, lors de la navigation au clavier les sous menu ne s'affiche pas puis qu'il n'apparaissent qu'au survole de la sourie.

Ce n'est valable que lorsque CSS est actif... C'est ce que j'entendais par là. Le fait de se baser là-dessus, c'est mettre de nombreux supports de côté.

a écrit :
Ce qui veut dire ? Va au bout de ta pensé.

C'est à dire que tu ne disposes pas toujours du même matériel pour naviguer, que tu n'as pas forcémment la même appréciation des couleurs que celui qui fait le menu (et donc désactiver celles-ci), que tu peux être fatigué et ressentir le besoin d'agrandir tes polices, etc... etc...

a écrit :
Oui je ne sais pas le corriger de manière propre (ou parle bien ne la navigation au clavier dans les sous menu), et je ne vais pas en rougir. Si j'en était capable je n'aurais probablement pas suivis le tuto, et fais mon propre menu. Il faut bien commencer quelque par. Mais qu'on vienne pas me dire que de tel menu n'existe pas ...

Oui, c'est bien ce que j'affirme... Un menu complètement accessible n'existe pas à ce jour. Le meilleur que je connaisse est FairyTells et il ne répond pas à tous les besoins.

a écrit :
Tu peux faire le procès de mon ignorance si tu veux, moi je cherchais juste un moyen d'avoir un sous menu à la taille de son contenu. Mais soit sur que je ne cherche pas la facilité au détriment des autres.

Je ne cherche pas à faire le procès de ton ignorance... Ce qui m'importe, c'est que quiconque utilise un menu déroulant soit conscient de ce qu'il fait et des difficultés qu'il est susceptible d'engendrer. Le menu déroulant est optionnel... même sur un gros site. Partant de là, on peut faire quelquechose de bien.

a écrit :
Maintenant cela m'a permis de trouver un excellent site, pour ce qui veulent des menus accessibles tout en CSS :

http://www.cssplay.co.uk/menus/index.html

Tant que ce n'est pas un menu déroulant, oui... Si un menu déroulant est amené à être accessible, il incluera Javascript parce que CSS n'est pas capable de répondre à tous les besoins... (Temporisation de la fermeture du menu entre autres...)
Modifié par koala64 (03 Apr 2007 - 16:18)

koala64 a écrit :
Ce n'est valable que lorsque CSS est actif... C'est ce que j'entendais par là. Le fait de se baser là-dessus, c'est mettre de nombreux supports de côté.

Si le CSS est désactivé je m'incline, et j'arrête la programmation web ou je me lance dans l'HTML 4.01 et j'utilise les tableaus pour la mise en page ...
Modifié par Spark (03 Apr 2007 - 18:15)

no comments.

Ce va je déconne quand je parle de CSS désactiver