28220 sujets

CSS et mise en forme, CSS3

Lien "visited"+image

Salut, je cherche a faire une css pour les liens "visited", j'aimerais afficher lorsque le lien a été cliqué une petite image sur la droite du texte :
pas visité : LIEN
visité : LIEN +image
-----------
Je ne vous met pas les essais que j'ai fait et qui ne fonctionne pas, la seule chose dont je suis arrivé c'est faire apparaitre une image en backround mais sur le texte.
------------
Merci !
Bonjour, as-tu essayé un truc du style :

a:visited {
padding-right:20px;
background-image:URL(image.png);
background-position:100% 50%;
}

c'est pas garanti que ça marche mais l'idée y est.
parce que after c'est bien gentil mais ça marche pas avec IE6.
La version de Cortexd en est une, qui serait la meilleure en fait, mais elle ne fonctionnera pas partout. Autant utiliser une méthode qui fonctionne alors Smiley smile 


a:visited
{
padding-right: 20px;
background: url(image.png) no-repeat 0 0.5em;
}


(Attention Cortexd à ne pas utiliser de guillemets dans tes url(...), c'est source de problème sur pas mal de navigateurs Smiley cligne )

<edit>Grilled par Quentin !</edit>
Modifié par Olivier (24 Sep 2005 - 08:07)
Slt, merci à vous de m'avoir répondu, voila la forme qui fonctionne avec IE et FF

.SECTION_LIEN A:visited {
padding-right: 20px;
background: url(http://localhost/themes/Permanent/images/retour01.gif) no-repeat 0 0.10em;
background-position:100% 50%;
}

Par contre si je ne met pas le "background-position" l'image se place à gauche
---------
Merci !
--------
Je viens de m'appercevoir d'une chose sous IE quand je passe la souris sur le lien je vois apparaitre très furtivement le sablier quans le lien a été cliqué et que l'image est présente Smiley ohwell ca m'a pas l'air très bon, non ?
Modifié par oim (24 Sep 2005 - 10:14)
Ton truc de background-position n'est pas utile.

le 0 0.10em correspond au background-position.
Pour obtenir le résultat voulu, il faut faire :

background: url(image.gif) no-repeat 100% 0.5em;


(0.5em au lieu de 50%, c'est préférable lors d'un agrandissement de police, 0.5 à ajuster eventuellement)

Evite les chemin absolu dans les URLs, tu vas te compliquer la vie pour rien. Utilises des chemins relatifs.

Ton code final :

.SECTION_LIEN A:visited {
padding-right: 20px;
background: url(images/retour01.gif) no-repeat 100% 0.5em;
}


<edit>une fois que tu considères ton sujet comme résolu, n'hésite pas à l'indiquer comme tel :
http://forum.alsacreations.com/faq/#item22

Je déplace dans le salon CSS
Modifié par Olivier (24 Sep 2005 - 11:17)
Slt, merci ca marche et je trouve ca jolie Smiley biggrin
Par contre j'ai toujours cette petite apparition du sablier sur le lien et je viens de remarquer que le lien n'apparait pas dans la barre d'état du bas comme mes autre liens
Essai d'ajouter ça avant le code du lien visité :

.SECTION_LIEN A
{
background: url(LAMEMEIMAGEQUEL'AUTRE) no-repeat -500px -500px;
}


Et remplace le code que je te montrais par ça :

.SECTION_LIEN A:visited {
padding-right: 20px;
background-position: 100% 0.5em;
}
Re-slt, non ca ne marche pas non plus, mais au lieu de mettre "background" j'ai mis "background-image" ; résultat le lien apparait comme les autres par contre l'image n'apparait plus Smiley langue
T'as mis background-image mais t'as mis quoi comme valeurs ?

Montre nous ton code qu'on s'y retrouve.

Tu testes sous IE6 ? Windows XP ? 2000 ? 98 ?
Slt, je n'ai rien mis en définitive mais j'essaie le code pour l'instant est comme ca : 

.SECTION_LIEN, .SECTION_LIEN A:link, .SECTION_LIEN A:active, .SECTION_LIEN A:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #000000;
FONT-FAMILY: Arial,Helvetica,sans-serif;
TEXT-DECORATION: underline
}

.SECTION_LIEN A:visited {
background: url(themes/Permanent/images/coche.gif) no-repeat 100% 0.10em;
padding-right: 15px
}

je l'appelle comme ca :

<div class="SECTION_LIEN"><a href="http://localhost/sections.php?op=viewarticle&artid=4">Sous-embranchement des Vertebrata</a></div><br />

J'utilise windows XP et je test avec IE6 et FF 1.0.6
Sujet clos
Aller à