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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Mon menu se dérobe

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Mon menu se dérobe

n°1712512
endozen
Endorsen
Posté le 03-04-2008 à 23:02:22  profilanswer
 

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
mood
Publicité
Posté le 03-04-2008 à 23:02:22  profilanswer
 

n°1713999
endozen
Endorsen
Posté le 07-04-2008 à 19:50:05  profilanswer
 

up :(


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

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

  [CSS] Mon menu se dérobe

 

Sujets relatifs
ajouter une option dans le menu contextuel d'un JFileChoosermodifier la hauteur de ma balise menu dt
question héritage CSS[CSS] Mettre l'image background du body au 1er plan
Rotation CSS/HTML ???Menu déroulant
Menu déroulant en XHTML/CSS (sans JS), compatible IE6 : Possible ?CSS, absolut et relatif
Probleme méthodologie CSS 
Plus de sujets relatifs à : [CSS] Mon menu se dérobe

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

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