28220 sujets

CSS et mise en forme, CSS3

Décalage dans le passage à la ligne quand le lien est sur 2 lignes

J'ai fait mon maximum pour chercher une réponse à ce problème (bouquins, site, recherche sur les forums) mais rien n'y fait.
Par contre ce qui m'embête c'est que j'ai l'impression que c'est tout simple Smiley rolleyes .

voici mon problème: http://www.cdjc.be/bernard/cssprobleme.jpg

Comme le lien est trop grand, il passe à la ligne et se retrouve alors sous l'image qui est en background. J'aimerais que cette seconde ligne débute au même niveau que la première.
Je veux laisser le background-image sur la balise <a> et pas sur la <li> car j'aimerais faire un a:hover qui change l'image.
En fait, un peut comme une puce au format image mais en utilisant un background-image à la place... vous me suivez?

voici la portion du code qui démontre ce que je dis (le vrai menu déroulant est beaucoup plus long Smiley murf ...

<html>
<head>
<style>

#menu {
background-color:#ddd;
width:200px;
}

#menu li {
list-style-type:none;
}

#menu li a {
background-image:url(biere.gif);
background-repeat:no-repeat;
padding-left: 14px;
}

</style>
</head>
<body>

<div id="menu">
<li><a href="#">test ligne </a></li>
<li><a href="#">test ligne qui doit être allignée sur la première ligne</a></li>
<li><a href="#">test ligne </a></li>
</div>

</body>
</html>


merci d'avance pour les pistes...
Merci à tous pour le coup de main, j'ai un souci avec la solution d'Igor (que je remercie tout de même Smiley clapclap )
mais la solution de Xavier a l'air de fonctionner à merveille...

je verrai demain au travail si j'arrive à adapter ces solutions sur mon grand menu.
Je reviendrai alors écrire [résolu] sur le forum ou alors je viendrai faire part de ce qui poserait encore problème.

Un tout grand merci à vous Smiley prie
Sujet clos
Aller à