probleme menu deroulant css

probleme menu deroulant css - HTML/CSS - Programmation

Marsh Posté le 28-06-2006 à 16:05:24    

bonjour à tous....
 
je suis en train de faire un menu deroulant vertical en css.
j ai 2 soucis.
le premier est que sous IE le menu s'affiche pas en colonne mais en ligne(font chier c putin de navigateur!!!!!)
mon deuxieme est sous firefox les colonne s'affiche bien seulement il y a un probleme avec les forme sur les colonnes et les liens enfin assez de blabla je mets mes pages sur le serveur cbarrancos.free.fr et constaté par vous meme...
je met aussi le code du css.here:

Code :
  1. <style type="text/css">
  2. body {
  3. background:#666;
  4. color:#FFFFCC;
  5. behavior: url(css/csshover.htc);
  6. font-family: Arial, Helvetica, sans-serif;}
  9. div#menuDeroulant{
  10. float: left;
  11. margin: -1px 0 0 ;
  12. size:-1px;
  13. font-size:small;}
  15. div#menuDeroulant li{
  16. position: relative;
  17. list-style: none;
  18. margin: 0;
  19. float: left;
  20. border-bottom: 1px solid #CCC;
  21. border-top:1px solid #CCC;
  22. }
  24. div#menuDeroulant ul ul{
  25. position:absolute;
  26. display:none;
  27. }
  30. div#menuDeroulant ul{
  31. margin:0;
  32. padding:0;
  33. background:#666666;
  35. border-bottom:1px #CCCCCC solid;
  36. border-left:1px #CCCCCC solid;
  37. border-right:1px #CCCCCC solid;
  38. }
  40. div#menuDeroulant li.sousmenu{
  41. background:#666666;}
  45. div#menuDeroulant li a{
  46. display:block;
  47. text-decoration:none;
  48. padding:0.5em 0.5em 0.5em 0.5em;haut droite bas gauche
  49. color:#FF9900;
  50. text-align:center;
  51. }
  52. div#menuDeroulant li:hover{
  53. background:#FFFF99;met une couleur au passage de la souris
  54. }
  55. definition des niveau d imbrication
  56. div#menuDeroulant ul.niveau1 li.sousmenu:hover ul.niveau2
  57. {display:block;}
  60. </style>

Reply

Marsh Posté le 28-06-2006 à 16:05:24   

Reply

Marsh Posté le 28-06-2006 à 16:56:59    

Et le code HTML please

Reply

Marsh Posté le 28-06-2006 à 17:02:13    

la source est sur l adresse que j ai donné :cbarrancos.free.fr mais si tu le veux le voila:

