Aller au contenu

Sujets conseillés

Posté

Salut à tous !

Je suis en train de bidouiller des listes (de type ul), et j'y adjoins des puces en images.

Par contre, je ne trouve pas de propriété CSS permettant de positionner la puce par rapport à l'élément de la liste, donc j'utilise une méthode trouvée sur le Hub : placer les images en fond de li, et ajouter un text-indent au texte, mais ça me semble un peu bourrin.

N'y a t'il pas d'autre méthode (plus propre) ?

Posté

Bonjour,

Non pas à ma connaissance... seule la propriété background-position (et son équivalent avec la porpriété background) permettent de gérer la position de ce qui correspond à ta "puce".

Je ne trouve pas cela "bourrin"... tu utilises des propriétés qui sont valides, rien de plus. Enfin c'est une question de point de vue... l'essentiel pour moi étant la sémantique de la page et dans ce cas elle est conservée :)

**EDIT** list-style-position permet de définir si le texte de la puce est indenté (variation de l'indentation avec text-indent si je me souviens bien) vers l'intérieur ou l'extérieur de la puce.

Posté

J'avais lu la FAQ d'alsa, effectivement, mais si je ne m'abuse, l'explication ne tient qu'aux marges par défaut de l'élément.

Quant au list-style-position, il ne corrige pas mon souci, qui est de garder la puce en "outside", mais de la rapprocher de l'élément "cible".

Sinon, oui la sémantique est conservée.

ce qui me "gène", c'est le contournement d'une propriété qui devrait exister ;)

Posté
ce qui me "gène", c'est le contournement d'une propriété qui devrait exister ;)

Je crois avoir lu un papier d'Eric Meyer disant que c'était prévu dans les recommandations CCS3.

Peut être juste un peu de patience ;)

Posté

Un peu hors-sujet mais concernant les LI et CSS... et pour se faciliter la vie :)

Voici un site qui propose différents menus LI/CSS (horizontaux ou verticaux) et leur compatibilité avec les différents navigateurs : Listamatic

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...