charlelechauve a écrit :
Bonjour, sur mon site j'ai un menu déroulant et dans ce menu déroulant j'ai mis dans mon [B]mapage.css[/B] une image png de cette cette sorte : Code :
- #menu li a:hover {background:#09c; color:#fff;}
- #menu li:hover > a {background:#09c; color:#fff;}
- #menu li a.fly {background: url(arrow.png) no-repeat right top;}
- #menu li a.fly:hover {background:#09c url(arrow.png) no-repeat right top;}
- #menu li:hover > a.fly {background:#09c url(arrow.png) no-repeat right top;}
|
|
Code :
- #menu li a:hover,
- #menu li:hover > a {background:#09c; color:#fff;}
- #menu li a.fly {background: url(arrow.png) no-repeat right top;}
- #menu li a.fly:hover,
- #menu li:hover > a.fly {background-color: #09c;}
|
Pas besoin de repréciser tout dans l'état :hover , juste ce qui change par rapport au lien "au repos" (Tout ce qui s'applique à "#menu li a.fly" s'applique aussi à "#menu li a.fly:hover" )
Comme les deux derniers blocs d'instruction sont identiques, autant regrouper via une virgule les 2 sélecteurs de règles. edit: idem pour les 2 premiers
charlelechauve a écrit :
Cependant le png ne fait pas bon ménage avec IE 6 donc je compte coder pour que cette image "fleche" en png ne soit pas d'actualité sur IE 6. Pour cela je vais introduire cela dans ma page html dans la balise <head> : Code :
- <!--[if IE 6]>
- <link rel="stylesheet" href="css/ie6.css" type="text/css" />
- <![endif]-->
|
Et donc créé un fichier ie6.css qui sera identique à mon [B]mapage.css[/B] sauf que pour mes background cités ci dessus je ne mettrait pas mon arrow.png.
|
un fichier ie6.css qui sera identique à mapage.css ? Euh ...
IE6 applique comme tous les autres navigateurs toutes les instructions de la feuille de style mapage.css (sauf ce qu'il ne comprend pas comme li:hover)
Dans la CSS chargée via un commentaire conditionnel, tu n'as à préciser que ce qui est différent par rapport à mapage.css ! Ce qui est commun est déjà stylé grâce à mapage.css, il ne faut pas le réécrire dans ie6.css c'est juste inutile et même source d'erreur puisque chaque modif° doit être faite dans 2 fichiers, chose que tu oublieras forcément de faire au moins une fois.
charlelechauve a écrit :
Je n'ai pas encore testé, mais dans la logique des choses comme je vous ai présenté ma façon de résoudre le problème, ca devrait marcher. Mais la je me demande : est ce qu'il y a un moyen de résoudre ce probleme autrement qu'en créant 2 fichiers css ? C'est à dire, puis je poser ma conditions autrement, peut etre meme directement dans mon [B]mapage.css[/B] pour que mon arrow.pgn ne s'affiche pas si je suis sous IE6 ? Merci d'avance nb : je sais qu'au lieu de faire ma fleche en png je pourrais la faire en jpg en mettant les couleurs autour de cette fleche de la meme couleur que mon background, mais ca m'oblige à retoucher trop d'image car j'utilise plusieurs types de fleche.
|
D'autres méthodes seraient possibles:
- un fichier JS chargé de s'occuper des PNG transparents sous IE6. C'est pas 100% compatible mais si ça fonctionne, c'est simple à mettre en place
- un truc trop compliqué qui cible les non-IE puis les IE>6 puis IE6 . 3 commentaires conditionnel pour une flèche, ça se justifie pas, autant ne s'occuper que d'IE6 contre le reste du monde
- pour une bête flèche, un PNG-8 transparent créé avec Fireworks ou un PNG-8 façon GIF sont amplement suffisants. Ou alors tu as un menu déroulant avec des images de fond complexes et j'imagine le pire quand au résultat ![[:bighead]](https://forum-images.hardware.fr/images/perso/bighead.gif "[:bighead]")
Message édité par phosphoreloaded le 21-01-2010 à 23:51:01
