28221 sujets

CSS et mise en forme, CSS3

[RESOLU] Positionnement gauche et droite dans une liste

Bonjour,

Sur mon site, j'ai un menu horizontale construit avec une liste. Les éléments du menu sont alignés à gauche.
Mais maintenant, je voudrai ajouter un texte aligné à droite dans ce menu pour que cela donne ceci :

--------------------------------------------------------------------------------
| • menu1 • menu2 • menu3 • menu4 . . . . . . . . . . . . . . . . . . texte |
--------------------------------------------------------------------------------

tout ce que j'arrive à faire pour le moment, c'est à l'afficher a la suite des autres éléments. J'ai essayé un text-align:right mais ca ne change rien.

Merci pour votre coup de main

mickaël
Modifié par mickael (15 Feb 2005 - 09:59)
Effectivement, comme le suggère Marvin Le Rouge, une très bonne solution consiste à gérer les différents items avec la propriété float (à gauche pour les <li> du menu, et à droite pour ton texte).
super, avec float:right mon texte est correctement aligné à droite.

merci pour votre aide rapide et juste.

mickaël
bonjour,

désolé de réouvrir le sujet mais j'ai encore quelques problèmes.
Je développe sur safari et cela fonctionne bien. Mais ce week-end, j'ai voulu tester sur firefox et mon texte se place à droite, mais une ligne en dessous.

j'ai essayé en mettant float:left pour mes menus et float:right pour mon texte mais tout s'aligne à gauche. Alors qu'avec juste float:right cela fonctionne que pour safari.

Voilà mon css :

.menuhaut {
 margin:0;
 padding-left:5px;
}
.menuhaut li {
 list-style-type: none;
 background-image: url(../images/greysquares.gif);
 background-repeat: no-repeat;
 background-position: 0% 65%;
 padding-left:10px;
 padding-right:5px;
 display:inline;
}
.liDate {
 list-style-type: none;
 background-image: none;
 color:#FFFFFF;
 float: right;
}


et mon fichier :

<div id="menu">
  <ul class="menuhaut">
   <li><a href"index.php">accueil</a></li>
   <li class="liDate">mon texte</li>		
  </ul>
</div>
J'espère que comme cela ça te convient (je n'ai laissé que le code relatif à ta question) :
<style>
    *{margin:0;padding0}
  .menuhaut li {
  list-style-type: none;
  padding:0 10px 0 0;
  float:left;
  }
  .date {float: right}
</style>

<body>
  <ul class="menuhaut">
      <li><a href="index.php">accueil</a></li>
      <li><a href="index.php">rubrique 1</a></li>
      <li><a href="index.php">rubrique 2</a></li>
 </ul>
 <p class="date">La date</p>
</body>
Merci Xavier,

avec ton code cela fonctionne. J'ai retirer un truc dans ma feuille de style qui devait bogguer.

bonne journée
Sujet clos
Aller à