[DELESTAGE] menu css ie et firefox

menu css ie et firefox [DELESTAGE] - HTML/CSS - Programmation

Marsh Posté le 31-08-2005 à 13:18:36    

j'ai fait un code, j'aimerai que vous m'aidiez qui je cale depuis hier.
Mon menu fonctionne sous firefox, mais pas sous IE, je sais pas quoi faire, quoi modifier ou ajouter dans mon CSS.
voici le lien de la page menu
 et voici le code,
Merci

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>
  5.       Test de menu
  6.     </title>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  8. <style type="text/css">
  9. /* ------------------------------------------------------------------------------------
  10. Tha Drop-down Menu
  11. ------------------------------------------------------------------------------------ */
  13. /* Elements de premier niveau
  14. --------------------------------------*/
  15. #menuDeroulant
  16. {
  17. /*background: #6A6458;*/
  18. width: 800px;
  19. height: 21px;
  20. list-style-type: none;
  21. margin: 0px;
  22. padding-left: 10px;
  23. border: 0;
  24. font-size : 12px;
  26. }
  27. #menuDeroulant li
  28. {
  29. float: left;
  30. width: 111px;
  31. margin: 0px;
  32. padding: 0px;
  33. border: 0;
  34. text-align : center;
  36. }
  37. #menuDeroulant li a:link, #menuDeroulant li a:visited
  38. {
  39. display: block;
  40. height: auto;
  41. color: #FFF;
  42. background: #669933;
  43. margin: 0px;
  44. padding: 4px 8px;
  45. border-right: 0px solid #fff;
  46. text-decoration: none;
  47. }
  48. #menuDeroulant li a:hover { background-color: #CCCC66; }
  49. #menuDeroulant li a:active { background-color: #5F879D; }
  51. #menuDeroulant .sousMenu
  52. {
  53. position:absolute;
  54. display: none;
  55. list-style-type: none;
  56. border: 0;
  57. margin: 0px;
  58. padding: 0px;
  59. /*position:absolute;*/
  61. }
  63. #menuDeroulant .sousMenu li
  64. {
  65. float: none;
  66. margin: 0px;
  67. padding: 0px;
  68. border: 0;
  69. width: 109px;
  70. border-top: 1px solid transparent;
  71. border-right: 1px solid transparent;
  73. }
  74. #menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
  75. {
  76. display: block;
  77. color: #FFF;
  78. margin: 0px;
  79. border: 0;
  80. text-decoration: none;
  81. /*background: transparent url("fondTR.png" ) repeat;*/
  83. }
  84. #menuDeroulant .sousMenu li a:hover
  85. {
  86. /*background-image: none; #F2462E*/
  87. background-color: #33CC66;
  88. }
  90. #menuDeroulant li:hover > .sousMenu { display: block; }
  92. #content {
  93. clear: left;
  96. }
  97. </style>
  98. <SCRIPT LANGUAGE="JavaScript">
  100. function hover(obj){
  101.   if(document.all){   
  102.     UL = obj.getElementsByTagName('ul');
  103.     if(UL.length > 0){
  104.       sousMenu = UL[0].style;
  105.       if(sousMenu .display == 'none' || sousMenu.display == ''){
  106.         sousMenu.display = 'block';
  107.       } else {
  108.         sousMenu.display = 'none';
  109.       }   
  110.     }
  111.   }
  112. }
  114. function setHover_dev(){ 
  115.   LI = document.getElementById('menuDeroulant').getElementsByTagName('li');
  116.   nLI = LI.length; 
  117.   for(i=0; i < nLI; i++){   
  118.     LI[i].onmouseover = function(){ hover(this); }
  119.     LI[i].onmouseout = function(){ hover(this); }
  120.   }
  121. }
  122.   </SCRIPT>
  123.   </head>
  124.   <body onload="setHover_dev();">
  126. <ul id="menuDeroulant">
  127.  <li>
  128.   <a href="#">Le club</a>
  129.   <ul class="sousMenu">
  130.    <li><a href="#">Accueil</a></li>
  131.    <li><a href="#">Présentation</a></li>
  132.    <li><a href="#">Dirigeant</a></li>
  133.    <li><a href="#">Staff technique</a></li>
  134.    <li><a href="#">Partenaires</a></li>
  135.    <li><a href="#">Archives</a></li>
  136.    <li><a href="#">Boutiques</a></li>
  137.    <li><a href="#">Contacts</a></li>
  138.   </ul>
  139.  </li>
  140.  <li>
  141.   <a href="#">Championnats</a>
  142.   <ul class="sousMenu">        
  143.    <li><a href="#">Equipes</a></li>
  144.    <li><a href="#">Calendriers</a></li>
  145.    <li><a href="#">Résultats</a></li>
  146.    <li><a href="#">Planning</a></li>
  147.   </ul>
  148.  </li>
  149.  <li>
  150.   <a href="#">Entrainements</a>
  151.   <ul class="sousMenu">        
  152.    <li><a href="#">Fiches techniques</a></li>
  153.    <li><a href="#">Lieux et horaires</a></li>
  154.    <li><a href="#">Plan d'accès</a></li>
  155.   </ul>
  156.  </li>
  157.  <li>
  158.   <a href="#">Sponsors</a>
  159.   <ul class="sousMenu">        
  160.    <li><a href="#">Vous êtes intéressé par l'achat d'espace publicitaire sur ce site?</a></li>
  161.   </ul>
  162.  </li>
  163.  <li>
  164.   <a href="#">Membres</a>
  165.   <ul class="sousMenu">        
  166.    <li><a href="#">Se connecter en page d'accueil</a></li>
  167.   </ul>
  168.  </li>
  169.  <li>
  170.   <a href="#">Liens</a>
  171.   <ul class="sousMenu">        
  172.    <li><a href="#" alt="toto">Sites sympa</a></li>
  173.    <li><a href="#">Faire un lien vers ce site</a></li>
  174.    <li><a href="#">Ajouter un site</a></li>
  175.   </ul>
  176.  </li>
  177.  <li>
  178.   <a href="#" alt="Aller au forum">Forum</a>
  179.   <ul class="sousMenu">        
  180.   </ul>
  181.  </li>
  182. </ul>
  183. <div id="content">
  184. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  185. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  186. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  187. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  188. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  189. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  190. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  191. texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br>
  192. </div>  </body>
  193. </html>


