28220 sujets

CSS et mise en forme, CSS3

Liste

Bonjour,
Je voudrais faire une liste et remplacer le "list-style-type" par une image.
J'utilise donc : 


ul {
text-align : left}

.menu {
color: #000;
font-weight : bold;
text-indent: 20px; 
list-style-type: none;}

.menu li  {
background-image:url(elephant.gif);
background-position: left top;
background-repeat: no-repeat; }


C'est qui est très bien pour un menu, mais je ne veux pas me servir de la
liste comme un menu, mais tout simplement, simplement Smiley smile
C'est lors du retour à la ligne que cela ne se passe pas exactement comme je voudrais.

Le texte passe sous mon image et je voudrais qu'il reste "en-ligne" (comme si j'avais fait une liste sans modifier les propriétés).
Ici l'exemple pour mieux comprendre si je n'ai pas été clair :
http://www.zwatla.com/liste/test.html

Merci pour votre aide, je ne trouve pas la bonne solution.
Modifié par krek (23 Jun 2005 - 13:45)
Salut,

déjà, il te manque un point-virgule après "left":

a écrit :
ul {
text-align : left}

Modifié par bouquins (23 Jun 2005 - 10:46)
bouquins a écrit :
il te manque un point-virgule après "left"
Il n'a absolument rien d'obligatoire en la circonstance. Smiley cligne
a écrit :
Pourquoi ne te sers-tu pas de l'attribut "list-style-image" ?


hé, hé ... Pask je suis un âne !!!
merci koala64 Smiley cligne
salut,

tu as essayé d'utiliser la propriété "text-indent" ?

edit: non dsl je suis pas bon sur ce coup ! Smiley biggol
Modifié par Daweed (23 Jun 2005 - 11:25)
a écrit :
Pourquoi ne te sers-tu pas de l'attribut "list-style-image" ?

Ce qu'il y a aussi, c'est que je recontre des problèmes avec IE lorsque j'utilise cette méthode.
Il n'y a pas une autre solution ?
merci.
Salut,

Donc, personne ici ne sait faire une liste qui reste alignée avec une image
pour remplacer les puces et qui passe sous IE ?
(c'est à dire identique à celle d'origine).

Sous mozz list-style-image fonctionne très bien mais pas sous IE apparemment.

merci.
le "text-indent" de ta classe menu te décale tout l'ensemble, (image + texte).
Il te faut un "padding-left" sur la balise "li" de la valeur de l'image + un petit décalage de quelques pixels pour que ton texte ne colle pas à l'image.
iE implémente très mal "list-style-image".
Edit > si tu veux aligner ta première ligne sur les suivantes, sans retrait supplémentaire, il te faudra supprimer le "text-indent".
Modifié par Macpom (24 Jun 2005 - 09:18)
Sujet clos
Aller à