28172 sujets

CSS et mise en forme, CSS3

Bonjour
je tente de faire quelques chose d'à priori simple : personnaliser l'image de la puce.
Le rendu est différent selon les navigateurs, pas deux n'affichent la même chose.
Tout est décalé entre les navigateurs, un coup trop à gauche, ou trop haut...
J'ai vu cet article : http://www.alsacreations.com/astuce/lire/45-liste-decalage-gauche.html
Mais ça ne règle pas le problème.
J'ai donc essayé avec list-style-image, ça n'a pas mieux fonctionné, j'ai essayé avec background-image, pas meieux non plus.
Voici le code que j'utilise actuellement :

#redimensionnements li
{
font-size:13px;
font-weight:bold;
list-style-type:none;
list-style:url(photos/icones/listes/puces/puce-bleue.png);
}
#redimensionnements a
{
color:black;
}
#redimensionnements a:hover
{
color:#FD5656;
text-decoration:none;
}
#redimensionnements a:visited
{


Voici ce que j'obtiens :
http://img29.imageshack.us/img29/5691/sanstitre5wu.png
Modifié par Sam Soul (18 Sep 2009 - 18:42)
Laisse-tomber list-style pour les puces, impossible à positionner de manière correct.

Utilise un list-style: none, et pour la puce un background-image sur les <li> Smiley smile
Administrateur
Bonjour,

je conseille également background-image
Et line-height résoud pas mal de problèmes de décalages verticaux, c'est une propriété CSS sous-utilisée
alors effectivement Laurie-anne j'avais un center sur un parent.
J'ai tout recommencé, j'ai mis un background-image pour les li, ça va bien mais je ne parviens pas à positionner ma puce verticalement ( page concernée ).

#redimensionnements ul
{
background:url(photos/redimensionnements/redimensionnement_03.png) repeat-y;
margin:0;
padding:10px 0 0 20px;
}
#redimensionnements li
{
font-size:13px;
list-style-type:none;
background:url(photos/icones/listes/puces/puce-bleue.png) no-repeat;
padding-left:20px;
}
#redimensionnements li a
{
color:black;
}
Spécifie les coordonnées dans tes propriétés background, genre
background: url(photos/redimensionnements/redimensionnement_03.png) no-repeat left center;

Modifié par FlorentG (18 Sep 2009 - 18:14)