[ resolu ] Liste qui s'inverse à l'affichage

Bonjour,

1/ désolé pour le titre peu clair, mais je n'ai pas mieux
2/ j'ai une liste gérée par CSS pour un menu horizontal (code en bas de message)
- à l'affichage source, c'est OK ->

<div id="menuT"><ul class="menu">
<li><a href="/index.php" title="accueil">accueil</a></li>
<li><a href="/pages/situation.php" title="situation">situation</a></li>
<li><a href="/pages/liens.php" title="liens">liens</a></li>
<li><a href="/pages/contact.php" title="contact">contact</a></li>
<li><a href="/pages/informations.php" title="information">informations</a></li>
</ul></div>

- à l'affichage ecran, c'est inversé ! cad que c'est visible comme si la liste etait ordonnée comme ça ->

<div id="menuT"><ul class="menu">
<li><a href="/pages/informations.php" title="information">informations</a></li>
<li><a href="/pages/contact.php" title="contact">contact</a></li>
<li><a href="/pages/liens.php" title="liens">liens</a></li>
<li><a href="/pages/situation.php" title="situation">situation</a></li>
<li><a href="/index.php" title="accueil">accueil</a></li>
</ul></div>

Il n'y a pas de styles qui porteraient le meme nom (j'ai verifié 2 fois )
CSS du menu

/* MENU */ 

#menuT { border: 0; width: 760px; padding-top: 122px; text-align: right; }

ul {
list-style-type: none;
width: 90%;
}

.menu li { float: right; }

.menu a {
font: 11px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0 2px;
width: 105px;
height: 15px;
display: block;
text-align: center;
border: 1px solid #C00000;
text-decoration: none;
color: #fff;
background: #C00000;
}

.menu a:active {
font: 11px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-decoration: none;
}

.menu a:visited {
font: 11px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #fff;
text-decoration: none;
}

.menu a:hover {
font: 11px Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
background: #fff;
border: 1px solid #C00000;
text-decoration: none;
color: #C00000; 
}

pouvez-vous me dire où est mon erreur svp ? merci
Modifié par DudePHP (16 Jan 2007 - 12:30)

De ça :

.menu li { float: right; }

chaque li se positionne à droite de son successeur dans le flux, d'où l'affichage "inversé"

MrPatate a écrit :
chaque li se positionne à droite de son successeur dans le flux, d'où l'affichage "inversé"

Ou plutôt : le premier li se positionne tout à droite, le deuxième vient se loger le plus à droite possible, c'est à dire à gauche du premier, le troisième à gauche du deuxième, etc.

Si on veut des li flottants ET le tout aligné à droite, on peut procéder de deux manières :

[b]Première méthode :[/b]
ul.menu {text-align: right;}
ul.menu li {display: inline;}

[b]Deuxième méthode :[/b]
ul.menu {float: right;}
ul.menu li {float: left;}

merci de ta reponse

j'y ai pensé alors j'ai tenté d'inverser l'ordre des liens LI, mais dans ce cas, l'ordre reste le meme, cad le mauvais !

ensuite, j'ai supprimé le float: right, mais dans ce cas, ça ne se positionne plus en ligne mais l'un sous l'autre

any other idea ?

DudePHP a écrit :
any other idea ?

Sauf erreur de ma part, j'ai donné les deux solutions possibles (sans changer l'ordre des éléments dans le HTML) dans mon message ci-dessus.

désolé pour le doublon, plantage...
(et j'ai repondu avant d'avoir vu la derniere reponse, because plantage)

merci pour l'aide

alors, la solution qui remet les pendules à l'heure et les LI dans l'ordre c'est ->

ul.menu {
list-style-type: none;
width: 90%; /* précision pour Opera */
text-align: right; }

ul.menu li { float: left; }

/* puis le reste de la CSS */

souci restant : le menu n'est plus aligné à droite, mais centré...
Modifié par DudePHP (15 Jan 2007 - 12:28)

Pour ça tu peux faire flotter le <ul> à droite, et les items <li> à gauche :

ul.menu{
float:right
}

ul.menu li{
float:left
}

Il faut ensuite que le bloc suivant le ul possède un clear:both pour qu'il ne passe pas à coté de la liste mais reste en dessous

hum... non, marche pas ça... ça reste centré

DudePHP a écrit :
hum... non, marche pas ça... ça reste centré

Pas étonnant, si tu te mets à mélanger tout ce qu'on te propose.
J'avais proposé deux solutions, et au final ça donne ça :

ul.menu {
	list-style-type: none;
	width: 90%; /* Un machin qui traine mais qui ne me dit rien qui vaille */
	text-align: right; /* Un bout de la première solution */
}
ul.menu li {
	float: left; /* Un bout de la seconde solution */
}

Pour rappel, j'avais proposé :

ul.menu {text-align: right;}
ul.menu li {display: inline;}

Et une deuxième solution avec des flottants, mais qui ne marchera que si ul n'a pas de largeur fixe.
Modifié par Florent V. (15 Jan 2007 - 18:25)

merci pour ta reponse.
c'est donc exactement comme tu l'as proposé dans ma CSS actuelle.
je l'ai fait à l'identique, et ça corrige bien le probleme
mais ça centre tout alors que le menu doit se trouver aligner à doite.

DudePHP a écrit :
merci pour ta reponse.
c'est donc exactement comme tu l'as proposé dans ma CSS actuelle.
je l'ai fait à l'identique, et ça corrige bien le probleme
mais ça centre tout alors que le menu doit se trouver aligner à doite.

Heu... on pourrait voir la page ?

Parce que théoriquement ça n'est pas censé se comporter ainsi. Tu dois avoir une erreur quelque part.

je viens de trouver une solution "batarde"
j'ai placé le menu dans un div avec un margin-left à 125px, poussant le tout vers la droite, et c'est ok

merci pour l'aide et le temps passé à replacer tout ça dans le bon ordre, c'est cool !