[CSS] Menu déroulant --> aide please!

Menu déroulant --> aide please! [CSS] - HTML/CSS - Programmation

Marsh Posté le 06-04-2005 à 16:07:49    

Re!
 
Bon après les conseils de FlorentG, je me suis refais un ptit menu déroulant, mais c encore pas parfait...
 
http://www.duotone.ch/~bastien/applimed/
 
Mon CSS :

Code :
  1. #menu {
  2. position: absolute;
  3. top: 155px;
  4. left: 90px;
  5. width: 640px;
  6. }
  7. html>body #menu {
  8. top: 142px;
  9. }
  11. #menu ul {
  12. width: 100%;
  13. padding: 0px;
  14. margin: 0px;
  15. border-left: 1px solid black;
  16. border-right: 1px solid black;
  17. border-bottom: 1px solid black;
  18. background-color: #E2E2E2;
  19. }
  21. #menu li {
  22. float: left;
  23. position: relative;
  24. text-align: center;
  25. list-style-type: none;
  26. }
  27. #sMenu li {
  28. text-align: left;
  29. padding-left: 5px;
  31. width: 100%;
  32. }
  34. #menu li:hover {
  35. background-color: #6699CC;
  36. }
  38. #menu li ul {
  39. display: none;
  40. position: absolute;
  41. left: 0px;
  42. }
  44. #menu li > ul {
  45. top: auto;
  46. left: auto;
  47. }
  49. #menu li:hover ul, li.over ul {
  50. display: block;
  51. }
  53. #menu a {
  54. font-family: Arial, Helvetica, sans-serif;
  55. font-size: 10pt;
  56. color: #000000;
  57. font-weight: bold;
  58. text-decoration: none;
  59. }
  61. #sMenu a {
  62. font-weight: normal;
  63. }
  64. #sMenu a:hover {
  65. color: #FFFFFF;
  66. }
  68. .menuSmall {
  69. width: 75px;
  70. }
  72. .menuMedium {
  73. width: 120px;
  74. }
  76. .menuBig {
  77. width: 160px;
  78. }
  80. .borderRW {
  81. border-right: 1px solid white;
  82. }


 
 
Mon HTML :

Code :
  1. <head>
  2. <script type="text/javascript">
  3. startList = function() {
  4. if (document.all&&document.getElementById) {
  5. navRoot = document.getElementById("menu" );
  6. for (i=0; i<navRoot.childNodes.length; i++) {
  7. node = navRoot.childNodes[i];
  8. if (node.nodeName=="LI" ) {
  9. node.onmouseover=function() {
  10. this.className+=" over";
  11.   }
  12.   node.onmouseout=function() {
  13.   this.className=this.className.replace(" over", "" );
  14.    }
  15.    }
  16.   }
  17. }
  18. }
  19. window.onload=startList;
  20. </script>
  21. </head>
  23. <body>
  24.   <ul id="menu">
  25.    <li class="menuSmall borderRW"><a href="">Accueil</a></li>
  26.    <li class="menuMedium borderRW"><a href="">Entreprise</a>
  27.     <ul id="sMenu">
  28.      <a href=""><li>Présentation</li></a><br>
  29.      <a href=""><li>Historique</li></a>
  30.     </ul>
  31.    </li>
  32.    <li class="menuBig borderRW"><a href="">Produits & Services</a>
  33.     <ul id="sMenu">
  34.      <a href=""><li>Accessoires</li></a><br>
  35.      <a href=""><li>Applicateur</li></a><br>
  36.      <a href=""><li>Boules</li></a><br>
  37.      <a href=""><li>Compresses</li></a><br>
  38.      <a href=""><li>Sets</li></a><br>
  39.      <a href=""><li>Services</li></a>
  40.     </ul>
  41.    </li>
  42.    <li class="menuMedium borderRW"><a href="">Qualité</a>
  43.     <ul id="sMenu">
  44.      <a href=""><li>Certification ISO</li></a><br>
  45.      <a href=""><li>Fabrication</li></a>
  46.     </ul>
  47.    </li>
  48.    <li class="menuSmall borderRW"><a href="">Contacts</a></li>
  49.    <li class="menuSmall"><a href="">Liens</a></li>
  50.   </ul>
  51. </body>


 
 
