css : petit problème de couleur de lien

css : petit problème de couleur de lien - HTML/CSS - Programmation

Marsh Posté le 08-05-2004 à 01:05:21    

Bonsoir/bonjour :)
 
Je tourne en rond depuis cet après midi...
J'essaye de faire quelque chose de plus propre que du "brut de dreamweaver" alors je commence à coder à la main  :D  
 
Voilà mes css :
 

Code :
  1. body{
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3.         font-size: 14px;
  4.         line-height: normal;
  5.         font-weight: normal;
  6.         color: #FFFFFF;
  7.         background-color: #000000;
  8. }
  9. .menu{  color: #CF751D; text-decoration: none; }         
  10. a.menu:link{ color: #CF751D; text-decoration: none; }
  11. a.menu:visited{ color: #6A4623; text-decoration: none; }
  12. a.menu:active{ color: red; text-decoration: none; }
  13. a.menu:hover{ color: red; text-decoration: underline; }


 
 
Pourtant mes liens dans la classe .menu restent bleus, couleur d'un lien basique. (le texte normal sans lien est de la bonne couleur)
J'ai testé plusieur syntaxes (apparemment a:hover.menu { ... } est valable aussi ?) mais rien n'y fait. Par contre le "active" fonctionne au moment du click (sous firefox, mais pas sous IE).
 
Bref, j'ai un peu de mal à comprendre, j'ai surement oublié un truc, mais quoi ?
 
 
 

Reply

Marsh Posté le 08-05-2004 à 01:05:21   

Reply

Marsh Posté le 08-05-2004 à 03:14:49    

Tu as bien ecris <a class="menu" href="....">...</a>, sinon IE ne verra pas la couleur "red". Autrement ton css fonctionne avec le html que j'ai ecris.


Message édité par Spiderkat le 08-05-2004 à 03:36:28
Reply

Marsh Posté le 08-05-2004 à 05:14:37    

Il faut faire comme ca:

Code :
  1. body{
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3.         font-size: 14px;
  4.         line-height: normal;
  5.         font-weight: normal;
  6.         color: #FFFFFF;
  7.         background-color: #000000;
  8. }
  9. .menu{  color: #CF751D; text-decoration: none; }         
  10. .menu:link{ color: #CF751D; text-decoration: none; }
  11. .menu:visited{ color: #6A4623; text-decoration: none; }
  12. .menu:active{ color: red; text-decoration: none; }
  13. .menu:hover{ color: red; text-decoration: underline; }


 
 
Et si tu veux moin t'embéter, tu peux faire comme ca
 

Code :
  1. .menu {
  2.         color: #CF751D;
  3.         text-decoration: none;
  4.       }
  5. .menu:hover {
  6.               color: #FF0000;
  7.               text-decoration: underline;
  8.             }


 
 
J'ai oublié de dire:
Pour l'utiliser, tu fais comme cela:

Code :
  1. <a href="TON_LIEN" class=menu>TEXT</a>


Message édité par AlphaZone le 08-05-2004 à 05:15:56
Reply

Marsh Posté le 08-05-2004 à 12:27:14    

Merci beaucoup pour vos réponse !  :jap:
 
Je crois qu'on touche du doigt le problème. J'appelle ma classe par un <div class=  >, et pas par un <a class=   >
 
En fait j'ai un menu en texte d'une vingtaine de liens, j'aimerais bien ne pas devoir définir la classe à chacun d'entre eux.
 
Je viens d'essayer  div.menu a:link { color etc } et ca fonctionne, sauf que ca me met le roll over partout, et pas que sur les liens...
 
a.div.menu:link peut être ?

Reply

Marsh Posté le 08-05-2004 à 12:29:55    

div.menu a { ... }
div.menu a:visited { ... }
div.menu a:active { ... }
div.menu a:hover { ... }


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-05-2004 à 12:44:36    

Merci gm :)
 
En fait le problème du hover qui apparait partout, (même en dehors d'un <a> ), c'est propre à firefox, ca n'apparait pas sous internet explorer.
J'ai encore du oublié un truc :D


Message édité par gihel le 08-05-2004 à 12:45:00
Reply

Marsh Posté le 08-05-2004 à 12:45:30    

Parce que tu dois avoir un :hover qui porte sur autre chose qu'un A quelque part


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-05-2004 à 15:29:16    

Merci beaucoup ! Je suis rassuré, ca vient bien d'une grosse bourde de ma part :p.
J'avais oublié de fermer une balise <a>  :whistle:  
 
Du coup j'ai trouvé la syntaxe qui me convient, tout simplement .menu a:hover (sans préciser spécialement le div)
Je vais potasser un peu tout ca, surtout la notion de cascade.
 
Encore merci !  :jap:  

Reply

Marsh Posté le 08-05-2004 à 15:46:41    

gihel a écrit :

Merci beaucoup ! Je suis rassuré, ca vient bien d'une grosse bourde de ma part :p.
J'avais oublié de fermer une balise <a>  :whistle:  
 
Du coup j'ai trouvé la syntaxe qui me convient, tout simplement .menu a:hover (sans préciser spécialement le div)
Je vais potasser un peu tout ca, surtout la notion de cascade.
 
Encore merci !  :jap:


 
Pourquoi tu veux à tout prix mettre: .menu a:hover ????
 
tu fais tout bètement: .menu:hover
 
Ensuite tu le l'intègre dans la balise que tu veux:
<a href="" class=menu></a>
<div class=menu></div>
etc....

Reply

Marsh Posté le 08-05-2004 à 15:56:59    

AlphaZone a écrit :

tu fais tout bètement: .menu:hover


Parce qu'il n'a peut être pas que des liens dans son <div class="menu"> ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 08-05-2004 à 15:56:59   

Reply

Marsh Posté le 08-05-2004 à 16:26:46    

Non, j'ai pas que des liens.
 
Le .menu:hover je viens de tester, et ca ne fonctionne pas. Il ignore les balises <a> on dirait. Si je précise div.menu:hover, le changement de couleur se fait au survol du bloc entier (alors que le lien lui reste toujours bleu).

Reply

Marsh Posté le 08-05-2004 à 16:55:22    

Dans ce cas la essaye ca:
 
Parti CSS:

Code :
  1. div#menu {
  2.          ... Tes paramètres ...
  3.          }


 
Ta balise div:

Code :
  1. <div id=menu></div>


Message édité par AlphaZone le 08-05-2004 à 16:55:49
Reply

Marsh Posté le 08-05-2004 à 17:19:27    

AlphaZone a écrit :

Dans ce cas la essaye ca:


Ca ne change rien. Pourquoi tu persistes à donner une solution qui ne correspond pas à son problème ? :heink: (et en plus, il n'a plus de problème)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 09-05-2004 à 00:14:41    

Désolé si je suis tetu, j'essai de trouver la meilleur solution même si ce n'est pas la bonne, il faut bien faire des erreurs pour apprendre ? Je suis dans ce cas la.
 
Bref. Si ca marche c'est le principal.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed