[Résolu]Liste inversée : 1, 2, 3 devient 3, 2, 1

Bonjour,

J'ai cette liste en xhtml :

 <div id="top">
	<ul>
      <li><a href="#" class="last">Accessibilité</a></li>
      <li><a href="#">Plan du site</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
	</div>

Et ça du côté de la css :

#top ul {


width: 100%;
  margin: 0;
  padding-bottom: 0.4em;
}

#top ul li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;


}

#top li a {
  padding: 0 0.2em 0 0.2em;
  float: right;
  font: 400 0.8em arial, sans-serif;
  color: #666;
  border-right: 1px solid #fff;
  text-decoration: none;
}

#top li a.last {
  border-right: 0;
}

#top li a:hover {
  color: #ff9900;
}

Je voulais afficher à droite ce menu dans cet ordre :
Contact | Plan du site | Accessibilité

Mais cela s'affiche bien à droite mais dans cet ordre :
Accessibilité | Plan du site | Contact

Est-ce normal docteur? Pourquoi cette inversion?

Merci de m'expliquer cette bizarrerie
Modifié par jpsartre (12 Oct 2006 - 18:08)

Salut

jpsartre a écrit :
Mais cela s'affiche bien à droite mais dans cet ordre :
Accessibilité | Plan du site | Contact

Regarde ton code html, il est défini dans cet ordre là. Inverse ta liste si l'ordre d'apparition ne te conviens pas

++

Question : pourquoi les liens sont-ils flottants à droite ? Le fait de placer les li en affichage de type en-ligne ne suffit-il pas déjà ?

Petit rappel : pour trois éléments a, b, c placés dans cet ordre dans le code et flottants à droite, on verra apparaître, de gauche à droite : c, b et a.

Très logiquement : le premier élément (a), flottant à droite, vient se placer tout à droite. Le deuxième vient se placer à côté, et le troisième encore à côté.

Faire flotter à droite chaque élément d'une liste est déconseillé, car l'ordre d'affichage et l'ordre dans le code ne correspondent alors plus... dans certains cas, cela peut poser des problèmes d'accessibilité (navigation au clavier « inversée », liste inversée au niveau du code pour obtenir l'affichage voulu, etc.).

Merci beaucoup pour vos explications,

J'ai fait cela pour que l'ordre d'affichage et l'ordre du code html correspondent :

#top {
text-align: right;

}
#top ul {


width: 100%;
  margin: 0;
  padding-bottom: 0.4em;
}

#top ul li {

display: inline;
  margin: 0;
  padding: 0;
  list-style: none;


}

#top li a {
	padding: 0 0.2em 0 0.2em;
   		font: 400 0.8em arial, sans-serif;
	color: #666;
  	border-right: 1px solid #fff;
	text-decoration: none;
}

#top li a.last {
	border-right: 0;
}

#top li a:hover {
	color: #ff9900;
}

Merci encore.
A bientôt