Code :
  1. <body>
  2. <div align="center" id="menuDeroulant">
  3.   <ul id="navlist" class="niveau1" >
  4.     <li class="sousmenu"><a >Cr&eacute;ations / Productions </a>
  5.       <ul class="niveau2">  
  6.   <li style="text-align:left"><a href="prod.php">Concerts Spectacles Jeunes Public</a></li>
  7.   <li><a href="prod.php">Concerts Spectacles  Tout Public</a></li>
  8.   <li><a href="prod.php">Concerts en Extérieur</a></li>
  9.   <li><a href="prod.php">Installations Sonores</a></li>
  10.  </ul>
  11. </li>
  12.     <li class="sousmenu" ><a href="/services/">Formations / Actions P&eacute;dagogiques </a>
  13.         <ul  class="niveau2"  >
  14.           <li ><a href="/services/strategy/">Appliqu&eacute;es au spectacles </a></li>
  15.           <li ><a href="/services/optimize/">D&eacute;velopp&eacute;es avec les scolaires </a></li>
  16.           <li><a href="/services/guidance/">Conf&eacute;rences, Stages, Concerts &eacute;tudiants</a></li>
  17.           <li ><a href="/services/training/">Supports p&eacute;dagogiques </a></li>
  18.         </ul>
  19.     </li>
  20.     <li class="sousmenu"><a href="/events/"> La Recherche   </a>
  21.  <ul class="niveau2" >
  22.   <li ><a href="#">L'Acoustilight</a></li>
  23.      <li ><a href="#">L'Acoustigloo</a></li>
  24.      <li ><a href="#">La machina Acousmatique</a></li>
  25.  </ul>
  26. </li>
  27.    
  28.     <li class="sousmenu" ><a href="/pubs/">Le GMVL  </a>
  29.         <ul  class="niveau2" >
  30.           <li ><a href="/pubs/articles/">Qui sommes nous?</a></li>
  31.           <li ><a href="#">La musique &eacute;lectroacoustique</a> </li>
  32.           <li><a href="#">Les studios</a></li>
  33.    <li  ><a href="/pubs/tuts/">Nous joindre</a></li>
  34.    <li><a href="#">Nos partenaires</a></li>
  35.       </ul>
  36.     </li>
  37. <li class="sousmenu"><a href="#">Edition     </a>
  38.  <ul  class="niveau2">
  39.   <li ><a href="#">CD</a></li>
  40.      <li ><a href="#">Livres, Livres CD</a> </li>
  41.   <li><a href="#">Les Invendables</a></li>
  42.  </ul>
  43. </li>
  44.     <li  ><a href="/contact/">Agenda  </a></li>
  45.     <li ><a href="#">Ecouter  </a></li>
  46.  
  47.     <li ><a href="#"> Newsletter   </a></li>
  48.     <li ><a href="#">Plan du site  </a></li>
  49.   </ul>
  50. </div>
  51. </body>

Reply

Marsh Posté le 28-06-2006 à 17:36:10    

Code :
  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  6. body {
  7. background:#666; /*correspond a la couleur de fond*/
  8. color:#FFFFCC;/*correspond a la couleur du texte*/
  9. font-family: Arial, Helvetica, sans-serif;}
  11. /*position du menu dans le body*/
  12. div#menuDeroulant{
  13. font-size:small;}
  15. div#menuDeroulant>ul>li{
  16. list-style: none;
  17. float: left;
  18. border-bottom: 1px solid #CCC;
  19. border-top:1px solid #CCC;
  20. }
  22. div#menuDeroulant ul ul{
  23. position:absolute;
  24. margin:1px 0px;
  25. display:none;/*cache tous les sous menu */
  26. }
  28. /*mise en forme des menus*/
  29. div#menuDeroulant ul{
  30. background:#666666;
  31. /*border:1px #CCCCCC solid;place un cadre autour des lsite de dimension 1px*/
  32. }
  34. div#menuDeroulant .niveau2 li{
  35. background:#666666;
  36. border-bottom: 1px solid #CCC;
  37. border-right: 1px solid #CCC;
  38. border-left: 1px solid #CCC;
  39. }
  42. /*mise en forme des liens*/
  43. div#menuDeroulant li a{
  44. display:block;/*permet de mettre tout le block comme zone cliquable pour le  liens*/
  45. /*ne fonctionne pas sous IE*/
  46. text-decoration:none;
  47. padding:0.5em 0.5em 0.5em 0.5em;/*haut droite bas gauche*/
  48. color:#FF9900;
  49. }
  50. div#menuDeroulant li:hover{
  51. background:#FFFF99;/*met une couleur au passage de la souris*/
  52. }
  54. /*definition des niveau d imbrication*/
  55. div#menuDeroulant ul.niveau1 li.sousmenu:hover ul.niveau2
  56. {display:block;
  57. list-style: none;
  58. text-align:left;}


 
testé sous FF...Pas IE
 
Mais ton menu marchera jamais sous IE, il te faut du JS...

Reply

Marsh Posté le 28-06-2006 à 17:43:19    

pour resoudre le probleme de ff c est super simple
 
ul.niveau2 li {width:100%;}
 
pour ie ca va etre plus tendu  
et je suis pas convaincu que ton fichier behavior marche comme prevu

Reply

Sujets relatifs:

Leave a Replay

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