Message édité par bioinfo_djib le 01-09-2005 à 20:08:34
Reply

Marsh Posté le 31-08-2005 à 13:18:36   

Reply

Marsh Posté le 31-08-2005 à 13:30:06    

if(document.all)
 
pour moi ce veut dire : Je fais les actions que sous IE, et pas sous FF
 
Je dois me planter peut etre. A quand des scripts avec des commentaires please


Message édité par gatsusat le 31-08-2005 à 13:32:50
Reply

Marsh Posté le 31-08-2005 à 13:33:52    

oui et?
Pour que IE puisse faire « comme s'il comprenait » la pseudo-class :hover, nous allons définir une fonction JavaScript qui sera chargée d'émuler le comportement CSS ci-dessus
Cette fonction prend comme argument l'objet HTML auquel doit s'appliquer le comportement, en l'occurrence, ce sera la balise LI qui va appeler la fonction. Nous verrons par la suite comment appliquer ce comportement exactement. En tout premier lieu, la fonction va vérifier si le navigateur qui l'appelle est bien IE (ou Opéra qui souffre du meme problème) avec « if(document.all) ». Si ce n'est pas le cas, rien ne se passera car ce seront les CSS qui prendront le comportement en charge. Ensuite, la fonction va rechercher s'il y a un sous-menu disponible (matérialisé par la première balise UL incluse dans notre objet HTML) avec la fonction getElementsByTagName. Si un sous-menu est détecté, il ne reste plus qu'à modifier son style d'affichage en fonction de son style d'affichage précédent : soit le sous-menu est invisible et il faut le rendre visible, soit le sous-menu est visible et il faut le rendre invisible.
 
 


Message édité par bioinfo_djib le 31-08-2005 à 13:36:06
Reply

Marsh Posté le 31-08-2005 à 14:07:19    

personne n'a de solutions!!

Reply

Marsh Posté le 31-08-2005 à 16:31:29    

:cry:  :cry:  :cry:  :cry:

Reply

Marsh Posté le 31-08-2005 à 23:22:25    

pas d'inspiration??

Reply

Marsh Posté le 01-09-2005 à 15:40:09    

j'avais ajouter un js pour que la classe hover soit comprise avec IE
mais mon souci reside avec les positions:absolute je pense et ou relative.
personne pour m'aider???
sans positions:absolute il fontionnr sur ie et ff, sauf que le texte se decale a chaque, vous pouvez tester

Reply

Sujets relatifs:

Leave a Replay

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