Bug menu déroulant [Zérolu]

(reprise du message précédent)

Laurent Denis a écrit :
Le problème du menu est réglé dans FireFox et Opera 8 (Win)

Hélas non. Dans Opera oui, si j'en crois mon copain.
Mais j'ai installé Firefox. C'était l'horreur !
Les boîtes se superposaient n'importe où.
J'y ai passé six heures. Maintenant ça marche pour les boîtes.
C'était l'histoire des "padding" et "margin" qui ne sont pas comptés pareil sur IE et les autres. Trouvé ça sur un de tes liens. Plus quelques bricoles, genre Firefox qui rajoute un interligne avant un paragraphe et pas IE.
Bref, ma page est belle maintenant sous FF et IE mais le menu ne marche toujours pas sur FF.
Je craaaaaaaaaque.
Il est 1h32 du matin. Dodo.
Dis-moi si mes modifs n'ont pas mis la cata sur ton Firefox à toi, vu que tu dis que ça marchait. Ah au fait : Firefox 1.0. Est-ce le dernier ? Téléchargé sur firefox.fr.

a écrit :
Firefox 1.0. Est-ce le dernier ?

Non, c'est la 1.0.4

Testés sur Firefox1.0.4 Windows XP2 :
- ta mise en page ne pose pas de problèmes de débordement, recouvrement ou autres. On pourrait faire plus élastique pour que les largeurs s'adaptent à la taille/résolution de l'affichage selon le visiteur, mais c'est une autre histoire.
- ton menu fonctionne basiquement : les blocs de sous-menus s'ouvrent bien au survol et se surimposent sur le reste du contenu. Leurs liens survolés se signalent avec leur arrière-plan et sont cliquables. Bref, ça marche comme un menu déroulant est supposé marcher.

Maintenant, comme tous les menus déroulants, il pose le problème de perte de focus et de "disparition" du bloc ouvert au survol dès que la souris s'égare un tant soit peu.

Il y a en fait un débat de longue date sur le principe même de ces menus à coulisse, dans lequel je préfère, pour une fois, rester neutre. Ce débat est fondé sur les problèmes tels que celui que tu rencontres en ce moment, plus ceux liés à l'accessibilité du truc, plus des questions franchement théologiques.

Disons simplement que si tu continues à rencontrer des problèmes avec ce menu dynamique, ce serait peut-être l'occasion de réfléchir à l'ergonomie et au rôle de ton menu, pour revoir peut-être son contenu et sa structure :
- en le mettant "à plat", quels sont les liens qui vont être utiles en permanence à tes visiteurs ? (le fait de viser volontairement un public restreint devrait t'aider à le définir, d'ailleurs)
- quels sont au contraire les liens auquel il n'est pas gênant d'accéder sur une page spécifique, et plus en permanence sur tout le site ? Par exemple, c'est peut-être le cas des 3 liens du sous-menus "les petites annonces" ?
- est-ce que la structure de ton site est bien appropriée ? Tu n'as apparemment que deux niveaux : Accueil > pages. Peut-être qu'une structure Accueil > Page d'accueil de rubrique > pages serait plus adaptée pour "le fonctionnement du club" ou "la saison 2004/2005", par exemple ?

C'est un exercice difficile, mais peut-être le plus intéressant et le plus important dans la mise en place d'un site Web et de son ergonomie.

Je ne peux que te donner des pistes de réflexion là-dessus : il n'y a que toi qui puisse déterminer, dans l'ensemble du site, ce qui doit être accessible d'un seul clic depuis ce menu, et ce qui peut être accessible via une page de sommaire de rubrique, donc en 2 clics.

Le but étant de simplifier l'interface en ne mettant peut-être pas tout dans le menu de navigation (ce n'est pas un "plan de site"), grâce à des "chemins de navigation" où le visiteur s'oriente facilement. le visiteur y gagne en ayant moins d'infos à saisir d'un seul coup. Tu y gagnes en ayant moins d'infos à gérer et présenter en même temps.

