Problème de décalage et de compatibilité

Problème de décalage et de compatibilité - HTML/CSS - Programmation

Marsh Posté le 23-10-2010 à 21:44:54    

Bonjour à toutes et tous,
 
j'ai fait un menu en html/css.
 
Cependant, je ne sais pas pourquoi, le menu est décalé du haut de la cellule.
 
Pour plus de compréhension, voici mes codes :
 
CSS
 

Code :
  1. #menu{
  2. width:150px;
  3. }
  4. .menu, .sousmenu{
  5. text-align: right;
  6. }
  7. .menu{
  8. height:18px;
  9. width:150px;
  10. color:#fff;
  11. padding-bottom: 10px;
  12. top:auto;
  13. font-family:arial,sans-serif;
  14. font-size:12px;
  15. text-decoration:none;
  16. }
  17. .sousmenu{
  18. height:14px;
  19. width:170px;
  20. padding: 0px;
  21. color:#ffffff;
  22. text-align: right;
  23. }
  24. .menu a{
  25. display:block;
  26. width:100%;
  27. height:100%;
  28. color:#fff;
  29. font-family:arial,sans-serif;
  30. font-size:12px;
  31. text-decoration:none;
  32. }
  33. .sousmenu a{
  34. display:block;
  35. width:100%;
  36. height:100%;
  37. color:#666666;
  38. font-family:Garamond;
  39. font-size:18px;
  40. text-decoration:none;
  41. }
  42. .sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
  43. color:#ffffff;
  44. }


 
HTML
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="robots" content="index, follow" />
  6. <meta name="keywords" content=" "/>
  7. <meta name="description" content=" "/>
  8. <title></title>
  9.      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  10.  <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
  11.  <script type="text/javascript" src="js/copie_functions.js"></script>
  12. <style type="text/css">
  13. <!--
  14. body {
  15. margin-top: 0px;
  16. }
  17. -->
  18. </style></head>
  19. <body bgcolor="#333333">
  20. <table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
  21. <tr>
  22. <td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
  23. </tr>
  24. <tr>
  25. <td width="183" valign="top"><div id="menu">
  26. <div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
  27. <div id="sousmenu1" style="display:none"><br>
  28. <div class="sousmenu"><a href="#">th&eacute;&acirc;tre</a></div><br>
  29. <div class="sousmenu"><a href="#">enfance et jeunesse</a></div><br>
  30. <div class="sousmenu"><a href="#">po&eacute;sie</a></div><br>
  31. <div class="sousmenu"><a href="#">traduction</a></div><br>
  32. <div class="sousmenu"><a href="#">in&eacute;dits</a></div><br>
  33. <div class="sousmenu"><a href="#">autres publications</a></div><br>
  34. </div>
  35. <div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
  36. <div id="sousmenu2" style="display:none"><br>
  37. <div class="sousmenu"><a href="#">saison 2010-2011</a></div><br>
  38. <div class="sousmenu"><a href="#">saison 2009-2010</a></div><br>
  39. <div class="sousmenu"><a href="#">archives</a></div><br>
  40. </div>
  41. <div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
  42. <div id="sousmenu3" style="display:none"><br>
  43. <div class="sousmenu"><a href="#">lacoop</a></div><br>
  44. <div class="sousmenu"><a href="#">projets pour la sc&egrave;ne</a></div><br>
  45. <div class="sousmenu"><a href="#">enseignement/Ateliers</a></div><br>
  46. <div class="sousmenu"><a href="#">radio</a></div><br>
  47. </div>
  48. <div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
  49. <div id="sousmenu4" style="display:none"><br>
  50. <div class="sousmenu"><a href="#">&agrave; l'affiche</a></div><br>
  51. <div class="sousmenu"><a href="#">nouvelle publication</a></div><br>
  52. <div class="sousmenu"><a href="#">impromptus</a></div><br>
  53. </div>
  54. <div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
  55. <div id="sousmenu5" style="display:none"><br>
  56. <div class="sousmenu"><a href="#">presse</a></div><br>
  57. <div class="sousmenu"><a href="#">liens</a></div><br>
  58. <div class="sousmenu"><a href="#">contact</a></div><br>
  59. </div>
  60. </div></td>
  61. <td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
  62. <td width="17" style="background: #000;">&nbsp;</td>
  63. </tr>
  64. </table>
  65. </body>
  66. </html>


 
Javascript
 

Code :
  1. function afficheMenu(obj){
  2. var idMenu     = obj.id;
  3. var idSousMenu = 'sous' + idMenu;
  4. var sousMenu   = document.getElementById(idSousMenu);
  5. /*****************************************************/
  6. /** on cache tous les sous-menus pour n'afficher    **/
  7. /** que celui dont le menu correspondant est cliqué **/
  8. /** où 4 correspond au nombre de sous-menus         **/
  9. /*****************************************************/
  10. for(var i = 1; i <= 5; i++){
  11.  if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
  12.   document.getElementById('sousmenu' + i).style.display = "none";
  13.  }
  14. }
  15. if(sousMenu){
  16.  //alert(sousMenu.style.display);
  17.  if(sousMenu.style.display == "block" ){
  18.   sousMenu.style.display = "none";
  19.  }
  20.  else{
  21.   sousMenu.style.display = "block";
  22.  }
  23. }
  24. }


 
Pour voir le résultat : http://www.la-grange-sardieres.fr/ [...] tion2.php#
 
Sous IE il y a également un problème, lorsque je clique sur un menu pour le dérouler, on attend un clique et l'image est entourée.
 
Pourriez-vous m'aider s'il vous plait ?
 
Merci beaucoup et bonne soirée

Reply

Marsh Posté le 23-10-2010 à 21:44:54   

Reply

Sujets relatifs:

Leave a Replay

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