OK avec Firefox, pas bien avec IE, pb dreamweaver menu déroulants

OK avec Firefox, pas bien avec IE, pb dreamweaver menu déroulants - HTML/CSS - Programmation

Marsh Posté le 22-03-2005 à 14:51:15    

J'ai essayé de faire un début de site au bloc notes et en copiant / collant des menus (je ne sais pas les faire) et en changeant leur design :  
 - avec Firefox : ça a l'air ok, les menus marchent
http://img212.exs.cx/img212/7862/firefox8yk.jpg
 
 - avec explorer : ça part dans tous les sens
http://img111.exs.cx/img111/4757/explorer6nj.jpg
Les menus sont décalés la barre des menus du bas sort du cadre bleu alors qu'elle devrait y rester, comme sous FF
 
 - Sous dreamweaver, ça me donne ça :  
http://img111.exs.cx/img111/1202/dream9rd.jpg
Les menus restent déoulés, empechant toute modification du texte en dessous (embetant...)
D'autre part, le titre est caché par la bande bleue et je ne sais pas où mettre des "top=xxpx" pour rémédier à ça (j'ai essayé partout, ça ne marche pas)
 
Voici le fichier xhtml :  

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. <title>Les miniatures de Julius</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <script type="text/javascript">
  7. <!--
  8. window.onload=montre;
  9. function montre(id) {
  10. var d = document.getElementById(id);
  11. for (var i = 1; i<=10; i++) {
  12. if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  13. }
  14. if (d) {d.style.display='block';}
  15. }
  16. //-->
  17. </script>
  18. <link rel="stylesheet" media="screen" type="text/css" title="miniatures" href="../styles/miniatures2.css" />
  19. </head>
  20. <body>
  21. <div id="haut">
  22. <div id="menu">
  23. <dl>
  24. <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
  25. </dl>
  26. <dl>
  27. <dt onmouseover="javascript:montre();"><a href="mailto:xxxx@gmail.com" title="Pour me contacter">Contact</a></dt>
  28. </dl>
  29. <dl>
  30. <dt onmouseover="javascript:montre();"><a href="" title="Liens">Liens</a></dt>
  31. </dl>
  32. <dl>
  33. <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Conseils</a></dt>
  34. </dl>
  35. <p class="copyright"> Les miniatures du Julius</p>
  36. <dl> 
  37. <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
  38.   <dd id="smenu1" onmouseover="javascript:montre('smenu1');"onmouseout="javascript:montre('');">
  39.    <ul>
  40.     <li><a href="#">Sous-Menu 1.1</a></li>
  41.     <li><a href="#">Sous-Menu 1.2</a></li>
  42.     <li><a href="#">Sous-Menu 1.3</a></li>
  43.     <li><a href="#">Sous-Menu 1.4</a></li>
  44.     <li><a href="#">Sous-Menu 1.5</a></li>
  45.     <li><a href="#">Sous-Menu 1.6</a></li>
  46.    </ul>
  47.   </dd>
  48. </dl>
  49. <dl>
  50. <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
  51.   <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
  52.    <ul>
  53.     <li><a href="lien.htm">Liens</a></li>
  54.     <li><a href="#">Sous-Menu 2.2</a></li>
  55.     <li><a href="#">Sous-Menu 2.3</a></li>
  56.     <li><a href="#">Sous-Menu 2.4</a></li>
  57.    </ul>
  58.   </dd>
  59. </dl>
  60. <dl>
  61. <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
  62.   <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
  63.    <ul>
  64.     <li><a href="#">Sous-Menu 3.1</a></li>
  65.     <li><a href="#">Sous-Menu 3.2</a></li>
  66.     <li><a href="#">Sous-Menu 3.3</a></li>
  67.     <li><a href="#">Sous-Menu 3.4</a></li>
  68.     <li><a href="#">Sous-Menu 3.5</a></li>
  69.    </ul>
  70.   </dd>
  71. </dl>
  72. <dl>
  73. <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
  74.   <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
  75.    <ul>
  76.     <li><a href="#">Sous-Menu 4.1</a></li>
  77.     <li><a href="#">Sous-Menu 4.2</a></li>
  78.     <li><a href="#">Sous-Menu 4.3</a></li>
  79.    </ul>
  80.   </dd>
  81. </dl>
  82. </div>
  83. </div>
  84. <div id="site">
  85. <!-- TemplateBeginEditable name="region" -->
  86. <h2 class="titre">Titre</h2><!-- TemplateEndEditable -->
  87. <!-- TemplateBeginEditable name="region2" -->
  88. <p class="texte_milieu"> texte le saucisson sec c'est bon pour la santé, trop en manger c'est grossir, mangez des pommes c'est meilleur et moins cher. Mais tout ça ne vaut pas un bon plat de pates à la tomage, seulemnt 400 calories et on n'a plus faim. blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/>blabla <br/> </p>
  89. </p>
  90. <!-- TemplateEndEditable -->
  91. </div>
  92. <div id="bas">
  93. </div>
  94. </body>
  95. </html>


 
