positionnement des puces d'une liste

**la.sophe** · 13/02/2006, 20h15

Bonjour,

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

merci d'avance

sophe

**_dranece_** · 14/02/2006, 10h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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  */
}

**SpaceFrog** · 14/02/2006, 11h48

en, jouant sur le vertical align

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
li {
	vertical-align:  ...
}

qui peut prendre les valeurs suivantes ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

middle; text-top; bottom; text bottom; sub; top; pourcentage; taillefixe; inherit;

**_dranece_** · 14/02/2006, 11h59

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

**ilood** · 14/02/2006, 13h45

Salut

Avec la propriété line-height

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**_dranece_** · 14/02/2006, 15h23

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).

Et sous IE, le comportement est assez ... bizarre, la position verticale de la puce est inversement proportionnelle à celle du texte.

**SpaceFrog** · 14/02/2006, 17h31

si cette bidouille permet uniquement le décallage vers le haut du texte par rapport à la puce ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

**_dranece_** · 14/02/2006, 18h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**la.sophe** · 15/02/2006, 20h39

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

Merci je vais essayer la solution de _dranece_

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

positionnement des puces d'une liste

HTML

Discussions similaires

Partager

Partager