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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  probleme menu deroulant css

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

probleme menu deroulant css

n°1396656
zit_zit
Posté le 28-06-2006 à 16:05:24  profilanswer
 

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;}
  7. div#menuDeroulant{
  8. float: left;
  9. margin: -1px 0 0 ;
  10. size:-1px;
  11. font-size:small;}
  12. div#menuDeroulant li{
  13. position: relative;
  14. list-style: none;
  15. margin: 0;
  16. float: left;
  17. border-bottom: 1px solid #CCC;
  18. border-top:1px solid #CCC;
  19. }
  20. div#menuDeroulant ul ul{
  21. position:absolute;
  22. display:none;
  23. }
  24. div#menuDeroulant ul{
  25. margin:0;
  26. padding:0;
  27. background:#666666;
  28. border-bottom:1px #CCCCCC solid;
  29. border-left:1px #CCCCCC solid;
  30. border-right:1px #CCCCCC solid;
  31. }
  32. div#menuDeroulant li.sousmenu{
  33. background:#666666;}
  34. div#menuDeroulant li a{
  35. display:block;
  36. text-decoration:none;
  37. padding:0.5em 0.5em 0.5em 0.5em;haut droite bas gauche
  38. color:#FF9900;
  39. text-align:center;
  40. }
  41. div#menuDeroulant li:hover{
  42. background:#FFFF99;met une couleur au passage de la souris
  43. }
  44. definition des niveau d imbrication
  45. div#menuDeroulant ul.niveau1 li.sousmenu:hover ul.niveau2
  46. {display:block;}
  47. </style>

mood
Publicité
Posté le 28-06-2006 à 16:05:24  profilanswer
 

n°1396709
xtof_83
Freeride Spirit
Posté le 28-06-2006 à 16:56:59  profilanswer
 

Et le code HTML please

n°1396714
zit_zit
Posté le 28-06-2006 à 17:02:13  profilanswer
 

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>

n°1396747
xtof_83
Freeride Spirit
Posté le 28-06-2006 à 17:36:10  profilanswer
 

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


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

n°1396751
mIRROR
Chevreuillobolchévik
Posté le 28-06-2006 à 17:43:19  profilanswer
 

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


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

  probleme menu deroulant css

 

Sujets relatifs
probléme avec un menu déroulantProblème menu déroulant [self-résolu]
Probleme de menu déroulantpetit probleme script de menu deroulant
Probleme menu deroulant html/css/javascriptProblème avec un menu déroulant
Probleme menu déroulant[Delphi6]menu deroulant probleme de taille
Probleme de menu déroulant (JavaScript ou PHP)URGENT : Problème avec un menu déroulant !
Plus de sujets relatifs à : probleme menu deroulant css


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