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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [RESOLU] <li> d'un sous menu qui s'affiche horizontalement

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] <li> d'un sous menu qui s'affiche horizontalement

n°1926848
Yop69
Posté le 25-09-2009 à 22:30:26  profilanswer
 

Bonsoir,
 
Voila j'ai un soucis concernant un menu avec un sous menu. Le sous menu affiche les menu en ligne et non verticalement :
 
http://photoyop.free.fr/a/f.png
 
Avec ce code tout bête :
 

Code :
  1. <ul id="menu">
  2.     <li><a href="">Accueil</a></li>
  3.     <li><a href="">Plaquette</a></li>
  4.     <li><a href="">Planning</a></li>
  5.     <li>
  6.         <a href="">Les journaux</a>
  7.         <ul>
  8.             <li><a href="">Journal 1</a></li>
  9.             <li><a href="">Journal 2</a></li>
  10.         </ul>
  11.     </li>
  12.     <li><a href="">Localisation</a></li>
  13.     <li><a href="">Nous contacter</a></li>
  14. </ul>


 
Avec cette css :

Code :
  1. ul#menu{
  2.     height: 35px ;
  3.     margin: 0 ;
  4.     padding: 0 ;
  5.     background: url(images/bg_menu.gif) repeat-x 0 -25px ;
  6.     list-style-type: none ;
  7.     display:block;
  8. }
  9. ul#menu li{
  10.     float: left ;
  11.     text-align: center ;
  12. }
  13. ul#menu li a{
  14.     width: 145px ;
  15.     line-height: 25px ;
  16.     font-size: 1.2em ;
  17.     font-weight: bold ;
  18.     letter-spacing: 2px ;
  19.     color: #fff ;
  20.     display: block ;
  21.     text-decoration: none ;
  22.     border-right: 2px solid #dea ;
  23. }
  24. ul#menu li a:hover{
  25.     background: url(images/bg_menu.gif) repeat-x 0 0 ;
  26. }
  27. ul#menu li ul{
  28.     background: url(images/bg_menu.gif) repeat-x 0 -25px ;
  29.     position:absolute;
  30.     visibility:hidden;
  31.     padding:0;
  32.     list-style: none;
  33.     display:block;
  34. }
  35. ul#menu li:hover ul{
  36.     position:absolute;
  37.     visibility:visible;
  38. }
  39. ul#menu li ul li{    
  40. }
  41. ul#menu li ul li a{    
  42. }
  43. ul#menu li ul li a:hover{
  44. }


 
Pouvez vous m'aider ?  :sweat:


Message édité par Yop69 le 25-09-2009 à 23:07:32
mood
Publicité
Posté le 25-09-2009 à 22:30:26  profilanswer
 

n°1926856
Yop69
Posté le 25-09-2009 à 22:55:41  profilanswer
 

Ok j'ai trouvé voici la correction toute bête mais perverse :
 
Juste cette classe :
ul#menu li ul li{
 display:block;
clear:both;
 background: url(images/bg_menu.gif) repeat-x 0 -25px;

}
 
La propriété clear:both permet d'outrepasser la propriété float: left ; défini plus haut dans la classe ul#menu li.
float: left décale tout le flux css suivant ses conditions c'est à dire, d'être en ligne et de faire afficher le flux sur la gauche.

Message cité 1 fois
Message édité par Yop69 le 25-09-2009 à 23:07:05
n°1926939
gatsu35
Blablaté par Harko
Posté le 26-09-2009 à 15:15:57  profilanswer
 

Yop69 a écrit :

Ok j'ai trouvé voici la correction toute bête mais perverse :

 

Juste cette classe :
ul#menu li ul li{
 display:block;
clear:both;
 background: url(images/bg_menu.gif) repeat-x 0 -25px;

}

 

La propriété clear:both permet d'outrepasser la propriété float: left ; défini plus haut dans la classe ul#menu li.
float: left décale tout le flux css suivant ses conditions c'est à dire, d'être en ligne et de faire afficher le flux sur la gauche.


Falait juste redefinir le float à none et là pas besoin de ton clear :o


Message édité par gatsu35 le 26-09-2009 à 15:16:15

---------------
Blablaté par Harko
n°1926944
Yop69
Posté le 26-09-2009 à 15:36:56  profilanswer
 

C'est pas faux  :o  
Merci pour ta précision  ;)


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

  [RESOLU] <li> d'un sous menu qui s'affiche horizontalement

 

Sujets relatifs
xml problème affichage dans FirefoxProbleme pour placer des éléments swing
[RESOLU]Optimisation d'une requête SQL[AS] zoom avec un onMouseWheel sur plusieurs clip [RESOLU]
La JProgressBar ne m'affiche pas de bar de progression[RESOLU]Debutant en C++, petite question a propos d'un programme
[Résolu] Hack CSS possible sur positionnement hauteur d'un div ?[Resolu] Redimensionner image avec haut et larg max
[Resolu]Problème formulaire[RESOLU] Sous Eclipse l'exécution marche bien mais pas avec la comm
Plus de sujets relatifs à : [RESOLU] <li> d'un sous menu qui s'affiche horizontalement


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