[résolu] Les puces personnalisées

Salut,

Est-il possible de ne pas centrer verticalement les puces personnalisées (chargement d'une image) par rapport au texte de la liste, afin que le motif reste sur la première ligne de texte ?

Parce qu'en suivant ce lien (au sein du blockquote en violet), vous verrez que les puces sont verticalement centrées par rapport à un texte multiligne de la liste, et ce n'est pas agréable à la lecture.

Merci.

Modifié par Nawak (19 Mar 2007 - 15:44)

Bonjour,

En utilisant la propriété background pour simuler tes puces, il sera tout à fait possible de les laisser à une hauteur fixe quelque soit le nombre de lignes.

C'est pourtant ce que je croyais avoir fait :

ul li {
	margin: 0;
	padding-left: 10px;
	list-style-type: none;
	background: url("img/puce.png") no-repeat;
	background-position: 0% 65%;
	}

Mais les puces restent centrées.

Salut,

Le problème en positionnant ton background avec un pourcentage, c'est qu'il va dépendre de la taille du bloc. En gros 65% signifie qu'il sera toujours aux 2/3 du bloc. Le mieux pour le positionner par rapport au texte, est de le positionner en "em".
Ainsi, si ta ligne de texte est à 1em, si tu dispose ton background à 0.8 ou 1em (selon l'alignement que tu veux avec le texte), elle devrait toujours à la bonne hauteur par rapport à ta première ligne.

Héhé,

Je viens de comprendre 2 petites choses. D'abord, le placement de l'image en background ne s'effectue pas en "top, right, bottom et left" mais en "left, top, right, bottom". Ensuite, je viens de passer aux pixels comme unité, et tout est rentré dans l'ordre.

Merci pour le coup de pouce, c'est résolu.

Modifié par Nawak (19 Mar 2007 - 15:45)