Problème avec des listes à puces décalées.

Problème avec des listes à puces décalées. - HTML/CSS - Programmation

Marsh Posté le 23-11-2010 à 15:08:35    

Bonjour,
 
Lorsque j'utilise la fonction css list-style-image:url(); les puces sont décalées par rapport au texte. Elles ne sont pas centrées.
Définition pour que vous puissiez bien comprendre le problème :
Centré : -texte (le trait est bien aligné)
Mal centré : _texte (le trait est trop bas par rapport au texte)
Le décalage est faible par rapport à l'exemple mais sur un menu c'est voyant.
 
css:

Code :
  1. #menu ul
  2. {
  3. padding-left:45px;
  4. list-style-type: none;
  5. list-style-image: url("croix32.png" );
  6. }


 
J'ai résolu le problème avec un background-image dans les balises <li> mais ça change complètement le design de ce que j'avais crée, je dois rajouter un text-indent et ça laisse un gros espace vide à la place des puces.
Est-ce que vous avez une solution alternative ?
Et pourquoi elle fait ça cette fonction ? Ca me fait ça sur toutes les listes que je crée.
Ah oui, j'ai essayé d'initialiser toutes les marges à 0 mais ça ne change rien.
 
Merci! Bisous :love:

Reply

Marsh Posté le 23-11-2010 à 15:08:35   

Reply

Marsh Posté le 23-11-2010 à 15:16:02    

essaye de jouer avec la propriété CSS line-height sur le <li> peut-etre, afin de décaler verticalement le texte


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 23-11-2010 à 15:22:01    

Merci pour ta réponse abais.
La propriété line-height "bouffe" le texte, même en lui mettant une valeur de 1px. Le texte ne bouge pas il se fait juste "manger".
J'ai mis une valeur de 50, ça change rien non plus, les cases <li> sont plus grandes mais les puces ne bougent pas.


Message édité par abricot73 le 23-11-2010 à 15:32:10
Reply

Marsh Posté le 23-11-2010 à 15:52:30    

Mets du padding-left sur tes li, pas du text-indent

Reply

Marsh Posté le 23-11-2010 à 16:16:36    

Je viens de faire des test et je n'arrive pas à maitriser ça non plus...
 
- Soit tu refait l'image de ta puce pour qu'elle soit utilisable par défaut
 
- Soit tu créé un conteneur au sein du <li> , comme un <span>, tu pourras ainsi maitrisé la position vertical du texte en jouant sur le padding de ce dernier, le tout indépendament de la puce (propre au <li> )


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 23-11-2010 à 16:40:32    

En plus de center,bottom, left, right tu peux mettre les valeurs en absolu ou en %
Par exemple ici en px
http://jsfiddle.net/RSmLV/

Reply

Marsh Posté le 23-11-2010 à 17:16:31    

merci pour vos réponses.
en fait avec un background-image dans <li> ça marche, c'est plus pratique qu'un span.
en bricolant un peu, il faut juste mettre les padding et margin à 0 si non ça décale tout, puis les régler correctement. j'en ai bavé pour le coup!
 
cela dit je comprends pas pourquoi avoir crée une fonction comme celle-ci, qui est buggée depuis des années, ils devraient la réparer  car ça induit en erreur! je croyais que c'était moi le problème :x

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed