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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1021005
Gros Minet
Posté le 22-03-2005 à 14:51:15  profilanswer
 

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
mood
Publicité
Posté le 22-03-2005 à 14:51:15  profilanswer
 


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

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

 

Sujets relatifs
css et menuMenu CSS
Cmt savoir si PHP a bien load MySQL ?!Menu dynamique (problème avec visibility)
Liens vers un FTP ne fonctionne pas sous FirefoxDreamweaver et "&nbsp;"
Probléme de mise en page ( ça marche sous IE mais pas sous firefox)probleme de decalage d'un sous menu en javascript avec IE
pb dreamweaver calques et menus déroulants (options manquantes) 
Plus de sujets relatifs à : OK avec Firefox, pas bien avec IE, pb dreamweaver menu déroulants


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