Problème Affichage menu

[sjacquart]

Bonjour,
Depuis le passage à Firefox 4.0, les sous menus de mon site (http://www.bm-douai.fr) ne s'affiche plus.
J'ai vérifié que la case javascript été bien coché dans les options.
Aucun module anti-script n'est installé.
Sous IE et Chrome et Firefox 3.5.1, le site fonctionne correctement....
Le test a été réalisé sur 3 autres machines, dont 2 neuves... sous firefox 4.0

Avez vous une idée ?

Merci par avance

[jpj]

Bonjour,

Comme il semble y avoir un bon nombre d'erreurs html et css, je déplace dans "Développement web".

[calimo]

Vu la détection des navigateurs qui est faite et le nombre d'erreurs HTML, la question est plutôt : pourquoi ça a fonctionné jusqu'à maintenant ?

Aucun module anti-script n'est installé.

Et si tes utilisateurs en ont un ? Pour eux le site est inutilisable. Est-ce acceptable ?

Le moyen le plus simple de résoudre rapidement le problème est de transformer les menus (Renseignements pratiques, Catalogue, Evènements, etc) en vrais liens cliquables. Plus généralement, les menus déroulants sont plutôt déconseillés par certains auteurs (article en anglais). N'hésite pas à t'en passer et montrer plus de contenu et de liens contextuels en page d'accueil !

[chinon37]

Et si tu tiens aux menus déroulants, pourquoi ne pas faire ceux-ci directement en css, donc compatibles avec tous les navigateurs?

[teoli2003]

Et si tu tiens aux menus déroulants, pourquoi ne pas faire ceux-ci directement en css, donc compatibles avec tous les navigateurs?

C'est la solution au problème: utiliser du CSS et bannir le Javascript dans ce cas-là. Un site ne doit pas être inutilisable sans Javascript (j'ose pas imaginer comment apparaîtra ton site à un utilisateur naviguant avec un "écran" braille).

L'avantage c'est que le CSS est bien mieux standardisé que le Javascript et les navigateurs l'implémentent bien mieux. De plus, il n'y a rien de dynamique dans un menu déroulant. Le CSS2.1 est aujourd'hui bien reconnu par tous les navigateurs majeurs.

[calimo]

[Modération] J'ai mis en couleur la discussion "technique" et laissé en noir les réponses directes à sjacquart. Si je divise, plus rien ne va être compréhensible. jpj.

Et si tu tiens aux menus déroulants, pourquoi ne pas faire ceux-ci directement en css, donc compatibles avec tous les navigateurs?

C'est la solution au problème: utiliser du CSS et bannir le Javascript dans ce cas-là.

Non, le CSS est prévu pour la décoration, pas pour l'interaction, il faut éviter de l'utiliser pour ce genre de choses pour lesquelles il n'a pas été conçu.

Un menu en CSS est une mauvaise solution. Il est très facile de faire un menu qui ne fonctionne pas en CSS, probablement encore plus qu'en javascript, en particulier sur la navigation au clavier (j'ai rarement si ce n'est jamais vu des menu déroulants CSS utiliser correctement :focus. Au moins en javascript onclick est (bizarrement, certes) déclenché aussi au clavier).

Un site ne doit pas être inutilisable sans Javascript (j'ose pas imaginer comment apparaîtra ton site à un utilisateur naviguant avec un "écran" braille).

À quoi ressemble un menu déroulant CSS sur une plage braille ? À rien non plus surtout s'il a été caché !

La seule solution est comme je le disais de faire des éléments de premier niveau (Renseignements pratiques, Catalogue, Evènements, etc) de vrais liens qui conduisent vers de vraies pages sur lesquelles l'utilisateur pourra trouver la suite de l'arborescence.

L'avantage c'est que le CSS est bien mieux standardisé que le Javascript et les navigateurs l'implémentent bien mieux. De plus, il n'y a rien de dynamique dans un menu déroulant. Le CSS2.1 est aujourd'hui bien reconnu par tous les navigateurs majeurs.

Malheureusement ce n'est pas le cas des dispositifs d'accessibilité qui font encore et toujours absolument n'importe quoi, et il n'y a pas (à ma connaissance) de perspective d'amélioration à court ou moyen terme.[/color]

[teoli2003]

Mais c'est de la présentation! Et CSS est fait pour cela. Bien sûr, ce n'est pas forcément trivial (mais le fait que le site ne marche plus montre que le JS non plus) et qu'il faut faire les choses correctement en utilisant :hover, :focus etc. Quant à devoir cliquer pour avoir le sous-menu, c'est beaucoup trop lent pour l'utilisateur.

Quant à la plage braille, vu qu'il utilisera une autre feuille de style, il n'y aura pas de problème. (Google fera de même)

A part cela le site est fait en tables et <font>, ...

Sinon la société qui a fait le menu utilise une autre version sur leur site, je pense que le plus simple est que l'OP s'adresse à eux pour la correction. Mais comme quelqu'un le disait, je suis étonné que cela ait marché si longtemps... (Je serais curieux de voir si cela fonctionne sous Chrome, car j'ai vu des if (Safari) mais pas de if (Webkit) ).

[calimo]

Mais c'est de la présentation!

L'utilisateur doit pointer pour obtenir un effet, c'est de la présentation ?
Non, c'est typiquement la définition de l'interaction. Donc du travail pour javascript.

Quant à la plage braille, vu qu'il utilisera une autre feuille de style, il n'y aura pas de problème. (Google fera de même)

Quel navigateur est capable de reconnaitre que la sortie est en braille et de sélectionner la bonne feuille de style ? À ma connaissance aucun, mais je serais ravi que tu me montres le contraire
Sans parler des lecteurs d'écran qui utilisent les styles visuels et ignorent les propriétés vocales (speak, pause, etc).