Ah... Que suis-je venu faire dans cette galère ?, vas-tu peut-être te dire ? Me voilà à reconsidérer tout le bidule !

Laurent Denis a écrit :
Testés sur Firefox1.0.4 Windows XP2 :
- ta mise en page ne pose pas de problèmes de débordement, recouvrement ou autres. On pourrait faire plus élastique pour que les largeurs s'adaptent à la taille/résolution de l'affichage selon le visiteur, mais c'est une autre histoire.

En fait, c'est un choix volontaire. Je n'aime pas les pages qui changent d'aspect quand on redimensionne la fenêtre. Et je pense que maintenant, il n'y a plus grand monde qui ait encore un écran 800x600. Effectivement, c'est une autre histoire.

a écrit :
Maintenant, comme tous les menus déroulants, il pose le problème de perte de focus et de "disparition" du bloc ouvert au survol dès que la souris s'égare un tant soit peu.

Alors là, je suis quand même très étonné. J'ai toujours vu ce genrte de menus fonctionner parfaitement. Sous IE il est vrai !
Tu peux voir sur cette page un menu qui fonctionne parfaitement, sans aucun clignotement, même sous Firefox et même quand il y a du texte sous les sous-menus.

a écrit :
Disons simplement que si tu continues à rencontrer des problèmes avec ce menu dynamique, ce serait peut-être l'occasion de réfléchir à l'ergonomie et au rôle de ton menu,

Oui. Oui, sans doute. D'accord pour tout ça. Mais ... (eh oui !) je suis maniaque et perfectionniste et surtout je n'aime pas être poussé à des solutions alternatives par des problèmes techniques, même si la solution vers laquelle je serais poussé est meilleure que l'actuelle.
Tiens c'est l'histoire de Desproges qui va acheter des piles ! Bon, si tu ne la connais pas, je pense que ce n'est pas le lieu ici pour ça !

a écrit :
Je ne peux que te donner des pistes de réflexion là-dessus : il n'y a que toi qui puisse déterminer, dans l'ensemble du site, ce qui doit être accessible d'un seul clic depuis ce menu, et ce qui peut être accessible via une page de sommaire de rubrique, donc en 2 clics.

En fait, les deux mon capitaine. Quand je surfe, j'aime bien avoir tout le site accessible depuis la page d'accueil, ce qui n'exclut pas les pages sommaires de rubriques et les liens inter-pages. Il y a tout ça sur mon site. On peut sûrement faire mieux mais je tiens à mon menu principal donnant accès à tout. Le site n'est pas si immense !

a écrit :
Ah... Que suis-je venu faire dans cette galère ?, vas-tu peut-être te dire ? Me voilà à reconsidérer tout le bidule !

C'est un peu galère en effet mais j'ai beaucoup appris et je ne le regrette pas.

Je reviens sur les problèmes de padding et margin.
Il semble (je suis prudent maintenant) que ce que tu dis sur cette page à propos de l'interprétation des tailles de boîtes par IE et les autres, ne soit pas tout à fait en correspondance avec ce que je constate. (qu'en termes galants ... )
Si je t'ai bien compris, dans une page déclarée en "html 4.01 transitional" Firefox devrait calculer les dimensions à la méthode Microsoft.
Il ne me semble pas que ce soit le cas.
J'ai fait pas mal d'essais et le fait de rajouter un padding augmente la taille de boîte sous Firefox et pas sous IE.
Mais je devrais peut-être démarrer un autre "topique" à moins que ce ne soit déjà dans la FAQ.

Une DTD peut adopter deux syntaxes :

- complète:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- incomplète:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ce sont les DTD incomplètes qui basculent les navigateurs en mode de rendu "quirks". Mais le mécanisme du "doctype scwitching" n'est pas du tout normalisé, et chaque navigateur réagit comme ses concepteurs l'ont voulu.

Laurent Denis a écrit :
Ce sont les DTD incomplètes qui basculent les navigateurs en mode de rendu "quirks".

