petite modif pour menu verti gauche

petite modif pour menu verti gauche - HTML/CSS - Programmation

Marsh Posté le 06-06-2006 à 15:40:08    

Bonjour à tous,
il y a un menu dans les tutos du site d'alsacreation qui me plait bien mais je voudrais lui apporté une modif, et je n'arrive pas à trouver où.
Voici l'adresse du menu : http://css.alsacreations.com/modelesmenus/vd2.htm

 

Et le petit truc que je voudrais lui ajouter c'est sur le sous menu. Je voudrais que ce soit la ligne entiere qui contient le texte qui soit cliquable et pas que le texte.
Avez-vous une idée ?
MErci  

Reply

Marsh Posté le 06-06-2006 à 15:40:08   

Reply

Marsh Posté le 06-06-2006 à 17:29:02    

display:block

Reply

Marsh Posté le 06-06-2006 à 18:58:17    

le display block est déjà sur le A du menu, en fait c'est IE qui fait sa pute, je vote pour le fait que le block n'a pas de layout sur lui
en foutant un zoom:1 on force le layout.
lecture : http://www.satzansatz.de/cssd/onhavinglayout.html
 
sinon le code corrigé (avec un petit fond sur le A:hover (un fond rouge))
 

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>un menu vertical déroulant en CSS</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
  6.  
  7. <script type="text/javascript"> 
  8. <!-- 
  9. window.onload=montre; 
  10. function montre(id) { 
  11. var d = document.getElementById(id); 
  12.     for (var i = 1; i<=10; i++) { 
  13.         if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';} 
  14.     } 
  15. if (d) {d.style.display='block';} 
  16. } 
  17. //--> 
  18. </script> 
  19.  
  20. <style type="text/css"> 
  21. <!-- 
  22. body { 
  23. background: white; 
  24. padding:0; 
  25. margin:0; 
  26. font-family: verdana, arial, sans-serif; 
  27. font-size: 90%; 
  28. color: black; 
  29. } 
  30. dl, dt, dd, ul, li { 
  31. margin: 0; 
  32. padding: 0; 
  33. list-style-type: none; 
  34. } 
  35. #menu { 
  36. position: absolute; 
  37. top: 1em; 
  38. left: 1em; 
  39. width: 10em; 
  40. } 
  41.  
  42. #menu dt { 
  43. cursor: pointer; 
  44. background: #A9BFCB; 
  45. height: 20px; 
  46. line-height: 20px; 
  47. margin: 2px 0; 
  48. border: 1px solid gray; 
  49. text-align: center; 
  50. font-weight: bold; 
  51. } 
  52.  
  53. #menu dd { 
  54. position: absolute; 
  55. z-index: 100; 
  56. left: 8em; 
  57. margin-top: -1.4em; 
  58. width: 10em; 
  59. background: #A9BFCB; 
  60. border: 1px solid gray; 
  61. } 
  62.  
  63. #menu ul { 
  64. padding: 2px; 
  65. } 
  66. #menu li { 
  67. text-align: center; 
  68. font-size: 85%; 
  69. height: 18px; 
  70. line-height: 18px; 
  71. } 
  72. #menu li a, #menu dt a { 
  73. color: #000; 
  74. text-decoration: none; 
  75. display: block; 
  76. zoom:1; /*on force le layout de ce con de IE*/ 
  77. } 
  78.  
  79. #menu li a:hover { 
  80. background:red; 
  81. color:#fff; 
  82. } 
  83.  
  84.  
  85. #mentions { 
  86. font-family: verdana, arial, sans-serif; 
  87. position: absolute; 
  88. bottom : 200px; 
  89. left : 10px; 
  90. color: #000; 
  91. background-color: #ddd; 
  92. } 
  93. #mentions a {text-decoration: none; 
  94. color: #222; 
  95. } 
  96. #mentions a:hover{text-decoration: underline; 
  97. } 
  98. --> 
  99. </style> 
  100.  
  101. </head> 
  102. <body> 
  103.  
  104. <!-- Menu  --> 
  105.  
  106. <dl id="menu"> 
  107.         <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="#">Menu 1</a></dt> 
  108.             <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"> 
  109.                 <ul> 
  110.                     <li><a href="#">Sous-Menu 1.1</a></li> 
  111.                     <li><a href="#">Sous-Menu 1.2</a></li> 
  112.                     <li><a href="#">Sous-Menu 1.3</a></li> 
  113.  
  114.                 </ul> 
  115.             </dd>     
  116.              
  117.         <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt> 
  118.             <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"> 
  119.                 <ul> 
  120.                     <li><a href="#">Sous-Menu 2.1</a></li> 
  121.                     <li><a href="#">Sous-Menu 2.2</a></li> 
  122.                 </ul> 
  123.  
  124.             </dd>     
  125.  
  126.         <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt> 
  127.             <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();"> 
  128.                 <ul> 
  129.                     <li><a href="#">Sous-Menu 3.1</a></li> 
  130.                     <li><a href="#">Sous-Menu 3.1</a></li> 
  131.  
  132.                     <li><a href="#">Sous-Menu 3.1</a></li> 
  133.  
  134.                     <li><a href="#">Sous-Menu 3.1</a></li> 
  135.                     <li><a href="#">Sous-Menu 3.1</a></li> 
  136.                     <li><a href="#">Sous-Menu 3.1</a></li> 
  137.                 </ul> 
  138.             </dd> 
  139.  
  140.         <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt> 
  141.  
  142.             <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"> 
  143.                 <ul> 
  144.                     <li><a href="#">Sous-Menu 4.1</a></li> 
  145.                     <li><a href="#">Sous-Menu 4.1</a></li> 
  146.                 </ul> 
  147.             </dd> 
  148. </dl> 
  149.  
  150. <div id="mentions">Raphaël GOETTER<br /> 
  151.  
  152.   <a href="http://www.alsacreations.com">Alsacréations</a><br /> 
  153.   <a href="http://css.alsacreations.com/Galeries-de-menus-en-CSS">Retour</a></div> 
  154.  
  155. </body> 
  156. </html>


