Se connecter avec
S'enregistrer | Connectez-vous

Probleme liste deroulante vertical

Dernière réponse : dans Programmation

BONJOUR
je veux mettre une liste deroulante verticale et j'ai des soucis je n'arrive pas a ce que dans une des option il y es deux sous options
ex: Ligue 1: bordeaux , lyon
pour moi il n'y en a que un sur les 2 qui s"affiche donc est ce que cela vient du code html ou css , je n'arrive pas a voir ma faute


je vous envoi mn css et html

[edit: code dans le message suivant]

Autres pages sur : probleme liste deroulante vertical

Lassé par la pub ? Créez un compte

  1. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http;//<a href="http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd" target="_blank">www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd</a>"> 
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml.lang="fr"> 
    

  3. <head> 
    

  4. <title>site des chantiers</title> 
    

  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/> 
    

  6. <link rel="stylesheet" media="screen" type="text/css" href="chantiers.css" /> 
    

  7. <script type="text/javascript"> 
    

  8. <!-- 
    

  9. sfHover = function() { 
    

  10. var sfEls = document.getElementById("menu" ).getElementsByTagName("LI" ); 
    

  11. for (var i=0; i<sfEls.length; i++) { 
    

  12. sfEls.onmouseover=function() { 
    

  13. this.className+=" sfhover"; 
    

  14. } 
    

  15. sfEls[i].onmouseout=function() { 
    

  16. this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" ); 
    

  17. } 
    

  18. } 
    

  19. } 
    

  20. --> 
    

  21. </script> 
    

  22. if (window.attachEvent) window.attachEvent("onload", sfHover); 
    

  23.  
  24. </head> 
    

  25.  
  26. <body bgcolor=black> 
    

  27.  
  28. <div id="en_tete"> 
    

  29. <h1>Les chantiers de l'Atlantique</h1> 
    

  30. </div> 
    

  31. <div id="menus"> 
    

  32.  
  33. <ul id="menu"> 
    

  34. <li><a href="file:///J:/projet%20chantier/projet%20web/web2/actu.htm">Atualités</a></li> 
    

  35. <li><a href="">Historique</a> 
    

  36. <ul> 
    

  37. <li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li> 
    

  38. </ul> 
    

  39. </li> 
    

  40. <li> 
    

  41. <a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Concepetion d'un bateau</a> 
    

  42. <ul> 
    

  43. <li><a href="file:///I:/projet%20chantier/projet%20web/web2/Untitled-2.htm">photos</a></li> 
    

  44. </ul> 
    

  45. </li> 
    

  46. <li> 
    

  47. <a href="">Les différents bateaux construits</a> 
    

  48. <ul> 
    

  49. <li><a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a></li> 
    

  50. </ul> 
    

  51. </li> 
    

  52. <li><a href="file:///J:/projet%20chantier/projet%20web/web2/Untitled-2.htm">Queen Mary</a> 
    

  53. <ul> 
    

  54. <li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li> 
    

  55. </ul> 
    

  56. <ul> 
    

  57. <li><a href="file:///J:/projet%20chantier/projet%20web/web2/photoqueen.htm">photos et video</a></li> 
    

  58. </ul> 
    

  59.  
  60. <li><a href="">Plan</a></li> 
    

  61. <li><a href="">Visite</a></li> 
    

  62. </ul> 
    

  63.  
  64. </div> 
    

  65. <div id="corps"> 
    

  66. </div> 
    

  67. </body> 
    

  68. </html> 
    

  69.  
  70. css:
    

  71. body 
    

  72. { 
    

  73. background:url("zvbxjg95.gif" ) no repeat; 
    

  74. font-family:Arial; 
    

  75. width:90%; 
    

  76. margin-left:auto; 
    

  77. margin-right:auto; 
    

  78. } 
    

  79. li 
    

  80. { 
    

  81. color:#F7E444; 
    

  82. } 
    

  83. a 
    

  84. { 
    

  85. color:blue; 
    

  86. } 
    

  87. a:hover 
    

  88. { 
    

  89. color:red; 
    

  90. } 
    

  91. h1 
    

  92. { 
    

  93. color:#0099FF; 
    

  94. font-size:24px; 
    

  95. text-align:center; 
    

  96. padding-top:25px; 
    

  97. } 
    

  98.  
  99.  
  100. /*-----------------------définition stle des blocs----------------*/ 
    

  101. /*--------------------style div en-tête------------------*/ 
    

  102.  
  103. #en_tete 
    

  104. { 
    

  105. font-family:lucida handwriting; 
    

  106. background-image:url("juju.bmp" ); 
    

  107. height:150px; 
    

  108. z-index:1; 
    

  109.  
  110. } 
    

  111.  
  112. /*---------------------------style menus----------------------*/ 
    

  113.  
  114. #menus 
    

  115. { 
    

  116. width:20%; 
    

  117. float:left; 
    

  118. margin-left:-5px; 
    

  119. margin-top:50px; 
    

  120. } 
    

  121.  
  122.  
  123. /*----------------------style corps--------------------------------*/ 
    

  124. #corps 
    

  125. { 
    

  126. margin-left:22.5%; 
    

  127. margin-top:50px; 
    

  128. padding:20px; 
    

  129. color:black; 
    

  130. background-image:url("chnaties.jpg" ); 
    

  131. background-repeat:no-repeat; 
    

  132. height:500px; 
    

  133. } 
    

  134.  
  135.  
  136. /*----------------style pied de page-----------------------*/ 
    

  137.  
  138. #menu, #menu ul /* Liste */ 
    

  139. { 
    

  140. padding : 0; 
    

  141. margin : 0; 
    

  142. list-style : none; 
    

  143. line-height : 30px; 
    

  144. text-align : center; 
    

  145. } 
    

  146.  
  147. #menu /* Ensemble du menu */ 
    

  148. { 
    

  149. font-weight : bold; 
    

  150. font-family : Arial; 
    

  151. font-size : 12px; 
    

  152. } 
    

  153.  
  154. #menu a /* Contenu des listes */ 
    

  155. { 
    

  156. display : block; 
    

  157. padding : 0; 
    

  158. background : #000; 
    

  159. color : #fff; 
    

  160. text-decoration : none; 
    

  161. width : 144px; 
    

  162. } 
    

  163.  
  164. #menu li /* Elements des listes */ 
    

  165. { 
    

  166. float : left; 
    

  167. border-right : 1px solid #fff; 
    

  168. } 
    

  169.  
  170. html>body #menu li 
    

  171. { 
    

  172. border-right: 1px solid transparent ; 
    

  173. } 
    

  174.  
  175. #menu li ul /* Sous-listes */ 
    

  176. { 
    

  177. position: absolute; 
    

  178. width: 144px; 
    

  179. left: -999em; 
    

  180. } 
    

  181.  
  182.  
  183. #menu li ul li /* Éléments de sous-listes */ 
    

  184. { 
    

  185. border-top : 1px solid #fff; 
    

  186. position: absolute; 
    

  187. top: -30px; 
    

  188. left: 144px; 
    

  189. } 
    

  190.  
  191. html>body #menu li ul li 
    

  192. { 
    

  193. border-top : 1px solid transparent; 
    

  194. } 
    

  195.  
  196. #menu li ul ul 
    

  197. { 
    

  198.  
  199. border-left : 1px solid #fff ; 
    

  200. } 
    

  201.  
  202.  
  203. html>body #menu li ul ul 
    

  204. { 
    

  205. border-left : 1px solid transparent ; 
    

  206. } 
    

  207. #menu a:hover /* Lorsque la souris passe sur un des liens */ 
    

  208. { 
    

  209. color: #000; 
    

  210. background: #fff; 
    

  211. } 
    

  212. #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ 
    

  213. { 
    

  214. left: 2; 
    

  215. } 
    

  216.  
  217. #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ 
    

  218. { 
    

  219. left: auto; 
    

  220. min-height: 5; 
    

  221. }

