Menu en css

bonjour,
je suis en train de faire un menu en css vertical avec ul et li.
je voudrai que mes liens soit alignés a droite et que lorsque je passe la souris sur un lien avoir un carré blanc qui s'affiche sur le gauche.

jusqu'a là mon problème et que mes lien ne se mettent pas a droite et que lorsque je passe ma souris sur un lien le texte bouge a cause du carré blanc qui s'affiche. Je voudrai que le texte ne bouge pas.

#menu { 
width:266px; 
height: 374px; 
background:url(bg-menu.jpg) top right; 
float:left; 	
overflow:auto;
}

#menu ul { 
	list-style-type: none;
}
#menu ul li {
	padding-right:20px;

}
#menu li a {
	font-size: 1.0em; 
	color: #333; 
	text-decoration: none;
	text-align:right; 
	line-height:30px;
	padding-right:20px;
	padding-left: 15px;
}
#menu li a:hover {
	border-left: #FFFFFF 14px solid;
	padding-left:-14px;

}

Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum.
En l'état, j'ai peur qu'il ne soit difficile de t'apporter une solution.

alors je sais pas se que tu veus mais voici le html :

<div id="menu">  
    <ul>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
    </ul>
</div> 

le css c'est celui du haut. apres je suis en local donc j'ai pas de page en ligne dsl
Modifié par fabrice88 (31 Aug 2009 - 19:30)

Bonjour,

Un peu de maïeutique:

1. Mettons que tu veux ménager un espace de 14px à gauche du texte du lien, espace qui sera occupé par ta bordure. Tu veux que cet espace s'ajoute à celui réservé entre ta (future) bordure et le texte du lien. Que fais-tu? (Deux solutions.)

2. Maintenant, au survol, tu as 14px d'espace qui se rajoute à gauche (la bordure). Est-ce que tu ne peux pas diminuer ou supprimer ta réserve d'espace à gauche pour composer, uniquement au survol? (Ici, la solution découle de l'option prise en (1).)

Tu devrais avoir la réponse.

Je rajoute juste que si le style au survol s'appliquait aussi au focus, afin de faciliter la navigation au clavier, ça serait bien. Le survol, c'est la pseudo-classe :hover. Le focus, c'est quelle pseudo-classe déjà?