28234 sujets

CSS et mise en forme, CSS3

[Resolu]Affichage du menu sous une image

Bonjour Smiley smile

Après de nombreuses lectures sur le forum, je vais lancer mon premier post... Smiley biggrin

Voilà, je débute en css et en essayant de mettre en place une nouvelle version de mon site, je tombe sur un probleme que je n'arrive pas à résoudre...

Je sais pas trop comment expliquer, mais mon menu déroulant (trouver sur un site qui explique comment faire des menus) s'affiche sous une image...!

Comment faire pour qu'il s'affiche au dessus et qu'il devienne donc accessible ?

L'adresse du site et donc du probleme : www.visitelyon.fr/v2/ Voir la partie droite du menu.

Merci d'avance pour vos commentaires Smiley langue

Edition :

C'etait un probleme de z-index
Modifié par ~Brouette~ (10 Jun 2007 - 19:49)
Bonjour et bienvenue sur ce forum,

J'aurais bien voulu apporter mon aide pour résoudre ce problème, mais je suis actuellement en campagne contre les menus déroulants, pour les raisons évoquées dans l'article suivant : L'accessibilité des menus de navigation en cascade. Une saine lecture avant de se lancer dans de telles solutions techniques. Smiley cligne

Le menu déroulant que tu utilises est complètement inaccessible au clavier (le focus est donné aux items de menu qui ne sont pas supprimés avec un display: none mais simplement mis hors champ avec un position: absolute; left: -999em;).

De plus, un menu déroulant sur deux niveaux (donc avec des sous-sous-menus), c'est vraiment pousser le vice très loin.

Un menu de navigation n'est pas un plan de site. Il aurait été possible de faire une page « Plan de site » ou « Tous les lieux à visiter » (avec pourquoi pas une Image Map en bonne et due forme, pratique et déjà beaucoup plus accessible que ce menu déroulant). Bref, pas mal de moyens d'accéder au contenu, pas moins intuitifs (si ce n'est plus !) que le menu actuel.

Sur ce, je vais laisser ceux qui le souhaitent fournir des éléments de réponse pour le problème rencontré, mais pour ma part je persiste à penser que l'utilisation d'un menu déroulant telle qu'elle est faite sur la page présentée est une erreur de conception. Ceci dit, ce n'est que mon avis.

Bonne continuation. Smiley smile


PS : très sympa ce site sur Lyon (ma ville !). J'ai hâte de voir la v2 terminée. Smiley smile
Modifié par Florent V. (10 Jun 2007 - 20:10)
de toute façon j'ai l'impression que le pb a été [résolu].

mais si on abandonne le menu déroulant quelle est la meilleure alternative?
Modifié par CPascal (10 Jun 2007 - 20:31)
CPascal a écrit :
mais si on abandonne le menu déroulant quelle est la meilleure alternative?

Déjà, commencer par repenser l'offre de communication telle qu'elle se présente sur la page d'accueil (liens sur la page d'accueil, organisation de ceux-ci, rubriques...). Il peut être intéressant de se limiter à nombre réduit de « rubriques » ou « parties » du site, pour plus de lisibilité pour le visiteur.

Ensuite, une fois sur la rubrique voulue, et si c'est nécessaire, on pourra proposer au visiteur un sous-menu, ou autre système de navigation dans la rubrique (tout en conservant la navigation principale).

Voilà pour la base.

Objection fréquente : « oui mais le menu déroulant permet au visiteur de se rendre compte du contenu de chaque rubrique avant de cliquer ».

Certes. Mais :
1) L'utilisation du menu déroulant court-circuite souvent la réflexion sur l'organisation des contenus, sur les contenus mis en avant ou pas, etc.

2) Il est tout à fait possible d'utiliser la page d'accueil pour donner au visiteur une idée globale de l'offre de communication (contenus, services) du site, tout en explicitant cette offre (et, le cas échéant, en intégrant l'argumentaire commercial).
Beaucoup de sites ont une page d'accueil mangée à 75% par des news, alors que les news représentent 25% ou même 5% de ce que l'organisation à a offrir (services, produits...). Tout ça parce qu'on se repose sur un menu de navigation (déroulant ou pas) comme principale incitation à découvrir des contenus. Dans ce genre de cas, il y a clairement un problème...

3) Enfin, on peut fournir un plan du site, qui remplace avantageusement les menus déroulants avec sous-sous-sous-menu ( Smiley rolleyes ). Rien n'empêche d'ailleurs de mettre le plan du site en avant au lieu de se contenter d'un lien discret. On peut aussi, si le site est composé aux trois-quarts d'un contenu hiérarchisé et pour un quart d'informations complémentaires, faire une page qui ne soit pas un « plan du site » mais un moyen d'accéder à ces fameux trois-quarts. Pour un site comme visitelyon.fr, c'est une piste intéressante à creuser.