Bonjour,

en faisant ça, Tous les sous menus s'affichent :

  1. #menu li ul /* Sous-listes */
    

  2. {
    

  3. position: relative;
    

  4. width: 144px;
    

  5. left: 100%;
    

  6. }


Celà dit, ça génère un décalage vertical qui correspond à la hauteur des sous menus. Après ça devient un peu confus au niveau des styles.

Je me permets aussi d'attirer ton attention sur 2 points :

  1. <a href="file:///F:/projet%20chantier/projet%20web/Untitled-2.htm">photos</a>

Tous tes liens pointent vers des fichiers situés sur ta machine. Si tu mets ce fichier tel quel sur le web, tu auras pleins d'erreur 404 pour les raisons suivantes :
- le serveur web sur lequel tu installes le fichier html n'a probablement pas la même structure de répertoire que ta machine
- le navigateur de ton client voyant file:// va aller cherche les liens en questions sur la machine de l'internaute.

Tes fichiers doivent être placés dans un répertoire accessible par le serveur web.

  1. # #en_tete
    

  2. # {
    

  3. # font-family:lucida handwriting;
    

  4. # background-image:url("juju.bmp" );
    

  5. # height:150px;
    

  6. # z-index:1;
    

  7. #
    

  8. # }


le format bmp n'est pas approprié sur le web, les fichiers bmp étant beaucoup plus lourds que des fichiers jpg ou png.








Lassé par la pub ? Créez un compte

Créer un nouveau sujet