C'est vrai que c'est plus simple...
(j'allais bricolé avec javascript :-* )
Je vous montrerai le rendu final un de ces quatres ;-)
Merci encore!!

[quote="jojolapine"]je pense par exemple à changer les puces de couleur en passant la sourie dessus...[/quote]
Dans ce cas, au lieu d'avoir l'image en arrière-plan de <li>, mets-le en arrière-plan du <a> et change l'image en ajoutant un li a:hover {} dans ta feuille de style et ajuste les positions au besoin. Ajuste surtout les marges pour que le texte ne soit pas sur l'image elle-même.

Merci Cyrano d'avoir pris le temps de m'aider, je vais voir si je prend ta première solution (en changeant le absolute en relative) ou la deuxième...
Selon comment évolue mon menu (je pense par exemple à changer les puces de couleur en passant la sourie dessus...)
merci infiniment et à bientôt pour la suite de mes problèmes :-* :langue:

[quote="jojolapine"]...mais sous ie et opera, tout mes li sont ratatiné ensemble, ...[/quote]
Alors on va ruser en procédant autrement, j'ai testé sous FF, IE7, Opera ainsi que Safari pour Windows et le résultat est strictement le même sous les quatre :
[code]#left ul {
list-style: none;
}
#left ul li {
position: relative;
height: 30px;
background-image: url('./img/main2.png');
background-position: 0 0;
background-repeat: no-repeat;
}
#left ul li a {
position: absolute;
top: 2px;
left: 55px;
}[/code]
Le truc : on supprime les puces de listes et on met l'image en arrière-plan des <li>, ensuite on positionne le lien de façon à ce qu'il soit bien à droite de l'image et en hauteur pour être au même niveau que le doigt.

Enjoy! ;)

roooo :cry:
Zut alors...
Bon alors reste plus que la solution de compatibiliser la solution de Cyrano avec opera et ie... :?
Je retourne faire des essais!
Merci encore

edit: j'ai changer le position: absolute du a en position relative, et ça fonctionne (mis à part quelques marges à unifier)
Je croit que je peu mettre en résolu ;-)
merci à vous!!!!

Sachant que ton texte est alignée avec le bas de l'image, si tu mets plus de blanc en haut, tu auras plus d'espace entre les lignes, mais ton texte sera toujours trop bas ;)

Alors en changeant un peu les pixels, j'obtient ce que je souhaite sous firefox, mais sous ie et opera, tout mes li sont ratatiné ensemble, ...
Sinon il m'est venu une autre idée, qui sera peut-être plus simple à mettre en place, c'est de créer une image asymétrique, avec plus de "vide" en haut...

Essaye en positionnant le lien dans ta balise li. Commence par positionner le <li> en relative et ensuite le lien <a> en absolute, quelque chose du style:
[code]#left ul li {
position: relative;
}
#left ul li a {
position: absolute;
top: -10px;
left: 10px;
}
[/code]

Bonjour à tous,
Cela fait un bail que je suis pas venu demander votre aide...
Alors voilà je suis en train de faire un petit site perso, et je doit m'occuper de la mise en page et du design... et je suis plutôt une bille croyez-moi... :-*
Mon problème actuel, et que j'essaye de mettre des images dans mes puces de listes, seulement je n'arrive pas à les positionner verticalement...
Pour être plus parlant, rendez-vous içi: http://leregrave.fr et regardez le menu, avec les petits doigts qui pointes sur le lien...
Je trouve que l'image est trop haute (ou le lien trop bas) et je n'arrive pas à changer cela... :( (j'ai essayer vertical-align, ça ne fonctionne pas)
Donc voilou si vous avez besoin d'infos supplémentaires, n'hésitez pas ;)
Merci d'avance à vous tous!!!

ps: et si le coeur vous en dit... quelques critiques sur le début du design (j'ai pas encore fait le contenu ni finit le menu, mais le reste?)