18073 sujets

Questions générales et questions de débutants

Problème sur puce

bonjour
voilà un soucis dont je ne comprends pas le pourquoi!
je veux définir une image dans ma liste!
le problème c'est que sous IE ça marche pas ! grrrr
<html>
<head>
<style type="text/css">
ul{
list-style: disc url(etoile.gif) outside;
}

ul li{
float: left;
margin-left: 2em;
}

</style>

</head>
<body>

<ul><li>lien1</li> <li>lien2</li> <li>lien3</li> <li>lien4</li></ul>

</body>
</html>
Plop,

Ie a toujours été capricieux avec les listes en images en passant par la propriété list-style.

Pour contourner le problème, tu peux mettre ta puce en background de tes <li> et rajouter un petit padding-left pour ne pas que le texte déborde dessus.
Ca fonctionne mieux avec ce code ? Smiley murf
Test le Smiley cligne 

<html>
<head>
<style type="text/css">
li {
list-style-type:none;
background-image:url(etoile.gif);
background-repeat:no-repeat;
background-position:0% 65%;
padding-left:15px;
}
</style>

</head>
<body>

<ul><li>lien1</li> <li>lien2</li> <li>lien3</li> <li>lien4</li></ul>

</body>
</html>
Modérateur
Salut,

Personnellement, pour contourner ce problème, je supprime la puce de la liste et j'affecte mon image en background sur mon lien...

@+ Smiley smile
sammuel ton code marche bien sous IE mais ma liste n'est pas sur 1 même ligne!
je viens de tester mon code et apparement c'est le float qui foire!
si j'enleve le float, je tombe sur le même résultat que sammuel !

ce qui m'embete c'est que sur une autre page il marche et ici non !

EDIT: en fait le code de sammuel e marche pas aussi si je met float
Modifié par imotep (21 Jul 2005 - 14:01)
ha tu voulais que ce soit affiché horizontalement ! Smiley langue
En ajoutant la balise float, cela devrait fonctionner Smiley cligne 

<html>
<head>
<style type="text/css">
li {
list-style-type:none;
background-image:url(etoile.gif);
background-repeat:no-repeat;
background-position:0% 65%;
padding:0 10px 0 15px;
[b]float:left;[/b]
}
</style>

</head>
<body>

<ul><li>lien1</li> <li>lien2</li> <li>lien3</li> <li>lien4</li></ul>

</body>


J'ai ajouté un padding-right pour écarter les puces...
Modifié par Sammuel (21 Jul 2005 - 14:51)
puissant
ça marche bien sous les 2 navigateurs !
Mais comment celà fait ce que IE ne prenne pas en compte les puces ?
Sujet clos
Aller à