Menu principal et contenu : L'ordre de présentation ?

yhugo · 13 Janvier 2009

Bonjour à tous,

Selon certaines règles d'accessibilité, et par ricochet de référencement, c'est une bonne pratique de placer le contenu d'une page avant le menu principal dans le code HTML ...

Cependant sur le Web peu de gabarits XHTML/CSS proposent une telle structure ... Et il me semble que peu de tutoriel en font mention.

Donc comment par CSS on peut placer le menu au-dessus sans qu'il soit au-dessus dans le HTML.

Pour ma part j'ai essayé avec du positionnement absolu et relatif, mais dans IE (Évidemment) il y avait souvent problème.

Quelqu'un à un astuce ?

Merci et bonne fin de journée

Djolhan · 13 Janvier 2009

Avec le Z-index tu peux gérer cela, maintenant, c'est sur que suivant le design, c'est plus ou moins évident ...

Tu mets ton contenu sur un plan, et le menu sur le plan du dessus ce qui l'amènera en haut de ton site (ou tu veux en fait, apres, tu joues avec le css)

AlainRoche · 13 Janvier 2009

En CSS c'est plutôt avec float right/left que je gèrerai ça. Sur notre site de VoD, le menu est placé à droite, avec le contenu qui vient avant le menu dans l'html, les 2 blocs sont en float left donc ça marche sans souci.

yhugo · 13 Janvier 2009

Ok, peut-être me suis-je mal exprimé ; Je vais donc donner un exemple :

Comme vous pouvez voir ci-dessus l'en-tête (#header) qui contient le menu principal est après le contenu (#content), donc dans le code le titre (H1) sera en haut complètement de la page. Mais dans ma présentation (CSS) je veux que l'en-tête (#header) qui contiendra probablement le logo en plus de menu (horizontal) soit complètement en haut de la page ! En firefox pas de problème, ça fonctionne mais avec IE (6 et 7) l'en-tête (#header) disparait complètement de l'écran même si j'ai ajusté la profondeur avec z-index.

Le HTML :

<div id="container">  

  <div id="wrapper">

	<div id="content">		
		<h1>Titre principal</h1>

		<h2>Sous-titre</h2>
		<h3>Sous-titre</h3>
	</div>
	<!-- FIN #content-->

  </div>
  <!-- FIN #wrapper-->

  <div id="header">
	<div id="menuPrincipal">
	<ul>
	<li><a href="index.php">Accueil</a></li>
	<li><a href="contact.php">Contact</a></li>
	<li><a href="plan-du-site.php">Plan du site</a></li>
	<li><a href="index.php?lg=en">English</a></li>
	</ul>
	</div>
  </div>
  <!-- FIN #header-->

  <div id="aSide">Un coté</div>
  <!-- FIN #aSide-->

  <div id="bSide">Un autre coté</div>
  <!-- FIN : #bSide-->

  <div id="footer">Le pied-de-page</div>
  <!-- FIN #footer-->

</div>
<!-- FIN #container-->

La CSS :

/*LAYOUT 2 COLONNES GAUCHE AVEC CONTENU EN PREMIER*/
div#container {width:700px;margin:0 auto;padding-top:50px;position:relative;z-index:1;}
div#wrapper {}
div#content {float:right;width:500px}
div#header {background:yellow;position:absolute;top:0;left:0;width:700px;height:50px;z-index:1000;}
div#aSide {float:left;width:200px}
div#bSide {float:left;clear:left;width:200px}
div#footer {clear:both;width:100%}
/*/\*/

Merci et à bientôt !

**Kioob** · 13 Janvier 2009

Un truc tout bête, sur ton #container essaye d'ajouter un "left:0" :

#container {width:700px;margin:0 auto;padding-top:50px;position:relative;left:0}

yhugo · 13 Janvier 2009

Salut Kioob,

non, malheureusement ça ne fonctionne pas ...

AlainRoche · 13 Janvier 2009

Tu as la possibilité de déplacer le code qui écrit le header? Parce qu'il est très bizarrement placé là. j'ai entendu dire dans une conférence SEO qu'il valait mieux mettre le contenu avant les menus de navigation et ensuite avec du CSS on le refait remonter, mais c'est se casser la tête pour rien et à mon avis de la suroptimisation inutile. Si tu peux modifier le code qui crée l'html, y'aura même pas besoin de CSS, le header se retrouvera en haut tout seul.

Jouer avec les z-index les position relative / absolute, ce sont des solutions crades à un problème crade, autant régler le problème à la racine.

Modifié 13 Janvier 2009 par AlainRoche

**Kioob** · 13 Janvier 2009

Là comme ça je vois pas ce qui coince. Si ça peut t'aider, voici un exemple où c'est utilisé (oui c'est une page d'erreur, et oui ça ne paye pas de mine, mais ça fonctionne).

Pour ma part j'utilise cette méthode aussi parce que cela facilite la navigation à mon sens, et je trouve plus logique de placer en premier ce qui est important. Je ne vois pas ce que ça a de "crade". :S

Sora · 14 Janvier 2009

Selon certaines règles d'accessibilité, et par ricochet de référencement, c'est une bonne pratique de placer le contenu d'une page avant le menu principal dans le code HTML ...

Une petite source (sérieuse et récente) pour confirmer ça ?

Techniquement, ce n'est pas si important et même assez perturbant, l'utilisateur s'attend à avoir le menu en haut de page, c'est plus logique. Le plus important en termes d'accessibilité c'est de prévoir des lien d'évitement (aller au menu / aller au contenu).

yhugo · 14 Janvier 2009

Une petite source (sérieuse et récente) pour confirmer ça ?

Techniquement, ce n'est pas si important et même assez perturbant, l'utilisateur s'attend à avoir le menu en haut de page, c'est plus logique. Le plus important en termes d'accessibilité c'est de prévoir des lien d'évitement (aller au menu / aller au contenu).

Bonjour à tous, salut Sora ...

voici ma source, je sais pas si on peut dire qu'elle est récente, cependant je crois que les arguments dans ce texte son toujours d'actualité :

Qui en bénéficie ?

Marc en bénéficie. Tel que montré dans les exemples précédents, Lynx affiche le contenu dans l'ordre dans lequel il apparaît dans le code source HTML. Ce qui fait que Marc doit faire défiler toute la barre de navigation à chaque fois qu'il visite votre page. Le défilement est chiant.

Jackie en bénéficie. JAWS, tout comme Lynx, présente le contenu dans l'ordre dans lequel il apparaît le code source HTML, non pas l'ordre d'affichage à l'écran. Avec JAW, le problème est plus important, parce-que Jackie doit attendre que JAWS ait lu tout le contenu de la barre de navigation avant de pouvoir écouter le vrai contenu et il n'existe aucun moyen sur de sauter directement au contenu voulu. (Nous parlerons de ce problème lundi prochain)

Google en bénéficie. Google donne plus de poids au contenu qui se trouve au début de la page. Il s'agit du début du code source HTML de votre, non pas le contenu visuel du haut de votre page. En fait, la plupart des personnes qui connaissent ce truc font partie du milieu de l'optimisation des moteurs de recherche ; pour eux les bénéfices de l'accessibilité sont secondaires.

Salut Kioob, merci pour ton exemple ! Le faire en javascript serait sûrement une solution, surtout si je n'arrive pas à le faire en CSS; Merci je vais regarder ça

Merci de prendre du temps pour me répondre, bonne journée à tous !

Sora · 15 Janvier 2009

Je me base sur une intervention de QuentinC sur Alsacreations qui est très certainement le premier concerné par le problème : http://forum.alsacreations.com/topic-6-390...ts.html#p280208

Modifié 15 Janvier 2009 par Sora

yhugo · 15 Janvier 2009

Je me base sur une intervention de QuentinC sur Alsacreations qui est très certainement le premier concerné par le problème : http://forum.alsacreations.com/topic-6-390...ts.html#p280208

Bonjour Sora,

pour moi l'argument du lecteur vocal et celui des moteurs de recherche me semble suffisant pour justifier une telle pratique. Surtout dans un milieu où l'on fait des sites Web pour qu'ils soient vues et facilement trouvable par Google, parce que nos clients nous donnent pas mal d'argent pour des résultats ... Est-ce que les gens qui naviguent sur un site avec un navigateur de type lynx vont vraiment être déroutés par cette structure ? Personnellement je ne crois pas ! Surtout si le site respecte globalement les règles d'accessibilité ... Et avec un lien "Aller au menu", je crois que nous atténuons le désagrément, si désagrément il y a.

Y'a pas d'absolue à ce niveau, comme dirait l'autre ; Après tout, c'est peut-être seulement un choix ergonomique.

ciao, bonne journée !

**Kioob** · 15 Janvier 2009

En temps qu'utilisateur occasionnel de Lynx, je préfère très très largement quand les menus sont placés après le contenu : flèche du bas pour lire le contenu, flèche du haut pour accéder aux divers menus ; rien de plus simple je trouve. Et pas besoin de scroller au changement de page, le contenu est de suite visible. Je pense qu'il en est de même pour un lecteur vocal.

Sora · 16 Janvier 2009

pour moi l'argument du lecteur vocal et celui des moteurs de recherche me semble suffisant pour justifier une telle pratique.

Désolée, j'aurais peut-être dû préciser que Quentin à qui je faisait référence est une utilisateur de lecteur vocal.

Comme le souligne Kioob et moi déjà plus haut, l'important c'est SURTOUT la présence de liens d'évitement. MAIS le fait est que la plus courrante des pratiques étant que le menu soit présenté avant le contenu, les utilisateurs s'attendent en arrivant sur un site à avoir le menu en premier.

Personnellement, quand je navige sans CSS, ça me fait particulièrement chier (désolée du vocabulaire, mais c'est le plus approprié) de devoir aller en bas de page pour acceder au menu, et d'autant plus si c'est un site dont je n'ai rien à faire de la page d'accueil.

Modifié 16 Janvier 2009 par Sora

**Kioob** · 16 Janvier 2009

Parce que tu n'utilises pas le clavier peut être ? Enfin c'est sûrement une question d'habitude comme tu dis. Je préfère pour ma part accéder directement au contenu.

yhugo · 16 Janvier 2009

Là comme ça je vois pas ce qui coince. Si ça peut t'aider, voici un exemple où c'est utilisé (oui c'est une page d'erreur, et oui ça ne paye pas de mine, mais ça fonctionne).

Pour ma part j'utilise cette méthode aussi parce que cela facilite la navigation à mon sens, et je trouve plus logique de placer en premier ce qui est important. Je ne vois pas ce que ça a de "crade". :S

Salut Kioob,

voici comment je le fais avec jQuery et c'est ultra-simple :

<script type="text/javascript" src="js/jquery/jquery-1.2.6.pack.js"></script> 
<script type="text/javascript">	
// <![CDATA[
$(document).ready(function(){

//Mettre le header en haut de la page si JS est activé
$("#header").insertBefore("#wrapper");
//

});
// ]]>
  </script>

Voilà, bon weekend à tous ... ciao

**Kioob** · 16 Janvier 2009

Bonsoir,

un truc m'échappe, quel est l'intérêt de le faire en JS en fait ? Coté accessibilité/portabilité/performances/simplicité, ça me choque un peu. Non ?

(et puis je ne suis pas fan de jQuery, mais c'est une autre histoire )

**captain_torche** · 16 Janvier 2009

yhugo : le souci, c'est que tu sembles partir du principe que toute personne sans JavaScript est un aveugle. Or, ce n'est pas le cas ! Il arrive que des entreprises limitent l'utilisation de JavaScript par sécurité, ou qu'il soit désactivé pour une raison ou une autre. On peut même imaginer un bug dans ton code ... qui rendrait de fait ta page incompréhensible à tout le monde !

Je mets personnellement le contenu après le header et les menus, les moteurs de recherche n'ont pour l'instant jamais eu de problèmes avec ça : ils savent trouver le contenu pertinent.

Quant aux liens d'évitement, j'avoue ne quasi jamais les utiliser.

yhugo · 19 Janvier 2009

Bonjour à tous, merci Kioob et captain_torche pour vos commentaires,

je comprends mieux le problème qu'apporte mon déplacement du #header avec javascript ... Et je constate moi aussi que le fait de mettre le menu principal avant le contenu n'influence pas trop trop l'indexation ; Cependant j'aimerais quand-même trouver une astuce CSS pour solutionner ma question de départ.

Merci et bonne journée !

Modifié 19 Janvier 2009 par yhugo

**Kioob** · 19 Janvier 2009

Y a pas vraiment "d'astuce", c'est un simple positionnement tout ce qu'il y a de plus classique, comme dans l'exemple que je t'ai indiqué. J'utilise ça depuis des années sans le moindre problème ou "bidouille" CSS/JS.

Maintenant j'ai la flegme d'étudier ta CSS pour voir où est ton erreur, désolé

Connexion

Menu principal et contenu : L'ordre de présentation ?

Sujets conseillés

yhugo

Djolhan

AlainRoche

yhugo

Kioob

yhugo

AlainRoche

Kioob

Sora

yhugo

Sora

yhugo

Kioob

Sora

Kioob

yhugo

Kioob

captain_torche

yhugo

Kioob

Veuillez vous connecter pour commenter

Parcourir

Activité