Problème de menu avec float:right

Bonjour.

J'ai créé sur ma page un menu avec une arborescence du genre :

<ul class="monmenu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
</ul>

Jusque là tout va bien...

Mais quand j'applique la propriété float:right à ma classe de style #monmenu li, mes liens apparaissent sur la page alignés à droite exactement à l'emplacement oz je les veut, mais ils sont inversés...

Exemple :
Au lieu d'avoir, sur ma page : Lien 1 / Lien 2 / Lien3 (aligné à gauche),
j'obtiens : Lien 3 / Lien 2 / Lien1 (aligné à droite)

Pourquoi ? Existe-t-il une propriété qui permet de replacer mes liens dans le bon ordre ?

Merci d'avance.

Hello,

Ce comportement d'élements en float est tout à fait normal. En effet, lorsque tu positionnes un ou des élément(s) avec la propriété float: left; ou float: right;, le(s) élément(s) sont tout d'abord positionné dans le flux courant du docuement et ensuite chaque élément est positionné à gauche ou droite l'un après l'autre.
Ainsi, par exemple avec ton menu, on obtient ceci :
Lien 1
Lien 2
...
Lien 5

Ensuite, on obtient :
Lien 2 Lien 1
Lien 3
Lien 4
Lien 5
=>
Lien 3 Lien 2 Lien 1
Lien 4
Lien 5
=>
...
=>
Pour obtenir au final :
Lien 5 Lien 4 Lien 3 Lien 2 Lien 1


Ainsi si tu veux obtenir l'alignement inverse, il faut que tu inverses les éléments dans ta page HTML de cette facon :

<ul class="monmenu">
<li><a href="#">Lien 5</a></li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 1</a></li>
</ul>

J'éspère que cela t'aidera à comprendre .
Modifié par ymhotepa (05 Mar 2006 - 21:43)

Oui oui ça m'aide à comprendre.

Merci!

sinon mettre float-left