[Résolu] Alignement vertical d'un texte avec sa puce dans <li>

Bonjour à tous,
Voici un petit problème que j'ai du mal résoudre :
J'ai un menu vertical de largeur fixe, à l'interieur des balises <li> un simple lien.
Quand ce lien dépasse sa longueur maximale le reste de la ligne passe sous la puce ... et j'aimerai que le texte reste aligné verticalement.

voila le resultat


Voila ce que j'aimerai


Ci apres la css pour li :

a écrit :
#menu ul li{
list-style-image: url(../images/BulletBlue.gif);
padding: 3px;
width:175px;
list-style-position: inside;
border-bottom: 1px solid #BBB;
}

Un idée ? =)

Merci
Modifié par spiral123 (07 Oct 2009 - 15:28)

Salut,

spiral123 a écrit :
Un idée ? =)

Ne pas utiliser la propriété list-style-image, mais mettre tout simplement l'image en background et rajouter un padding gauche.

Bonjour,

Ce ne serait pas plutôt la propriété list-style-position: inside; qui serait à changer?

Il faudrait plutôt utiliser :

list-style-position:outside;

Modifié par Tony Monast (07 Oct 2009 - 14:46)

Tony Monast a écrit :
Bonjour,

Ce ne serait pas plutôt la propriété list-style-position: inside; qui serait à changer?

Je vérifie à l'instant...

Avec list-style-position: outside; ca fonctionne mais la border-bottom n'est plus appliquée sous la puce.

Je vais tester la proposition de Agylus ....

Agylus a écrit :
Salut,

Ne pas utiliser la propriété list-style-image, mais mettre tout simplement l'image en background et rajouter un padding gauche.

Merci avec quelques modif ca marche bien !

Voila le code correct donc :

#menu ul li{
	background: url(../images/BulletBlue.gif) left 6px no-repeat;
	padding: 3px 3px 3px 20px;
	width:160px;
	list-style-type:none;
	border-bottom: 1px solid #BBB;
}

Bonjour,

Si tu considère le problème [résolu], merci d'éditer ton premier message et de l'indiquer dans son titre.