CPascal a écrit :
quelle est la meilleure alternative?

Est-ce que je t'étonne si je te dis « ça dépend » ? Smiley lol

Plus sérieusement, je ne suis pas expert en ergonomie des sites web, mais je ne pense pas qu'on puisse trancher pour tel ou tel système de navigation.
Florent V., tu as probablement raison, le menu deroulant n'est surement pas la meilleur solution.
Mais si le probleme n'est que l'accessibilité, pourquoi ne pas faire alors un plan de site dédié aux personnes handicapées ?
C'est un peu comme dans de nombreuses administrations. Tu as les escaliers pour acceder à l'intérieur et tu as un ascenceur ou une rampe situé à proximitée...



Hors sujet :
Tu habites quel coin de Lyon ?
~Brouette~ a écrit :
Mais si le probleme n'est que l'accessibilité, pourquoi ne pas faire alors un plan de site dédié aux personnes handicapées ?

D'une, parce que tu risques de perdre des visiteurs qui auront du mal à utiliser ton menu (pas forcément des handicapés, d'ailleurs, mais aussi des utilisateurs déboussolés...) ou qui ne pourront pas du tout y accéder (handicap, ou matériel spécifique, ou les deux), et qui n'auront pas forcément le réflexe « plan du site » (surtout si le lien est discret).

De deux, parce que le problème n'est justement pas que l'accessibilité. Pourquoi penses-tu que j'ai développé toute la partie « repenser l'organisation des contenus » ? C'est bien parce qu'une telle remise à plat de la navigation du site sera bénéfique pour tous les utilisateurs. Smiley smile

Tu m'excuseras d'être un peu tranchant, mais ton site est un exemple typique de site avec un contenu riche mais mal mis en valeur, notamment à cause d'un dispositif de navigation défaillant (c'est à dire : peu efficace).

Tu aurais grand intérêt à remettre les choses à plat. Et, si ça se justifie (notamment en termes de budget et de bénéfices espérés), à consulter un prestataire en ergonomie.


~Brouette~ a écrit :
Hors sujet : Tu habites quel coin de Lyon ?

Le quart nord-ouest de Villeurbanne. Smiley smile
Modifié par Florent V. (11 Jun 2007 - 10:35)
Juste une piste :

- faire un menu horizontal simple (trois, quatre, cinq ou six items) ;
- mobiliser 2/3 de la page d'accueil (colonne de gauche) pour présenter les contenus via une carte de Lyon (image map avec liens, par exemple), ou bien une liste des lieux principaux, ou bien les deux... ;
- mobiliser le tiers restant (colonne à droite, par exemple) pour présenter les derniers contenus sur le site.

Et bien penser à ménager, sur la page d'accueil, un petit espace pour caser une phrase (à la rigueur deux) présentant le site et son offre de contenu/services.

Mais ça n'est qu'une idée... Smiley cligne


Edit : pour le menu principal, on peut avoir :
Accueil - Carte des lieux à visiter - Toutes les galeries photo - La ville de Lyon
Soit, en plus de la page d'accueil, deux pages d'index principales pour l'accès aux contenus : une avec une carte dynamique, l'autre avec une liste par rubriques (correspondant globalement à ton menu déroulant... avec peut-être un peu plus de détail, à voir...).
Sur la page « la ville de Lyon », on peut parler des moyens d'accéder à la ville (train, route, avion...), ce que s'attendront surement à trouver des visiteurs arrivés sur un site nommé visitelyon.fr..., ainsi que quelques repères culturels et historiques sur la ville, par exemple. Ça n'est peut-être pas indispensable, mais ça peut être intéressant.

Edit 2 :
Bon, je m'arrête là. Si tu veux, je te fais un rapport écrit et je te présente des mock-up de mise en page/agencement des contenus et présentation de l'offre du site, mais ça sera un service que je facture. Smiley cligne
Et, bien entendu, je suis persuadé que pas mal de mes collègues (en particulier parmi ceux ayant la fibre éditoriale) seront à même d'offrir ce type de prestation.
Modifié par Florent V. (11 Jun 2007 - 10:54)
Merci pour les conseils...
J'ai tout à apprendre d'un point de vue ergonomie d'un site web.

Je dois profiter de ce changment de version pour integrer un maximum d'ameliorations point de vue css et donc du coup ergonomie.
Quelqu'un connait-il est bon site pour apprendre l'ergonomie facilement ?

Sur ma premiere version, j'ai deja un plan du site, mais il est vrai que son acces est relativement discret, il va me falloir l'ameliorer et le mettre en avant dans la version 2.

Si d'autres personnes ont des conseils, je suis preneur Smiley langue
Sujet clos
Aller à