---------------
Blablaté par Harko
Reply

Marsh Posté le 06-06-2006 à 20:26:27    

genial ton lien gatsu je connaissais pas merci

Reply

Marsh Posté le 07-06-2006 à 15:17:05    

est-ce qu'il est possible de mettre un espace blanc entre chaque menus? J'ai essayé plusieurs trucs mais rien de concluant.

Reply

Marsh Posté le 07-06-2006 à 15:40:24    

padding
 
ou tu jous avec les border

Reply

Marsh Posté le 07-06-2006 à 16:03:38    

j'ai créé un # pour chaque menu avec la position top. C'est mieux?

Reply

Marsh Posté le 07-06-2006 à 16:22:42    

a la ligne #menu dt0
tu modifie margin: 2px 0; en margin:5px 0 (ou le nombre de pixel que tu veux pour separer les menus)


Message édité par gatsu35 le 07-06-2006 à 16:23:35

---------------
Blablaté par Harko
Reply

Marsh Posté le 07-06-2006 à 16:40:27    

Merci c'est super. Petite question :
le 0 correspond à quoi alors ?

Reply

Marsh Posté le 07-06-2006 à 16:52:48    

http://wiki.media-box.net/documentation/css/margin


---------------
Blablaté par Harko
Reply

Marsh Posté le 07-06-2006 à 16:52:48   

Reply

Marsh Posté le 07-06-2006 à 17:03:28    

Merci  trop cool !!!
j'abuse encore de votre gentillesse .
Si je veux que mes fond de menu de gauche soit transparent comment je fais ?
Parce que j'ai essayé de virer l'intitulé background et ma souris n'affiche plus mon ss menu dés qu'elle sort du texte. Faut-il mettre une image en gif transparent?

Reply

Marsh Posté le 07-06-2006 à 17:18:06    

background: #A9BFCB; <== tu supprime cette ligne :p


---------------
Blablaté par Harko
Reply

Marsh Posté le 12-06-2006 à 16:16:21    

oui j'ai essayé mais je n'arrive pas à aller sur le sous menu dés que la souris sort du texte. ALors j'ai trouvé une solutiond e replis une image avec un fond transparent. Bonne solution?

Reply

Marsh Posté le 12-06-2006 à 16:19:33    

Sinon j'ai un autre soucis. J'ai testé cette mise en page avec firefox et oulalalalala.  
Il ne me prends pas en compte les propriété du background (je l'ai modifié j'ai mis une img), ni le style de police, j'ai aussi un underline un peu épais sous les menus. Une idée ?
Merci

Reply

Marsh Posté le 12-06-2006 à 17:54:36    

Une idée qu'il faut se débrouiller un peu seul, cher ami :D
 
Pour toi:  
http://www.csszengarden.com/  
http://www.alsacreations.com  
http://openweb.eu.org/

Reply

Marsh Posté le 23-06-2006 à 10:01:49    

une autre petite embrouille. Mon menu passe sous les zones de foermulaires . Une idée ?
J'ai cherché partout mais rien !!!

Reply

Marsh Posté le 23-06-2006 à 10:10:50    

ouh ouh y a qq un ?

Reply

Marsh Posté le 23-06-2006 à 10:17:30    

9min et 2 sec de patience, ben dis donc... va falloir faire des efforts de ce côté là mon ami :D :o

Reply

Marsh Posté le 23-06-2006 à 10:26:00    

bon désolé je patiente milles excuses

Reply

Marsh Posté le 23-06-2006 à 10:39:31    

sinon je fais des essais qd meme. J'essaye avec la propriété z-index mais rien n'y fais, que faire ?

Reply

Marsh Posté le 23-06-2006 à 14:04:58    

vous avez vriament pas d'idée pour ce pb ? svp

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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