28172 sujets

CSS et mise en forme, CSS3

[RESOLU]Liste et lien a:visited

Salut,
j'ai un menu qui est une liste avec 3 images differents pour les liens
voici le code html
<ul id="mainlevel-nav">
  <li><a href="#">Lien 1</a></li>
  <li><a href="#">Lien 2</a></li>
  <li><a href="#">Lien 2</a></li>
  <li><a href="#">Lien 3</a></li>
  <li><a href="#">Lien 4</a></li>
  <li><a href="#">Lien 5</a></li>
</ul>


et la css 
ul#mainlevel-nav{
	width:100%;
	height: 32px;
	float:left;
	padding:0;
	margin:0;
	list-style-type: none;
	background:#5b783a}

UL#mainlevel-nav LI{
	float:left;
	width:160px;
	height:32px;
	text-align:center}

UL#mainlevel-nav LI A {
	float:left;
	width:160px;
	height:32px;
	display:block;
	padding-top:7px;
	background:url(link.gif) top left no-repeat;
	color:#475a30;
	text-decoration: none}

UL#mainlevel-nav LI A:VISITED{
	background:url(link-visited.gif) top left no-repeat}	
	
UL#mainlevel-nav LI A:HOVER{
	background:url(link-hover.gif) top left no-repeat}


peut importe ce que je fait tous les liens sont dans l'etat visités sous firefox sauf sous ie7 ???

l'xemple de page se trouce ici http://airvv.free.fr/test_edc/test_edc.html
Modifié par meyde (20 May 2008 - 15:45)
Vu que tous tes liens pointent vers la page courante (href="#"), il est plutôt logique qu'ils soient marqués comme visités.

Utilise de vraies valeur pour l'attribut href, tu verras alors si un problème persiste ou non.
Si tu ne veux pas que ton lien reste en vert clair lorsqu'il a été visité, met la couleur de ton a:link dans ton a:hover et essaie de faire un un état selected pour ton menu. Smiley cligne
Heu... qu'est-ce qui ne passe pas au juste? Je m'y perds un peu dans tes petites différences de teinte et les noms d'images pas super clairs.
Avec Firefox, le style «normal» et au survol ont l'air de marcher. C'est le style pour les liens visités qui ne marche pas?

Si je regarde ton code CSS (houlà... c'est moyennement organisé tout ça...), je vois:
TABLE.container UL#mainlevel-nav LI:VISITED,
TABLE.container UL.main-menu LI:VISITED {
	background:url(../images/l-green-tab.gif) top left no-repeat;}

TABLE.container UL#mainlevel-nav LI:HOVER,
TABLE.container UL.main-menu LI:HOVER{
	background:url(../images/2-green-tab.gif) top left no-repeat;
}

LI:VISITED???
LI:HOVER???????

Il y a comme un problème ici. Smiley cligne

Un peu plus loin, on peut lire:
/*UL#mainlevel-nav LI A:VISITED , UL.main-menu LI A:VISITED{
	background:url(../images/l-green-tab.gif) top left no-repeat}	*/

Donc les styles pour l'état «visité» des liens sont commentés, et forcément ne risquent pas de s'appliquer. CQFD. Smiley smile
meyde a écrit :
Désolé mais en decomenttant ca ne marche toutjours pas

Hum... ça marche mieux en décommentant pour de vrai.

Cf. http://www.envie-de-chine.fr/Joomla_1.5.3-Stable/templates/envie_de_chine/css/main.css

Le code qu'on y trouve (aujourd'hui à 16h40):
UL#mainlevel-nav LI A , UL.main-menu LI A {
	float:left;
	width:160px;
	height:32px;
	display:block;
	padding-top:7px;
	background:url(../images/green-tab.gif) top left no-repeat;
	font-size:14px;
	color:#475a30;
	text-decoration: none}

[#red]/*UL#mainlevel-nav LI A:VISITED , UL.main-menu LI A:VISITED{
	background:url(../images/l-green-tab.gif) top left no-repeat}*/[/#]
	
UL#mainlevel-nav LI A:HOVER, UL.main-menu LI A:HOVER{
	background:url(../images/2-green-tab.gif) top left no-repeat}

Petite erreur d'étourderie, non? Smiley cligne

Attention à bien mettre en ligne les fichiers (quand on travaille aussi en local). Et attention aussi aux systèmes de cache qu'utilisent certains CMS. Dans certains cas il faut supprimer le cache du CMS (Joomla ici) pour que les nouvelles versions des fichiers soient visibles.
J'ai bien decommenté la ligne :
/*UL#mainlevel-nav LI A:VISITED , UL.main-menu LI A:VISITED{

	background:url(../images/l-green-tab.gif) top left no-repeat}*/


j'ai vidé le cache de Joomla egalement.

Mais cela ne marche toujours pas ?
Bonjour,

Vérifié à l'instant, et ça marche parfaitement sur Firefox et Opera. Pas testé avec d'autres navigateurs.

Bien sûr, le rendu est étrange car il est rare qu'on marque visuellement les liens visités dans un menu de navigation. C'est surtout pour les liens dans les contenus que l'on utilise la pseudo-classe :visited (même si personnellement je trouve son utilité très faible et je ne l'utilise que très rarement, mais c'est un autre débat). Dans un menu de navigation, on voudra plutôt distinguer:
- un lien «normal»;
- un lien survolé ou recevant le focus (pour montrer clairement que le menu est actif);
- le ou les liens qui correspondent à la page ou à la rubrique en cours.
Mais chercher à marquer les liens de visités dans un menu de navigation, je crois que c'est la première fois que je vois ça. Smiley murf

Mais techniquement ce que tu cherches à faire marche, du moins avec Firefox et Opera.
Un grand merci à toi Florent V. ,
en effet j'ai supprimé le visited sur les liens du menu apres avoir exposé tes arguments (avec lequels je suis d'accord à 100%) , à mon ami .

Encore merci.
Sujet clos
Aller à