28173 sujets

CSS et mise en forme, CSS3

Question sur les liens et leurs classes

salut à tous Smiley biggrin

j'ai souvent le même problème qui revient quand je fait differente classe de lien...

a:link{
font-size: 1em;
color: blue;
}
a:visited{
color: navy;
}
a:active{
color: navy;
}
a:hover{
color: cyan;
}
a:link.plus_grand{
font-size: 2em;
color: blue;
}
a:visited.plus_grand{
color: navy;
}
a:active.plus_grand{
color: navy;
}
a:hover.plus_grand{
color: cyan;
}
a:link.plus_petit{
font-size: 0.5em;
color: blue;
}
a:visited.plus_petit{
color: navy;
}
a:active.plus_petit{
color: navy;
}
a:hover.plus_petit{
color: cyan;
}
a:link.couleur{
font-size: 1em;
color: #def;
}
a:visited.couleur{
color: #acb;
}
a:active.couleur{
color: #321;
}
a:hover.couleur{
color: #123;
}


souvent certaine classe ne marche pas ou à moitier comme si le navigateur s'embrouillait entre la classe utiliser et la classe de lien "générale" Smiley ohwell

1°) y a t'il une limite de nombre de classe pour les liens?
2°) si non, comment faire pour que toutes mes classe soit bien interpretées?

Merci d'avance pour votre aide Smiley cligne
la syntaxe est pas bonne.
les pseudo classe se mettent à la fin.

a:link{...}
a.maClasse:link{...}
Tu peux aussi factoriser ton code :
a:visited{
color: navy;
}
a:active{
color: navy;
}

donnera
a:visited, a:active {color: navy;}


De même, les classes pour des liens ne servent qu'au cas où tu aurais besoin d'attribuer à un lien un style de manière arbitraire. C'est à dire que, pour une zone donnée de ta page, tu vas vouloir choisir des styles pour certains liens et d'autres styles pour d'autres liens.

S'il s'agit uniquement de donner des styles différents aux liens du menu par rapport à ceux d'une zone de contenu, par exemple, on peut faire ça :
div#menu a {color: blue;}
div#contenu a {color: red;}
que penser vous de celle-ci?
ul#menu li a:link, a:visited {font-size:1em; color: blue;}
ul#menu li a:hover {color:green;}
beroots a écrit :
que penser vous de celle-ci?
ul#menu li a:link, a:visited {font-size:1em; color: blue;}
ul#menu li a:hover {color:green;}

Il y a une faute, qui peut se corriger de deux manières :
ul#menu li a:link, [b]ul#menu li[/b] a:visited {font-size:1em; color: blue;}
ul#menu li a:hover {color:green;}

ou bien
ul#menu li a {font-size:1em; color: blue;}
ul#menu li a:hover {color:green;}


Dans le premier cas, on utilise toujours la virgule pour séparer deux sélecteurs CSS. Attention, la virgule ne « factorise » pas un sélecteur, mais permet de rajouter un deuxième sélecteur (puis un troisième, etc.) pour le même lot de propriétés CSS. Le code d'origine signifiait donc :
ul#menu li a:link {font-size:1em; color: blue;}
a:visited {font-size:1em; color: blue;}


Dans le deuxième cas, on tire parti du fait que définir le style de l'élément a sans préciser d'état particulier permet d'unifier le style de tous les états, sauf ceux que l'on précisera dans un deuxième temps (ici, pour le survol).
Modifié par mpop (15 Sep 2006 - 18:02)
Salut, juste une petite précision, l'ordre des pseudo-classes dans la feuille est important. On doit les mettre dans l'ordre :link, :visited, :hover, :active
A+
tient j'ai plus de problèmes Smiley biggrin

je croit que ce petit cour n'est pas tomber dans l'oreille d'un sourd Smiley lol

merci à vous deux Smiley cligne
coccimaster a écrit :
Salut, juste une petite précision, l'ordre des pseudo-classes dans la feuille est important. On doit les mettre dans l'ordre :link, :visited, :hover, :active
A+


humm, il me semble que tu te trompe là... Smiley murf

moi on m'a toujour dit a:link, a:visited, a:active, et enfin a:hover ...

si quelqu'un veut bien trancher entre nous deux Smiley cligne
Je veux bien trancher moi-même, il y a un moyen mnémotechnique simple pour s'en souvenir qui est LoVe HAte. Je te laisse faire la petite recherche qui va bien pour vérifier cela. A+
beroots a écrit :
serait il possible d'avoir un autre avis svp Smiley cligne

Mon avis : en fait on fait comme on veut.

Les styles déclarés en dernier seront prioritaires sur les styles déclarés en premier. L'ordre LoVe HAte signifie symplement que l'on souhaite que le style pour :active prenne le pas sur le style pour :hover.

On peut aussi décider que le style pour les liens visités devrait prendre le pas sur le style pour le survol, si on souhaite que les liens visités aient l'air « inactifs » lors du survol.

Ce n'est pas une contrainte technique.
Par contre, les utilisateurs peuvent avoir certaines habitudes, qu'il peut être dangereux de trop bouleverser (ergonomie afaiblie).
Bonjour,

La spécification est assez claire à ce sujet :

5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus

L'ordre à une importance.
L'ordre est le suivant : link,visited,hover,active (LoVe HAte)

Ce qui est somme toute très logique.

a écrit :
On peut aussi décider que le style pour les liens visités devrait prendre le pas sur le style pour le survol, si on souhaite que les liens visités aient l'air « inactifs » lors du survol.


Le but de la pseudo classe hover est d'indiquer quel lien va être joué au click.
Il est très important de respecter l'ordre de la spécification pour éviter que cette indication soit masquée à ceux qui en ont besoin.


Jean-pierre
Modifié par jpv (15 Sep 2006 - 21:49)
jpv a écrit :
La spécification est assez claire à ce sujet :

5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus

La spécification ne me semble pas contredire ce que je disais :
a écrit :
Noter que la règle A:hover doit être placé après A:link et A:visited, autrement les règles de cascade feront que la propriété 'color' spécifiée par celle-ci sera cachée.

C'est plus une indication (« attention, si vous ne respectez pas tel ordre vous n'obtiendrez pas le résultat que vous attendez probablement ») qu'une contrainte stricte.

Donc, si l'on sait ce que l'on fait, on peut choisir un ordre non standard. MAIS -- comme je l'esquissais et comme jpv l'a rappelé avec force -- cela peut dérouter l'utilisateur, et poser des problèmes d'ergonomie et d'accessibilité (surtout, il me semble, pour la navigation au clavier).
Sujet clos
Aller à