Css et couleurs de liens sous IE

Css et couleurs de liens sous IE - Web design - Graphisme

Marsh Posté le 12-07-2005 à 11:42:50    

bonjour a tous !
 
je débute dans les css, et la je suis en train de créer un menu rollover en css.
il marche très bien sous FireFox mais il y a un bug sous IE.
en gros, le lien Actif possède l'attribut ON. il change de couleurs par rapport aux autres liens.
sur IE, le lien de change pas de couleur, ilgarde la meme couleur que celle renseignée dans le  #menu a:link
 
menu sous IE : http://fi8.free.fr/data/bastien/menu1.gif menu sour FireFox : http://fi8.free.fr/data/bastien/menu2.gif
 
voila le code :
 

Code :
  1. #menu {
  2. margin: 100 0 0 0px;
  3. font-family: Arial, Helvetica, sans-serif;
  4.     font-size: 11pt;
  5.     color: #FFFFFF;
  6. width: 100%;
  7.     background-color: #999999;
  8. }
  9. #menu a {
  10.     text-decoration: none;
  11.     text-align: right;
  12.     padding: 7px 10px; //espacement du menu
  13.     color: #FFFFFF;
  14.     display: block;
  15. }
  16. #menu a:link {
  17.     color: #FFFFFF;
  18. }
  19. #menu a:visited {
  20.     color: #FFFFFF;
  21. }
  22. #menu a:hover {
  23.     background:url("menu.gif" );
  24. color: #D91036;
  25. }
  26. #menu a.on {
  27.     background:url("menu.gif" );
  28. color: #D91036;
  29. }


 
voila le menu ds la page html :

Code :
  1. <div id="menu">
  2.    <div id="blocmenu">
  3.    <a href="index.htm">Accueil</a>
  4.    <a class="on" href="nouvelles.htm">Nouvelles</a>
  5.    </div>
  6. </div>


 
 
y a t'il un bug dans mon css ? ou bien une autre manière de procéder ?
Merci bcp!


Message édité par pgz le 12-07-2005 à 11:50:02
Reply

Marsh Posté le 12-07-2005 à 11:42:50   

Reply

Marsh Posté le 12-07-2005 à 11:52:26    

Il faut être le plus spécifique possible pour surcharger une règle. Ici, le :link est plus spécifique que le .on. Il faut donc les coupler pour être encore plus spécifique :

#menu a.on:link


 
PS : D'un point de vue sémantique et structurel, utilise une liste pour ton menu, et vire les <div> inutile


Message édité par FlorentG le 12-07-2005 à 11:52:40
Reply

Marsh Posté le 12-07-2005 à 12:20:21    

merci FlorentG, ça fonctionne. pour mettre des <li> je l'avais fait au début, mais j'ai préferre cette methode pour ma mise en page
pr les div en trop, je v les retirer, c exact
 
derniere question, si mon a:link et a:visited sont les meme, comment "coupler" ces deux attribut dans la feuille de style au lieu de retapper deux fois la mm chose ?

Reply

Marsh Posté le 12-07-2005 à 12:23:36    

en faisant un  
 

Code :
  1. #menu a.on:visited, #menu a.on:link {
  2.     background:url("menu.gif" );
  3. color: #D91036;
  4. }


 
ça fonctionne, si c'est pas la bonne méthode merci dle dire :]

Reply

Marsh Posté le 12-07-2005 à 13:37:20    

Si, c'est effectivement comme ça. Mais on placera le link avant le visited.
 
De manière générale, on suit cet ordre : LVHA (link, visited, hover, active). Après on peut coupler LVA, et mettre H après

Reply

Marsh Posté le 12-07-2005 à 16:28:34    

ok, merci de l'info !
derneire question tant que j'y suis, imagine que j'ai plusieures feuilles de style, et que je mette en place un selecteur de style Css. comment faire pour que celui se loade à chaque pas du site directement ? cookie ? $_SESSION[] en PhP ?
 
je sais que je peux le faire en PhP mais je suppose qu'il y a une methode plus simple en fait..

Reply

Marsh Posté le 12-07-2005 à 16:29:41    

Session, effectivement. Ou stockage dans cookie si le mec veut retrouver son style quand il reviendra

Reply

Marsh Posté le 12-07-2005 à 17:02:01    

ok merci, Go pour les sessions...
encore merci pr ces réponses en tout cas.

Reply

Marsh Posté le 12-07-2005 à 22:14:33    

Eh ben dis donc, on a un pro des recommandations du W3C !!
Tes infos sont super précises FlorentG !

Reply

Marsh Posté le 13-07-2005 à 09:48:15    

'tain, faut vraiment que je fasse un site complet sur tout ça...

Reply

Marsh Posté le 13-07-2005 à 09:48:15   

Reply

Marsh Posté le 13-07-2005 à 12:24:25    

oui [:ocube]
 
allez, qui crée avec moi le commité "On tape sur FlorentG jusqu'a ce qu'il fasse un site " .


---------------
"Ramon Balthazard ! Lachez cette arme !"
Reply

Marsh Posté le 13-07-2005 à 12:25:49    

*ouch* [:alph-one]

Reply

Marsh Posté le 13-07-2005 à 13:04:07    

*jette des cailloux pointus sur FlorentG*
 
Le site! le site! :o

Reply

Marsh Posté le 13-07-2005 à 22:31:53    

moi jveux bien participer

Reply

Marsh Posté le 13-07-2005 à 23:28:58    

ben va lire le tuto de masklinn sur le menu en CSS.
 
la version JS qui existait était hyper lourde et mega à chier. alors que la version CSS est nickel et passe sur un navigateur sans JS

Reply

Marsh Posté le 17-07-2005 à 20:49:08    

Moi j'ai un site sous spip en lancement pour apprendre xhtml et css ... si certains sont tentés on pourrait reprendre le principe ensemble  :whistle:


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 17-07-2005 à 21:07:43    


http://www.csszengarden.com :whistle:  

Citation :

Comme pour ça il faut bien connaître le html j'imagine, je le bosse à fond pour l'instant.


Ca aide pas mal, surtout comprendre le sens des éléments afin de les utiliser correctement (genre éviter d'utiliser des divs partout :o) ;)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-07-2005 à 01:19:52    

Si tu veux vraiment être impressionné, http://www.mezzoblue.com/zengarden [...] aleffects/


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-07-2005 à 02:02:37    


T'en aurais encore plus si je faisais un jour l'effort de mettre cette page à la con à jour :whistle:
(mais ça impliquerait de commencer par ranger mes favoris et j'ai pas le courage [:sisicaivrai]


Message édité par masklinn le 18-07-2005 à 02:02:58

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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