positionnement des puces d'une liste

Version imprimable

13/02/2006, 20h15
la.sophe

positionnement des puces d'une liste

Bonjour,

y a t-il un moyen de positionner différement (centrer vertical, etc..) les puces d'une liste ?

merci d'avance

sophe

Il ne me semble pas que l'on puisse modifier l'alignement vertical. Pour l'horizontal, tu peux modifier le padding du tag <li>, ce qui permettra de modifier l'espace entre la puce et le texte.

Si tu veux vraiment mettre la puce où tu veux, utilises une image en background du <li> avec un "padding left" sur le texte laissant assez d'espace pour afficher tes puces images. Par exemple:
Code:

1 2 3 4 5 6 7 8 ul { list-style-type: none; } li { padding-left: 10px; /* espace permettant à la puce de s'afficher */ background: url(puce.gif) no-repeat 5px 2px; /* pour un centrage de 5 pixels à gauche et 2 pixels du haut */ }

14/02/2006, 11h48
SpaceFrog
en, jouant sur le vertical align
Code:

1 2 3 li { vertical-align: ... }
qui peut prendre les valeurs suivantes ...

Code:

middle; text-top; bottom; text bottom; sub; top; pourcentage; taillefixe; inherit;
14/02/2006, 11h59
_dranece_

Le vertical-align ne marche pas sous Firefox pour les <li>.

Salut

Avec la propriété line-height

Code:

1
2
3
4
    li {
	height: 100px;
	line-height: 100px; /* pour centrer verticalement : line-height = height */
 }

14/02/2006, 15h23
_dranece_

Il ne me semble pas que le line-height réponde à la demande initial, ou alors je n'ai pas compris la question. :)

La propriété line-height permet de positionner l'ensemble "contenu du <li>" et "puce" dans l'espace allouer au <li> mais ne permet pas de positionner la puce par rapport au contenu du <li> (sous Firefox). :wink:
Et sous IE, le comportement est assez ... bizarre, la position verticale de la puce est inversement proportionnelle à celle du texte.
14/02/2006, 17h31
SpaceFrog
si cette bidouille permet uniquement le décallage vers le haut du texte par rapport à la puce ...
Code:

1 2 3 4 li { height: 100px; line-height: 50px; /* pour centrer verticalement : line-height = height */ }
il faut juste que le height soit supérieur au line height...

positionner la puce au dessus du texte semble plus difficile ...

Désolé mais je confime (après vérification) que line-height ne permet pas ce décallage sur Firefox 1.0.7 (avant dernière version). Pour enlever les éventuels doutes, voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> li { height: 100px; line-height: 50px; } </style> </head> <body> <ul> <li>aaaaaaaaaa</li> <li>bbbbbbbb</li> </ul> </body> </html>
Maintenant si IE suffit, cette solution fait l'affaire, bien que personnellemet, je n'apprécie pas le décentrage créé par cette méthode. :wink:

15/02/2006, 20h39
la.sophe

désolée pour la réponse tardive.

Merci je vais essayer la solution de _dranece_

Citation:

background: url(puce.gif) no-repeat 5px 2px;

En effet ma puce est à peine plus haute que mon texte donc je ne veux déplacer que la puce et comme j'utilise une image ca va parfaitement.

Merci,

problème résolu