Aller au contenu

Menu après le contenu

YvesTan

Par YvesTan
dans (X)HTML et CSS

 Partager

Sujets conseillés

YvesTan

YvesTan

Posté
Posté

Bonjour à tous,

je viens demander avis avant d'avoir le crane qui explose ;)

J'ai fais une mise en page avec des CSS : http://spatial-modelling.info/test/index-test.html

Ca marche. Mais pas comme je le voudrais. C'est à dire que mon bloc "menu" est avant le bloc "principal" dans la page html.

Autrement dit que sans feuille de style, le menu est avant le contenu (je me répète là)

Ce qui n'est pas super pour un lecteur en mode texte ou un téléphone portable...

J'ai beau essayer de faire un float: right sur la div "principal", le menu se retrouve en dessous du calque "principal"

Auriez vous une idée ?

merci d'avance

@+

YvesTan

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
Posté

Je n'ai pas la réponse à ton problème dans la mesure ou je n'ai pas cherché, tout simplement car les règles d'accessibilité veulent tout simplement que tu insères un lien "Aller au contenu", lien qui renverra vers une ancre, placée sur ton contenu.

Ainsi, la personne désirant sauter le contenu clique sur ce lien, et donc passe tout l'encombrant menu.

++

Lien vers le commentaire
Partager sur d’autres sites
YvesTan

YvesTan

Posté
  • Auteur
Posté

Merci de ta réponse.

Ca simplifie le pb en effet !

Alors, question, je mets le "aller au contenu" invisible (visibilty: hidden) dans les feuilles de style graphique et ca le fait ?

merci @+

YvesTan

Lien vers le commentaire
Partager sur d’autres sites
Voulf

Voulf

Posté
Posté

Salut!

l'idée serait plutôt de mettre un lien en dur agrémenté d'une acesskey pour sauter directement au contenu :)

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
Posté
Merci de ta réponse.

Ca simplifie le pb en effet !

Alors, question, je mets le "aller au contenu" invisible (visibilty: hidden) dans les feuilles de style graphique et ca le fait ?

merci @+

YvesTan

Non, tu n'es pas obligé.

Regarde l'excellent CyberCodeur !

En haut, il y a un lien, "Sauter aux contenus". Il n'est même pas caché, car il sert également à ceux qui naviguent au clavier (comme moi, de temps en temps).

Ainsi, pas de problème de menu, mais le site reste quand même super accessible :up:

++ ;)

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté

Il ne faut surtout pas cacher le lien, ni avec "display: none", ni avec "visibility:hidden" : des défauts d'implémentation de CSS dans la quasi totalité des lecteurs d'écran font que le lien n'y apparaîtra pas. On aboutit donc à l'inverse du gain d'accessibilité escompté !

Si on tient absolument à masquer ce lien, utiliser plutôt la solution CSS de Paul Bohman, qui ne semble pas poser de problèmes d'accessibilité:

http://www.blog-and-blues.org/weblog/2004/...ne-saurais-voir

Mieux : ne pas cacher le lien, qui a effectivement son utilité pour tout le monde, en fait, y compris dans les navigateurs graphiques ;)

Lien vers le commentaire
Partager sur d’autres sites
Hadrien

Hadrien

Posté
Posté (modifié)

La technique que j'utilise pour avoir le menu en haut bien qu'il soit défini tout en bas dans le document (x)html est la suivante : je mets tout le bloc menu en position absolute et j'indique les coordonnées du menu avec left et top.

Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Menu en bas</title>
<style type="text/css">
#Nav
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10em;
}
#Content
{
	margin-left: 10em;
}
</style>
</head>
<body>
	<div id="Content">
  <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
  <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
	</div>

	<div id="Nav">
  <ul>
 	 <li><a href="#">pouet</a></li>
 	 <li><a href="#">onk</a></li>
 	 <li><a href="#">chabada</a></li>
  </ul>
	</div>
</body>
</html>

Modifié par Hadrien
Lien vers le commentaire
Partager sur d’autres sites
YvesTan

YvesTan

Posté
  • Auteur
Posté

Ok, mais je crois que je suis convaincu par le lien "aller au contenu". Je vais le mettre dans un couleur proche du fond (mais quand même visible). Ca me semble un bon compromis

@+

YvesTan

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

Bonjour,

Si on se place sur le plan de l'accessibilité (ce qui est plus que recommandable...), en mode texte (ou feuille de style désactivée) le menu doit être avant le contenu.

En effet, pour un visiteur qui arrive pour la 1ere fois sur une page, il est indispensable (et logique) qu'il trouve d'abord ce que le site lui propose... donc le menu.

Par contre, s'il connaît déjà bien la page ou s'il y revient souvent, la lecture du menu peut être inutile et devenir une "nuisance". La solution des accès directs (accesskey) s'avère donc indispensable.

Lien vers le commentaire
Partager sur d’autres sites
Voulf

Voulf

Posté
Posté

Salut!

Il existe un bon document en ligne pour cerner le problème :

Plongez dans l'accessibilité

et plus particulièrement :

http://www.la-grange.net/accessibilite/day_9.html

http://www.la-grange.net/accessibilite/day_10.html

Ca se lit bien, n'hésites pas à l'imprimer pour le lire tranquillement.

Lien vers le commentaire
Partager sur d’autres sites
LaurentDenis

LaurentDenis

Posté
Posté
Bonjour,

Si on se place sur le plan de l'accessibilité (ce qui est plus que recommandable...), en mode texte (ou feuille de style désactivée) le menu doit être avant le contenu.

Monique, on ne peut pas simplifier. Les situations concrètes posent des problèmes trop variés. Rapidement :

Si mon menu n'a que 3 ou 4 items, et qu'il s'agit bien des liens essentiels du site (accueil, recherche, accessibilité, mail), alors, c'est sans doute une bonne idée de le placer avant le contenu, disons au moins en page d'accueil.

Mais si mon menu comporte 15 ou 20 liens... l'usage du lien "skip navigation" va devenir systématique pour la quasi-totalité des visiteurs concernés, il me semble (Laissons de côté les accesskeys, trop peu fiables : c'est un plus, pas un mécanisme de base). Dans ce cas, pourquoi le mettre en début de page ? Il devient une nuisance.

Il faudrait encore différencier page d'accueil, carte, et autre pages d'un site. Quand un menu comporte tellement d'items qu'il en devient encombrant... la structure est à revoir: ce n'est plus un menu, c'est une page de table des matières à part entière qu'il s'agit de faire.

Du point de vue structurel, d'autre part, un document HTML étant linéaire, il semble beaucoup plus logique de placer les liens en fin de document, comme des notes en bas de page.

Concrètement ? Un compromis, quand le menu comporte plus de 3 ou 4 liens :

- Placer en tête de page, pour l'accessibilité, les liens essentiels du "menu d'accessibilité" qui comporte lui même un lien vers :

- un second menu, en fin de contenu, qui comporte les autres liens.

Lien vers le commentaire
Partager sur d’autres sites
Denis

Denis

Posté
Posté
Regarde l'excellent CyberCodeur !

Attention, faut pas croire tout ce qu'on lit ! ^_^

Par contre, comme d'habitude, je ne peux que soutenir ce que Laurent a exposé.

Je ne sais plus quoi penser :blink:

T'en fais pas Hadrien. Ça m'arrive tout le temps moi aussi. ;)

Lien vers le commentaire
Partager sur d’autres sites
Denis

Denis

Posté
Posté
Apparemment ça change suivant les écoles :P J'ai conçu mes sites avec les menus en dessous du contenu mais visiblement ç'est discutable.

En fait, c'est une question de suivre ou non les recommandations proposées pour une optimisation des principes d'accessibilité, rien de plus, rien de moins. Si les menus sont sous les contenus et qu'on peut y accéder du haut de la page par un lien, c'est aussi bien que de les trouver directement en haut des contenus eux-mêmes (avec un lien pour sauter directement aux contenus). Deux contextes, mêmes procédés. ^_^

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...