[sjacquart]

Oui j'ai déjà contacté la société qui m'a fourni le site web... mais pour le moment ils n'ont pas de solution, leur développeur travaille dessus....

Passer à la nouvelle version de site ?
Oui mais cela a un coût que je ne peux supporter cette année !

Refaire le menu en CSS ou lien en dur ?
Oui je pense que c'est la solution la plus sage... pour le moment

[teoli2003]

Mais c'est de la présentation!

L'utilisateur doit pointer pour obtenir un effet, c'est de la présentation ?
Non, c'est typiquement la définition de l'interaction. Donc du travail pour javascript.

Non. Le fait qu'un menu soit entièrement visible sous forme de liste, ou seulement lorsqu'on passe la souris sur un menu, c'est juste un choix de présentation. Les pseudo-classes ont été faites pour cela.

A te suivre, on devrait supprimer :hover et :focus du CSS et recommander d'utiliser du javascript pour cela, car c'est de l'interaction. Donc utiliser du javascript pour faire changer de couleur un lien quand on le survole, puisqu'on interagit avec la page.

L'intéraction ne commence que lorsqu'on entre une donnée, par exemple en cliquant. Avant cela, ce n'est que du style, de la présentation d'information en vue d'un choix de l'utilisateur. Promener sa souris sur l'écran n'est pas entrer une donnée.

Le javascript ne doit donc être que rare sur une page web, sauf lorsque l'on veut réagir localement à l'entrée d'une donnée (comme sur une carte google, où l'on veut réagir à un ordre de zoom, de recentrage ou dans une appli web), pas pour faire apparaître une information qui est juste cachée pour une question de présentation.

Le menu sur Geckozone n'utilise pas de javascript, mais du CSS.[/color]

[calimo]

Refaire le menu en CSS ou lien en dur ?
Oui je pense que c'est la solution la plus sage... pour le moment

Avoir des vrais liens au premier niveau et des pages intermédiaires sera toujours la solution la plus sage l'année prochaine et aussi celle d'après, et même lorsque tu auras eu assez d'argent pour la mise à jour du site

Les pseudo-classes ont été faites pour cela.

CSS1 a introduit les pseudo-classes :link, :visited, etc) sur les liens uniquement, dans le but de les faire apparaître différemment selon s'ils étaient visités ou non (et quelques autres détails, notamment lors du clic). Le contenu visible de la page ne pouvait pas changer, uniquement quelques éléments de présentation prévus par CSS1 (police, taille, couleur, soulignement, fond, etc.)
Ensuite lorsque le :hover a été introduit, pendant des années, IE6 ne le supportait que sur les liens et rendait donc les menus déroulants CSS inefficaces.
Au final le menu déroulant n'est qu'une dérive assez récente de l'utilisation de ces pseudo-classes. En tous cas tu ne peux pas dire qu'elles ont été « faites pour cela » (sauf si "cela" se référait à "changer la couleur de la police").

Non. Le fait qu'un menu soit entièrement visible sous forme de liste, ou seulement lorsqu'on passe la souris sur un menu, c'est juste un choix de présentation.

On ne se mettra probablement pas d'accord, mais pour moi faire apparaitre ou disparaitre une partie du contenu la page dépasse le cadre de la présentation et constitue une vraie action. D'ailleurs pour y accéder on est obligé d'effectuer une autre action (voir ci-dessous).
Pour mettre en évidence un lien aussi il faut un survol. Mais le changement de couleur n'empêche pas de lire et suivre de ce même lien, et le changement de couleur n'est que très secondaire, au contraire de l'apparition du menu.

A te suivre, on devrait supprimer :hover et :focus du CSS et recommander d'utiliser du javascript pour cela, car c'est de l'interaction. Donc utiliser du javascript pour faire changer de couleur un lien quand on le survole, puisqu'on interagit avec la page.

C'est bien de la présentation, purement superficielle, dispensable et qui ne change rien au contenu.
Tout le contraire de l'apparition du menu qui change le contenu et dont l'affichage est indispensable pour accéder à ses éléments.

L'intéraction ne commence que lorsqu'on entre une donnée, par exemple en cliquant. Avant cela, ce n'est que du style, de la présentation d'information en vue d'un choix de l'utilisateur. Promener sa souris sur l'écran n'est pas entrer une donnée.

Je ne comprend pas la différence que tu fais entre cliquer et survoler. Quand tu veut ouvrir un menu déroulant, je ne pense pas que tu "promènes" ta souris : tu la déplace dans le but d'atteindre un endroit bien précis. C'est une action consciente et volontaire de ta part. Qu'elle se termine par un clic ou non ne change quasiment plus rien (ou plutôt le clic peut être considéré comme une seconde action).

Le menu sur Geckozone n'utilise pas de javascript, mais du CSS.

Et d'ailleurs plusieurs éléments sont inacessibles au clavier (essaye d'accéder à "Besoin d'aide?" dans le menu "Le site" sans te servir de ta souris…).
Bien sûr le problème aurait probablement été le même en javascript. Preuve s'il en est que ni l'un ni l'autre ne sont la réponse au problème.

[sjacquart]

[Modération / Rappel] J'ai mis en couleur la discussion "technique" et laissé en noir les réponses directes à sjacquart. Si je divise, plus rien ne va être compréhensible. jpj.

Merci .. c'est effectivement plus lisible !
Bonne journée

[teoli2003]

Et désolé, S. Jacquard, d'avoir mis un peu la zone dans ta discussion

[sjacquart]

Et désolé, S. Jacquard, d'avoir mis un peu la zone dans ta discussion

T'inquiète il n'y a pas de problème... ca me permet d'apprendre .. c'est toujours du bonus !