J'ai complété la DTD. C'est pareil. Les marges sont toujours calulées différemment dans FF et IE. Quant à IE Mac, c'est franchement l'horreur. Et puis mes ascenseurs, que j'avais réussi à mettre aux couleurs du site sont redevenus "bleu Microsoft". Beurk !
Mais tu me diras sans doute que les "scrollbar-xxx-color" sont un truc qui n'existe pas ou qui est propriétaire de Microsoft comme me le dit le CCS validator du W3C.

a écrit :
Mais le mécanisme du "doctype scwitching" n'est pas du tout normalisé, et chaque navigateur réagit comme ses concepteurs l'ont voulu.

Je vois ça !

Enfin, en résumé et pour conclure, parce que ça devient un peu long,
- La mise en page en CCS c'est rigolo mais les tables sont beaucoup plus "robustes" dans les différents navigateurs. (c'est sans doute que je ne sais pas m'y prendre mais quand je vois les sujets du forum sur les "clear:left and co, je me dis que je ne suis pas tout seul)
- Mon menu marche toujours très bien dans IE sur pécé et toujours très mal dans Firefox. Enfin dans "mon" Firefox, sur "ma" machine. (Sans parler d'IE sur Mac, mais qui diable utilise IE sur Mac !)

Pixel a écrit :
J'ai complété la DTD. C'est pareil. Les marges sont toujours calulées différemment dans FF et IE.

Bon, bin je me réponds à moi-même. J'espère que je ne suis pas tout seul.
Je confirme qu'avec la DTD complète le menu marche beaucoup moins bien dans IE. Ce n'est pas la cata de Firefox mais ça s'en rapproche. Le background de chaque ligne du sous menu, qui occupait toute la ligne, n'occupe plus que l'espace sous les caractères, comme avec FF.

Je viens de remettre une DTD incomplète et j'ai retrouvé un menu qui marche et les couleurs des ascenseurs.

Ce n'est sans doute pas très élégant comme solution et puis ça ne résoud rien dans FF, mais je ne sais plus quoi faire d'autre si ce n'est appliquer le conseil de Laurent : virer ce menu.

J'aurai au moins pris conscience de la difficulté du métier de concepteur de site dans la jungle des standards et des navigateurs.

Bien déçu, vraiment, bien déçu.

Firefox 1.0.6 vient de sortir
Mais 1.0 ou 1.0.6 pas de changement côté CSS et rendu, donc ça revient au meme

Pixel a écrit :

Bon, bin je me réponds à moi-même...
Bien déçu, vraiment, bien déçu.

Bon bin je me réponds toujours les gars.
Mais je ne pouvais pas rester déçu comme ça.

Je crois que cette fois, ça y est.
Allez jeter un coup d'oeil sur cette page. Le gars dit qu'il s'est inspiré de vos menus en les améliorant un peu.
Le résultat après intégration et paramétrage dans ma page.

Plus de clignotement, plus de perte de focus, fonctionnement parfait sous IE 6 comme FF 1.04.

Il me reste à le faire tester sous Opera et Safari ainsi que IE Mac.
Mais je suis assez confiant.

Voilà, voilà, voilà ...

Pixel a écrit :
Il me reste à le faire tester sous Opera et Safari ainsi que IE Mac. Mais je suis assez confiant.

Faut jamais être trop confiant !
Ça marche sur Opera (Win) et Safari (Mac), mais pas sous IE Mac.
Toujours le troisième bloc de la ligne du haut qui passe à la ligne suivante. Ce genre de truc ne peut pas arriver avec des tableaux.
Mais qui utilise IE Mac ?!!!
Donc, je ne jette pas l'éponge, mais ...
je suis convaincu de l'intérêt des CSS pour le formattage de texte.
Pour la mise en place de blocs de texte et d'images, je suis moins sûr.
Enfin, en ce qui concerne la réputation d'IE d'être permissif alors que les autres seraient plus stricts ... eh bien, ça peut être le contraire.

Pour l'Olivier méchant modérateur, j'ai Firefox 1.04, histoire de ne pas faire comme tout le monde.

Voilà, voilà.
Modifié par Pixel (21 Jul 2005 - 16:11)