et le css :  

Code :
  1. <style type="text/css">
  2. <!--
  3. /* CSS issu des tutoriels www.alsacreations.com/articles */
  4. body {
  5. padding: 0;
  6. background: #06c;
  7. font: 80% verdana, arial, sans-serif;
  8. width: 100%;
  9. height: 100%;
  10. margin:auto;
  11. }
  12. dl, dt, dd, ul, li {
  13. margin: 0;
  14. padding: 0px;
  15. list-style-type: none;
  16. }
  17. #menu {
  18. position: absolute;
  19. top: 2px;
  20. left: 2px;
  21. z-index:100;
  22. width: 100%;
  23. height: 29px;
  24. }
  25. #menu dl {
  26. float: left;
  27. width: 15%;
  28. margin: 0.1px;
  29. font-weight: bold;
  30. font-size:16px;
  31. }
  32. #menu dt {
  33. cursor: pointer;
  34. text-align: center;
  35. font-weight: bold;
  36. background: #0066a6;
  37. border: 1px solid gray;
  38. color:white
  39. }
  40. #menu dd {
  41. border: 1px solid gray;
  42. }
  43. #menu li {
  44. text-align: center;
  45. background: #edf3f3;
  46. }
  47. #menu li a,
  48. {
  49. color: #000;
  50. text-decoration: none;
  51. display: block;
  52. height: 100%;
  53. border: 0 none;
  54. }
  55. #menu dt a {
  56. color: white;
  57. text-decoration: none;
  58. display: block;
  59. height: 100%;
  60. border: 0 none;
  61. }
  62. #menu li a:hover, #menu dt a:hover {
  63. background: #0093cc;
  64. color:white;
  65. }
  66. #site
  67. {
  68. width: 98%;
  69. height: 480px;
  70. background-color: #FFFFFF;
  71. font-size: 18px;
  72. text-align: justify;
  73. margin:5px;
  74. overflow: auto;
  75. }
  76. a:link
  77. {
  78. text-decoration: none;
  79. color:black;
  80. }
  81. a:visited
  82. {
  83. text-decoration: none;
  84. color: red;
  85. }
  86. .copyright
  87. {
  88. color=white;
  89. text-align:right;
  90. padding:0;
  91. margin:0;
  92. font-weight:bold;
  93. }
  94. a:active
  95. {
  96. text-decoration: none;
  97. color: #FF3300;
  98. }
  99. a:hover
  100. {
  101. text-decoration:none;
  102. color:white;
  103. background-color:#06C;
  104. }
  105. .titre_paragraphe
  106. {
  107. text-align:left;
  108. font-style:italic;
  109. font-size:36px;
  110. }
  111. .texte_milieu
  112. {
  113. text-align:justify;
  114. font-size:18px;
  115. margin:20px;
  116. background-color: #FFFFFF;
  117. marginright:20px;
  118. }
  119. #bas
  120. {
  121. width: 100%;
  122. height: 30px;
  123. background-color: #06c;
  124. font-size: 16px;
  125. padding:0;
  126. text-decoration: none;
  127. color:white;
  128. position:absolute;
  129. left:0
  130. }
  131. #haut{
  132. background-color:#06c;
  133. height:30px;
  134. width:100%;
  135. position:absolute;
  136. padding:0;
  137. top:0;
  138. left:0
  139. }
  140. .titre
  141. {
  142. text-align:center;
  143. font-size:30px;
  144. font-style: italic;
  145. font-weight: bold;
  146. background-color: #FFFFFF;
  147. }
  148. -->
  149. </style>


 
Help d'un débutant :cry:
 
Merci


Message édité par gros minet le 22-03-2005 à 14:51:59
Reply

Marsh Posté le 22-03-2005 à 14:51:15   

Reply

Sujets relatifs:

Leave a Replay

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