Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1789 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Résolu] problème de CSS sur un menu

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Résolu] problème de CSS sur un menu

n°1921585
lordankou
Posté le 06-09-2009 à 01:04:41  profilanswer
 

Bonjour !
 
je bataille depuis plusieurs heures (ce qui explique l'heure à laquelle je poste ce sujet...) sur un problème de CSS.
Voici le site :  
http://www.escale-en-irlande.fr/irelandV2/
 
le problème est le menu puisque sous Opera et Firefox tout fonctionne (en tout cas sous Opera 10 et FF 3.5) mais sous IE 8 le sous menu ne s'affiche pas !  
 
et franchement je ne comprends pas.
je mets le code :  
 
le site :  

Code :
  1. <html>
  2. <head>
  3. </head>
  5. <body>
  6.  <div class="SiteGlobal">
  8.   <!-- div pour le contenu de la bannière -->
  9.   <div class="banniere_Z0">
  12.   </div>
  14.   <!-- div pour l'affichage du menu -->
  15.   <div class="menu_Z2">
  16.    <ul>
  17.     <li><a class="menu_Z2one" href="#nogo">Accueil</a></li>
  18.     <li><a class="menu_Z2two" href="#nogo">A visiter et à faire</a>
  19.      <table><tr><td>
  20.      <ul>
  21.      <li><a href="#nogo">Recherche géographique</a></li>
  22.      <li><a href="#nogo">Recherche thématique</a></li>
  23.      <li><a href="#nogo">Le shopping</a></li>
  24.      <li><a href="#nogo">La culture irlandaise</a></li>
  25.      </ul>
  26.      </td></tr></table>
  27.     </li>
  29.     <li><a class="menu_Z2three" href="#nogo">Les itinéraires</a>
  30.      <table><tr><td>
  31.      <ul>
  32.      <li><a href="#nogo">Conseils sur les itinéraires</a></li>
  33.      <li><a href="#nogo">L'Ouest</a></li>
  34.      <li><a href="#nogo">Le Sud-Ouest</a></li>
  35.      </ul>
  36.      </td></tr></table>
  37.     </li>
  39.     <li><a class="menu_Z2four" href="#nogo">S'y rendre</a>
  40.      <table><tr><td>
  41.      <ul>
  42.      <li><a href="#nogo">Généralités</a></li>
  43.      <li><a href="#nogo">L'avion</a></li>
  44.      <li><a href="#nogo">Le ferry</a></li>
  45.      </ul>
  46.      </td></tr></table>
  47.     </li>
  49.     <li><a class="menu_Z2five" href="#nogo">Se loger</a>
  50.      <table><tr><td>
  51.      <ul>
  52.      <li><a href="#nogo">Les petits prix</a></li>
  53.      <li><a href="#nogo">Les prix modérés</a></li>
  54.      <li><a href="#nogo">Le haut de gamme</a></li>
  55.      </ul>
  56.      </td></tr></table>
  57.     </li>
  59.     <li><a class="menu_Z2six" href="#nogo">Se déplacer</a>
  60.      <table><tr><td>
  61.      <ul>
  62.      <li><a href="#nogo">En voiture</a></li>
  63.      <li><a href="#nogo">Les transports en commun</a></li>
  64.      <li><a href="#nogo">Divers</a></li>
  65.      </ul>
  66.      </td></tr></table>
  67.     </li>
  69.     <li><a class="menu_Z2seven" href="#nogo">Utiles à savoir</a>
  70.      <table><tr><td>
  71.      <ul>
  72.      <li><a href="#nogo">Divers</a></li>
  73.      <li><a href="#nogo">La météo</a></li>
  74.      <li><a href="#nogo">A ne pas oublier</a></li>
  75.      <li><a href="#nogo">En cas d'urgence</a></li>
  76.      <li><a href="#nogo">La culture</a></li>
  77.      <li><a href="#nogo">Les comtés</a></li>
  78.      <li><a href="#nogo">Les régions</a></li>
  79.      </ul>
  80.      </td></tr></table>
  81.     </li>
  83.     <li><a class="menu_Z2height" href="#nogo">Liens</a></li>
  85.     <li><a class="menu_Z2nine" href="#nogo">Téléchargement</a></li>
  87.    </ul>
  88.   </div>
  91.   <!-- div pour l'affichage du bandeau droit -->
  92.   <div class="bandeauDroit_Z1">
  93.   bandeau
  94.   </div>
  96.   <!-- pour effectuer une recherche sur le site -->
  97.   <div class="recherche_Z2">
  98.     recherche
  99.   </div>
  101.   <!-- pour affiche le diapo des images + flêches suivantes précédentes -->
  102.   <div class="affichageImage_Z2">
  103.     image
  104.   </div>
  106.   <!-- pour l'affichage des événements à venir -->
  107.   <div class="affichageEvenements_Z2">
  108.     événements
  109.   </div>
  112.   <!-- div pour l'affichage des contenus des sites -->
  113.   <div class="contenuGlobal_Z0">
  115.   </div>
  117.   <!-- div pour l'affichage des mentions légales -->
  118.   <div class="mentionsLegales_Z2">
  119.   </div>
  121.  </div>
  122. </body>
  123. </html>


 
le CSS :

Code :
  1. /* pour l'affichage du menu */
  2. .menu_Z2{
  3. position : absolute;
  4. z-index : 2;
  5. top : 200px;
  6. float:left;
  7. width:100%;
  8. font-family: verdana, arial, sans-serif;
  9. font-size:11px;
  10. background:url(pictures/design/menu.gif) repeat-x top left;
  11. height:33px;
  12. border-top:2px solid #4c597f; 
  13. border-bottom:2px solid #4c597f;
  14. }
  16. .menu_Z2 ul {
  17. padding:0;
  18. margin:0;
  19. list-style-type:none;
  20. z-index : 2;
  21. }
  22. .menu_Z2 ul li {
  23. float:left;
  24. position:relative;
  25. background:url(pictures/design/divider.gif) no-repeat;
  26. z-index : 2;
  27. }
  29. .menu_Z2 ul li a, .menu_Z2 ul li a:visited {
  30. float:left;
  31. display:block;
  32. text-decoration:none;
  33. color:#ddf;
  34. padding:0px 15px;
  35. line-height:30px;
  36. height:30px;
  37. border-bottom:3px solid #fff;
  38. z-index : 2;
  39. }
  41. .menu_Z2 ul li a.menu_Z2one:hover {border-color:#c00; color:#f88;}
  42. .menu_Z2 ul li a.menu_Z2two:hover {border-color:#c60; color:#fc0;}
  43. .menu_Z2 ul li a.menu_Z2three:hover {border-color:#cc0; color:#cc0;}
  44. .menu_Z2 ul li a.menu_Z2four:hover {border-color:#080; color:#0e0;}
  45. .menu_Z2 ul li a.menu_Z2five:hover {border-color:#00c; color:#aaf;}
  46. .menu_Z2 ul li a.menu_Z2six:hover {border-color:#c0c; color:#f8f;}
  47. .menu_Z2 ul li a.menu_Z2seven:hover {border-color:#c0c; color:#f8f;}
  48. .menu_Z2 ul li a.menu_Z2height:hover {border-color:#c0c; color:#f8f;}
  49. .menu_Z2 ul li a.menu_Z2nine:hover {border-color:#c0c; color:#f8f;}
  51. .menu_Z2 ul li:hover a.menu_Z2one {border-color:#c00; color:#f88;}
  52. .menu_Z2 ul li:hover a.menu_Z2two {border-color:#c60; color:#fc0;}
  53. .menu_Z2 ul li:hover a.menu_Z2three {border-color:#cc0; color:#cc0;}
  54. .menu_Z2 ul li:hover a.menu_Z2four {border-color:#080; color:#0e0;}
  55. .menu_Z2 ul li:hover a.menu_Z2five {border-color:#00c; color:#aaf;}
  56. .menu_Z2 ul li:hover a.menu_Z2six {border-color:#c0c; color:#f8f;}
  57. .menu_Z2 ul li:hover a.menu_Z2seven {border-color:#c0c; color:#f8f;}
  58. .menu_Z2 ul li:hover a.menu_Z2height {border-color:#c0c; color:#f8f;}
  59. .menu_Z2 ul li:hover a.menu_Z2nine {border-color:#c0c; color:#f8f;}
  61. .menu_Z2 ul li ul {
  62. margin:0;
  63. list-style:none;
  64. display:none;
  65. background:#ffffff;
  66. width:136px;
  67. position:absolute;
  68. top:30px;
  69. position:absolute;
  70. }
  72. .menu_Z2 table {
  73. margin:0;
  74. border-collapse:collapse;
  75. font-size:11px;
  76. position:absolute;
  77. top:0;
  78. left:0;
  79. z-index : 2;
  80. display:block;
  81. }
  83. /* specific to non IE browsers */
  84. .menu_Z2 ul li:hover ul {
  85. display:block;
  86. position:absolute;
  87. top:32px;
  88. margin-top:1px;
  89. left:0;
  90. width:154px;
  91. border-bottom:1px solid #000;
  92. z-index : 2;
  93. }
  95. .menu_Z2 ul li:hover ul.endstop {
  96. left:-92px;
  97. z-index : 2;
  98. }
  100. .menu_Z2 ul li:hover ul li ul {
  101. display: none;
  102. z-index : 2;
  103. }
  105. .menu_Z2 ul li:hover ul li a {
  106. display:block;
  107. background:#fff;
  108. color:#000;
  109. height:auto;
  110. line-height:15px;
  111. padding:4px 16px;
  112. width:120px;
  113. border:1px solid #000;
  114. border-bottom:0;
  115. z-index : 2;
  116. }
  118. .menu_Z2 ul li:hover ul li a.drop {
  119. background:#ccd url(pictures/design/bullet1.gif) no-repeat 3px 8px;
  120. z-index : 2;
  121. }
  123. .menu_Z2 ul li:hover ul li a:hover {
  124. color:#000;
  125. background: #ccd url(pictures/design/bullet1.gif) no-repeat 3px 8px;
  126. z-index : 2;
  127. }
  129. .menu_Z2 ul li:hover ul li a:hover.drop {
  130. background: #ccd url(pictures/design/bullet1.gif) no-repeat 3px 8px;
  131. z-index : 2;
  132. }
  134. .menu_Z2 ul li:hover ul li:hover ul {
  135. display:block;
  136. position:absolute;
  137. left:153px;
  138. top:-1px;
  139. z-index : 2;
  140. }
  142. .menu_Z2 ul li:hover ul li:hover ul.left {
  143. left:-153px;
  144. z-index : 2;
  145. }


 
 
bref please de l'aide !!


Message édité par lordankou le 06-09-2009 à 10:53:08

---------------

mood
Publicité
Posté le 06-09-2009 à 01:04:41  profilanswer
 

n°1921591
gatsu35
Blablaté par Harko
Posté le 06-09-2009 à 08:43:23  profilanswer
 

met un doctype HTML Transitional 4.01

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">


tu le mets avant ta balise <html>
sans ça ton IE8 va considérer que ton site date d'avant guerre, que c'(est un site mal codé ou codé comme une merde et donc va utiliser le moteur de rendu de IE6.
 
Voila

Message cité 1 fois

---------------
Blablaté par Harko
n°1921606
lordankou
Posté le 06-09-2009 à 10:52:43  profilanswer
 

gatsu35 a écrit :

met un doctype HTML Transitional 4.01

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">


tu le mets avant ta balise <html>
sans ça ton IE8 va considérer que ton site date d'avant guerre, que c'(est un site mal codé ou codé comme une merde et donc va utiliser le moteur de rendu de IE6.
 
Voila


 
merci  :love:  :love:  
le pire dans tout ça c'est que je mets toujours le doctype ! mais là vu que je faisais des tests bah j'ai zappé (comme les meta d'ailleurs).
En tout cas un grand merci pour l'aide et je suis sûr de ne plus oublier de rajoutr le doctype !
 


---------------


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [Résolu] problème de CSS sur un menu

 

Sujets relatifs
[css] Espacement des éléments d'un menu ?Probleme de requete SELECT sur msSQL
Problème Jquery[Résolu] Macro excel pour tri tableau par semaine
Problème livre d'or php5Problème nl2br ? [résolu]
[Résolu] Gestion des plantages[XML] probleme de compilation dans libxml2
Produit matriciel avec Mysql [Résolu]Problème d'affichage d'un menu en CSS (résolu)
Plus de sujets relatifs à : [Résolu] problème de CSS sur un menu

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.088 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR