28173 sujets

CSS et mise en forme, CSS3

Bonjour,

je me prends la tête pour faire un remplacement de puce sur une liste et je n'ay arrive pas.

Voilà j'ai une liste <ul><li></li><li></li></ul> de liens avec une puce de type image.
Quand un lien est visité j'aimerais que la puce image initiale soit remplaçée par une autre puce image.

Quelqu'un peut il me donner une piste.

merci
Modifié par GuizBizet (17 Feb 2006 - 00:00)
Bonjour,
Je suppose que ta liste en question est en fait ton menu et que la puce que tu veux changer est devant un lien du menu, je me trompe ?
Dans ce cas, je pense que tu ferais mieux de jouer sur une image d'arrière plan du lien plutôt que de chercher des solutions plus compliquées qui mènent au même résultat.

Voici un exemple :
a{
padding-left:15px;
background-image:url(image1.png);
}
a:visited{
background-image:url(image2.png);
}


Si jamais cette indication ne répond pas à ton problème, peux-tu mettre un exemple en ligne pour faciliter la compréhension de ton problème ?
Modifié par Jihel (14 Feb 2006 - 15:04)
Merci Jihel mis ce n'est pas tout a fait ça

en fait j'ain ça
#sidebar div#links ul	{
	margin-left: 20px;
	list-style-image: url(img/puces/puce.jpg);
	}


et j'aimerais remplacer
list-style-image: url(img/puces/puce.jpg);

par
list-style-image: url(img/puces/puce_checked.jpg);

quand un lien a été visité or je ne sais pas quoi mettre en définition de li car c'est quand un li a été visité que la puce doit être remplaçée :
#sidebar div#links li a:visited ou #sidebar div#links a:visited li

J'ai tout essayé etça ne marche pas

merci de votre aide Smiley cligne

Vous pouvez le voir ici sur mon blog de test
Modifié par GuizBizet (15 Feb 2006 - 12:40)
Effectivement, je n'ai pas pensé à regarder sur ton blog de test Smiley confus .
Par contre je ne pense pas qu'il soit possible de jouer avec li:visited. Je n'en ai pas la confirmation, mais je pense que ce pseudo-format s'applique uniquement aux balises <a>.

Une alternative serait peut être de placer la date à droite du titre du billet et de retomber dans le schéma que je décrivais plus haut, à savoir supprimer la puce et définir un arrière plan aux liens. Dans ce cas on pourra utiliser :visited.
Sinon je ne vois pas...
Bon c'est bon j'ai trouvé une alternative

Code:
[/code]#sidebar div#links li a, #sidebar div#links li a:visited, #sidebar div#links li a:hover {
padding-left: 10px;
}

#sidebar div#links ul a {
background: #FFF url(img/puces/puce.jpg) no-repeat left 50%;
}

#sidebar div#links ul a:visited {
background: #FFF url(img/puces/puce_checked.jpg) no-repeat left 50%;
}

#sidebar div#links ul a:hover {
background: #FFF url(img/puces/puce.jpg) no-repeat left 50%;
}[/code]

et ça marche nickel

merci