Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2070 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°2037807
abricot73
Posté le 23-11-2010 à 15:08:35  profilanswer
 

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:

mood
Publicité
Posté le 23-11-2010 à 15:08:35  profilanswer
 

n°2037810
abais
Posté le 23-11-2010 à 15:16:02  profilanswer
 

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.
n°2037812
abricot73
Posté le 23-11-2010 à 15:22:01  profilanswer
 

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
n°2037836
David Bori​ng
Posté le 23-11-2010 à 15:52:30  profilanswer
 

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

n°2037850
abais
Posté le 23-11-2010 à 16:16:36  profilanswer
 

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.
n°2037859
David Bori​ng
Posté le 23-11-2010 à 16:40:32  profilanswer
 

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/

n°2037868
abricot73
Posté le 23-11-2010 à 17:16:31  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[Java]Petit problème interface graphiqueProbleme URL Rewrite
Débutant, problème master mind en C.probléme en commande batch
probleme de tri en c. efficacité de l'algorithme..Probleme taille de log oracle
problème référencement sur googleProblème sur ma page web
probleme de SharpSsh avec C#Problème de "goto" en batch...
Plus de sujets relatifs à : Problème avec des listes à puces décalées.


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR