[CSS] Mon menu se dérobe

Mon menu se dérobe [CSS] - HTML/CSS - Programmation

Marsh Posté le 03-04-2008 à 23:02:22    

Bonjour à tous, et par avance, merci pour votre contribution.
 
Je programme un site pour mon asso, et je programme donc un menu en js+CSS.
 
vous pouvez aller faire un tour ici :  
 
http://www.romma.fr/avril/Template [...] V1.dwt.php
 
le menu est placé là pour des raisons de "diagnotique", normalement il est sous la banière, j'ai juste changer le "position" dans le CSS.
 
vous comprendrez le problème sur IE lorsque vous déroulez "romma" et que vous parcourez le menu ci dessous:  
 
quand votre souris arrive au niveau du bas de la bannière, pouf, il disparait.
 
Voici le code :
 
le CSS :
 

Code :
  1. #date_heure{
  2.     text-align:right;
  3.     margin-right:25px;
  4. }
  6. body
  7. {
  8.     margin: 10px 0 ;
  9.     padding: 0 ;
  10.     text-align: center ;
  11.     font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
  12.     background: #F7F7F7;
  13. }
  14. div#conteneur
  15. {
  16.     width: 770px ;
  17.     margin: 0 auto ;
  18.     text-align: left ;
  19.     border: 1px solid #999999;
  20.     background: #fff ;
  21. }
  22. #header{
  23.     height: 100px ;
  24.     background-image:url(../images/header.jpg);
  25.     background-repeat:no-repeat;
  26.     margin: 0;
  27.     border-bottom: 1px solid #666666;
  28.     }
  29. dl, dt, dd, ul, li {
  30. margin: 0;
  31. padding: 0;
  32. list-style-type: none;
  33. }
  34. #menu {
  35. position: absolute;
  36. height:35px;
  37. top: 0;
  38. left: 0;
  39. z-index:100;
  40. width: 100%; /* correction pour Opera */
  41. background: url(../images/bg_menu.gif) repeat-x 0 -25px;
  42. }
  43. /*taille des cases du menu*/
  44. #menu dl {
  45. float: left;
  46. width: 127px;
  48. /*mise en forme des cases du menu*/
  49. }
  50. #menu dt {
  51. text-align: center;
  52. line-height: 25px ;
  53. font-size: 0.8em ;
  54. letter-spacing: 2px ;
  55. color: #fff ;
  56. display: block ;
  57. text-decoration: none ;
  58. border-right: 2px solid  #FFCC00;
  59. }
  60. #menu dd {
  61. display: none;
  62. height: 15px;
  63. }
  64. #menu li {
  65. text-align: left;
  66. border-right: 2px solid  #FFCC00;
  67. background: #CCCCCC;
  68. font-size: 0.8em ;
  69. letter-spacing: 1px ;
  70. color: #fff ;
  71. text-decoration:none;
  72. }
  73. #menu dt a{
  74. color: white;
  75. text-decoration: none;
  76. display: block;
  77. }
  78. #menu li a{
  79. color: #000;
  80. padding-left:8px;
  81. padding-top:2px;
  82. text-decoration: none;
  83. display: block;
  84. height: 100%;
  85. border: 1px none;
  86. z-index:auto;
  87. }
  88. #menu dt:hover {
  89. background: url(../images/bg_menu.gif) repeat-x 0 0 ;
  90. }
  91. #menu li a:hover {
  92. background: #eee;
  93. background: url(../logo/little_romma_arrow2.png) no-repeat left #eee;
  94. color:#000000;
  95. }


 
et le doc php/js :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <?php
  5. function date_fr() {
  6. $jour =  date('l');
  7. $le = date('j');
  8. $mois =  date('F');
  9. $annee = date('Y');
  10. $heure = date('G');
  11. $minute =  date('i');
  12. switch($jour) {
  13.     case 'Monday': $jour = 'Lundi'; break;
  14.     case 'Tuesday': $jour = 'Mardi'; break;
  15.     case 'Wednesday': $jour = 'Mercredi'; break;
  16.     case 'Thursday': $jour = 'Jeudi'; break;
  17.     case 'Friday': $jour = 'Vendredi'; break;
  18.     case 'Saturday': $jour = 'Samedi'; break;
  19.     case 'Sunday': $jour = 'Dimanche'; break;
  20.     default: $jour =''; break;
  21.   }
  22. switch($mois) {
  23.     case 'January': $mois = 'Janvier'; break;
  24.     case 'February': $mois = 'Février'; break;
  25.     case 'March': $mois = 'Mars'; break;
  26.     case 'April': $mois = 'Avril'; break;
  27.     case 'May': $mois = 'Mai'; break;
  28.     case 'June': $mois = 'Juin'; break;
  29.     case 'July': $mois = 'Juillet'; break;
  30.     case 'August': $mois = 'Août'; break;
  31.     case 'September': $mois = 'Septembre'; break;
  32.     case 'October': $mois = 'Octobre'; break;
  33.     case 'November': $mois = 'Novembre'; break;
  34.     case 'December': $mois = 'Decembre'; break;
  35.     default: $mois =''; break;
  36.   }
  37.   return $jour." ".$le." ".$mois.", ".$heure.":".$minute."  ";
  38. }
  39. ?>
  41. <!--[if IE]>
  42. <style type="text/css">
  43. html pre
  44. {
  45. width: 636px ;
  46. }
  47. </style>
  48. <![endif]-->
  50.  <title>R&eacute;seau d'Observation M&eacute;t&eacute;o du Massif Alpin</title>
  51.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  52.  <meta http-equiv="Content-Style-Type" content="text/css" />
  53.  <meta http-equiv="Content-Language" content="fr" />
  54. <script type="text/javascript">
  55. <!--
  56. window.onload=montre;
  57. function montre(id) {
  58. var d = document.getElementById(id);
  59. for (var i = 1; i<=10; i++) {
  60.  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  61. }
  62. if (d) {d.style.display='block';}
  63. }
  64. //-->
  65. </script>
  67. <link href="../CSS/template.css" rel="stylesheet" type="text/css" />
  68. </head>
  70. <body>
  71. <div id="conteneur">
  72.  <div id="header"></div>
  74. <div id="menu">
  75. <dl>
  76.  <dt onMouseOver="javascript:montre();"><a href="index.php">ACCEUIL</a></dt>
  77. </dl>
  78. <dl>
  79.  <dt onMouseOver="javascript:montre('smenu1');"><a href="#">STATIONS</a></dt>
  80.   <dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');" name="smenu1">
  81.   <ul>
  82.     <li><a href="station_24.php?id=2">ORCIERES</a></li>
  83.     <li><a href="station_24.php?id=4">ST M. D'HERES</a></li>
  84.               <li><a href="station_24.php?id=5">VIZILLE</a></li>
  85.               <li><a href="station_24.php?id=6">LE VERSOUD</a></li>
  86.    </ul>
  87.   </dd>
  88. </dl>
  89. <dl>
  90.  <dt onMouseOver="javascript:montre('smenu2');"><a href="#">WEBCAMS</a></dt>
  91. </dl>
  92. <dl>
  93.  <dt onMouseOver="javascript:montre('smenu3');"><a href="#">ROMMA</a></dt>
  94.   <dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre('');">
  95.   <ul>
  96.    <li><a href="contact.php">CONTACT</a></li>
  97.               <li><a href="association.php">L'ASSOCIATION</a></li>
  98.    <li><a href="adhesion.php">ADHERER</a></li>
  99.    <li><a href="dons.php">FAIRE UN DON</a></li>
  100.                 <li><a href="statuts.php">LES STATUTS</a></li>
  101.    <li><a href="reglement.php">REGLEMENT</a></li>
  102.                 <li><a href="#">ESPACE PRIVE</a></li>
  103.   </ul>
  104.   </dd>
  105. </dl>
  106. <dl>
  107.  <dt onMouseOver="javascript:montre('smenu4');"><a href="#">PARTENAIRES</a></dt>
  108.     </dl>
  109. </div>
  110.  <div id="date_heure"><? print date_fr();?></div>
  112.         <div id="contenu"><!-- TemplateBeginEditable name="corps_de_page" -->
  113.    
  114.  zone modifiable
  115.  <!-- TemplateEndEditable --></div>
  116.     <p id="footer">Copyright ROMMA 2008, reproduction interdite&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mentions l&eacute;gales | Plan du site | <a href="mailto:contact@romma.fr">Contact</a></p>
  117. </div>
  118. </body>
  119. </html>


J'ai l'impression que c'est un probleme d'empilement des conteneur, mais c'est étrange...
C'est ou que j'ai pas bon ?  
 
Encore merci.


---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM
Reply

Marsh Posté le 03-04-2008 à 23:02:22   

Reply

Marsh Posté le 07-04-2008 à 19:50:05    

up :(


---------------
EOS 5D mk II | 17-40 f/4 L USM | 50 f/1.4 USM | 135 f/2 L USM
Reply

Sujets relatifs:

Leave a Replay

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