Menu cassé lors du redimensionnement

Bonjour,

Sous Firefox (au moins dans ses versions 10 et 11), le menu sur ma page d'accueil est cassé si on diminue la taille du site (avec les touches Ctrl et "-") : le lien "Vos avis" passe en dessous des autres.

Ce menu est pourtant censé occuper toute la taille disponible. Le code HTML est basique :

<div id="navigation">
	<ul>
		<li class="current_page_item first">Accueil</li>
		<li class="large other"><a href="http://www.mediatheque-erre.fr/blog/infos" accesskey="0">Infos pratiques</a></li>
		<li class="large other"><a href="http://www.mediatheque-erre.fr/blog/agenda">Animations</a></li>
		<li class="large other"><a href="http://www.mediatheque-erre.fr/blog/adultes">Adultes</a></li>
		<li class="large other"><a href="http://www.mediatheque-erre.fr/blog/jeunesse">Jeunesse</a></li>
		<li class="large last"><a href="http://www.mediatheque-erre.fr/blog/avis">Vos avis</a></li>
	</ul>
</div>

Et voici le code CSS qui lui correspond :

#navigation { width: 100%; } /* pour IE6 */
#navigation, #navigation li a { overflow: hidden; background: #7E7E7E url("../img/white_bottom.png") 0 bottom repeat-x; }
	#navigation ul, #navigation li { padding: 0; margin: 0; display: inline; list-style-type: none; }
	#navigation li { float: left; width: 115px; }
		#navigation li.current_page_item, #navigation li a { display: block; line-height: 1em; padding: 23px 0 33px 0; text-align: center; font-size: 1em; text-transform: uppercase; white-space: nowrap; }
		#navigation li.first, #navigation li.other { border-right: 1px solid #FFF; }
		#navigation li a { color: #FFF; }
			.ISIE67 #navigation li a { zoom: 1; }
			#navigation li.large { width: 162px; }
			#navigation li a:hover, #navigation li a:active, #navigation li a:focus { background-color: #9CC; }
			#navigation li.current_page_item { background: #FF494E url("../img/nav_arrow.png") center bottom no-repeat; }

Quelqu'un a une idée de ce qui cloche ? Merci de votre aide !

Salut,

Youhou j'ai réussi ! Je ne comprenais pas pourquoi il y avait se comportement vu qu'apriori la somme des valeurs définies ne dépassait pas les 930px du conteneur.

En fait, il faut uniformiser les styles des li et appliquer le même à toutes les puces. Enfin du moins, c'est comme ça que je suis parvenu à un résultat qui ne saute plus à la ligne. De plus sur chaque page le current item n'est plus un lien, je pense que ça favorise ce comportement (car du coup un li à le même type de rendu que les a qui sont enfant des autres li (en display: block etc).

Ce que je te propose :
- scinder les styles ligne 105 (#navigation li.current_page_item, #navigation li a), ne pas lié le current item au reste des liens.

-supprimer #navigation li.large et uniformiser en appliquant le même style à chaque li.

Ensuite appliquer ce style aux li :

#navigation li {
    display: table-cell;
    width: 154px;
}

154px car on retire 1px pour la bordure.

Et là ça fonctionne (ouf).

Un très grand merci pour le temps passé à plancher là dessus !

Je comprends mal ce que tu veux dire par "scinder les styles ligne 105" : il s'agirait de conserver au "lien actif" (celui de la page sur laquelle on se trouve) son statut de lien, et de lui appliquer le style particulier voulu au lieu de l'appliquer au "li" ?

Effectivement, en transformant tout en liens, y compris la page active, ça fonctionne... mais quid de l'accessibilité ? Il ne restera plus, alors, que la couleur de fond rouge pour indiquer aux visiteurs sur quelle page ils se trouvent... À moins que l'on puisse signaler ça autrement, pour les utilisateurs d'un lecteur d'écran par exemple ? Quelqu'un connaît-il une solution à ce problème ?

Entre deux mots, il faut choisir le moindre... Qu'en pensez-vous ?

Personnellement, quand je regardes les sites actuels je n'en vois pas beaucoup qui supprime le lien de navigation de la page active. A mon avis, l'utilisateur est habitué à ce mode de fonctionnement. Si ton site est bien construit, rien que visuellement on saura sur quelle page on se trouve et je pense que ça suffit.

De plus je n'ai pas trouvé dans le référenciel Accessiweb un point qui disait que ça pouvait être un problème. Juste ceci:

http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale.html#liens a écrit :
Critère 12.12 [Or] Dans chaque page Web, la page en cours de consultation est-elle indiquée dans le menu de navigation ?

Sinon pour les lecteurs vocaux on pourrait mettre un title, mais ça ne m''étonnerais pas qu'il y ai déjà un système qui repère la page active de base dans le menu (aucune source). Mais bon peut être qu'un expert Accessiweb qui passe par là va venir nous dire ce qu'il en est plus exactement ^^.
Modifié par Gili (19 Mar 2012 - 19:16)

Je me demandais si l'on ne pouvait pas appliquer la solution suivante, inspirée de cette page présentant comment créer des tabs accessibles (en anglais) :
- j'oublie mon système actuel (qui consistait à supprimer le lien du menu pour la page active, en ne conservant que le texte), qui pose effectivement des problèmes de CSS apparemment insolubles ;
- tous les liens, y compris pour la page active, sont donc actifs ;
- le lien vers la page active est précédée d'un <span class="current-info">page courante :</span>, qui est masqué via CSS grâce à un .current-info { position: absolute; top: -999em; } Le texte sera ainsi lisible pour des utilisateurs de lecteur d'écran, par exemple.

Qu'en dites-vous ?

Je m'étonne néanmoins, vu à quel point ce type de menu est répandu, de ne pas trouver sur Internet plus d'infos sur ce problème... À moins, comme ne le suggère Gili, qu'il y ait effectivement "un système qui repère la page active de base dans le menu" sur les appareils type lecteur d'écran ? (mais je vois mal comment cela serait possible...)
Modifié par Fix (01 Apr 2012 - 18:22)