Plusieurs problèmes à noter :
 

  • Sous IE ca marche pas... alors que ca devrait! Bizarre.
  • Comment je fais pour enlever le débordement (5px) qui se produit qd on survole un sous-menu (tout en gardant cette marge (5px) à gauche! -> pasque le texte collé au bord, c'est pas beau!)??
  • Comment faire pour diminuer la bordure des sous-menus d'1 pixel -> pour aligner avec les petit traits blancs.
  • Tous les problèmes qui vont apparaître sous IE une fois que ca marchera :D


Merci pour votre aide!
 
PS: A lire pour ceux qui sont intéressé par un menu du genre :
http://www.alistapart.com/articles/dropdowns  
http://css.alsacreations.com/Const [...] us-en-CSS/


Message édité par le_duc le 06-04-2005 à 16:12:53
Reply

Marsh Posté le 06-04-2005 à 16:07:49   

Reply

Marsh Posté le 06-04-2005 à 16:10:45    

Ca marche sous IE à cause du script tout en haut :)


Message édité par FlorentG le 06-04-2005 à 16:10:53
Reply

Marsh Posté le 06-04-2005 à 16:13:19    

?? j'enlève le script?? (je test...)
 
-> vlà l'adresse pour voir : http://www.duotone.ch/~bastien/applimed/

Reply

Marsh Posté le 06-04-2005 à 16:16:11    

avec ou sans script, ca marche pas sous IE ...

Reply

Marsh Posté le 06-04-2005 à 16:16:15    

Haaaaa applimed le retour :D
 
Sinon sans le script ça ne fonctionnera pas sous IE [:spamafote]

Reply

Marsh Posté le 06-04-2005 à 16:20:31    

FlorentG a écrit :

Haaaaa applimed le retour :D
 
Sinon sans le script ça ne fonctionnera pas sous IE [:spamafote]


 
pkoi le retour? :D
 
bah, là le script y est et ca marche pas...

Reply

Marsh Posté le 06-04-2005 à 16:23:23    

Sûrement un problème de CSS, il trouve pas la bonne classe

Reply

Marsh Posté le 06-04-2005 à 16:27:51    

FlorentG a écrit :

Sûrement un problème de CSS, il trouve pas la bonne classe


 
comment tu fais pour savoir qu'il trouve pas la bonne classe?

Reply

Marsh Posté le 06-04-2005 à 16:30:56    

Tu lui demandes : Tu fait sous IE "Fichier\Poser une question", tu tapes : "Do you find the new class", et il te répondra :D

Reply

Marsh Posté le 06-04-2005 à 16:33:19    

FlorentG a écrit :

Tu lui demandes : Tu fait sous IE "Fichier\Poser une question", tu tapes : "Do you find the new class", et il te répondra :D


 
:D LOOL non mais sérieux? y'a moyen de savoir ca ?? genre un compilateur :D?
 
-> j'ai trouvé l'erreur... en fait il faut pas mettre les :
 
#menu blabla
 
seulement
 
blabla
 
Je vois pas ce que ca change, mais bon...
 
Pour les autres problèmes, t'as une solution?

Reply

Marsh Posté le 06-04-2005 à 16:33:19   

Reply

Marsh Posté le 06-04-2005 à 16:35:26    

Avec un débuggeur. Si t'as Visual Studio, tu as entre tes mains le meilleur débuggeur de JS :sol:

Reply

Marsh Posté le 06-04-2005 à 16:41:08    

FlorentG a écrit :

Avec un débuggeur. Si t'as Visual Studio, tu as entre tes mains le meilleur débuggeur de JS :sol:


 
et je fais comment pour passer ca dasn VS ?

Reply

Marsh Posté le 06-04-2005 à 16:50:41    

Je sais pas :D

Reply

Marsh Posté le 06-04-2005 à 17:14:55    

:pfff:  :D  
 
 
Personne pour les autres problèmes'?
 
Ptit prob. supplémentaire:
 

  • IE ne gère pas la couleur de fond lors du survol...


@++

Reply

Marsh Posté le 06-04-2005 à 19:43:46    

up

Reply

Marsh Posté le 07-04-2005 à 11:42:32    

up

Reply

Marsh Posté le 07-04-2005 à 14:03:08    

reup

Reply

Marsh Posté le 08-04-2005 à 08:52:22    

up

Reply

Sujets relatifs:

Leave a Replay

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