Menu css décentré à gauche

Menu css décentré à gauche - HTML/CSS - Programmation

Marsh Posté le 03-03-2019 à 09:24:49    

Bonjour,
 
J'ai un site assez basique sur mon NAS.
 
J'ai créé un menu , mais il est toujours aligné à gauche.
J'aurais souhaité qu'il se centre et s'adapte au changement de largeur d'affichage en changeant de ligne, sur quel paramètre jouer ?
 
Merci.
 

Code :
  1. <style type="text/CSS">
  2. #menu {
  3. height:50px;
  4. width:60%;
  5. margin:auto;
  6. }
  7. #menu ul {
  8. margin:auto;
  9. padding:0;
  10. list-style-type:none;
  11. text-align:center;
  12. }
  13. #menu li {
  14. float:left;
  15. margin:center;
  16. padding:0;
  17. background-color:black;
  18. }
  19. #menu li a {
  20. display:block;
  21. width:100px;
  22. color:white;
  23. text-decoration:none;
  24. padding:5px;
  25. border:2px solid;
  26. }
  27. #menu li a:hover {
  28. color:#FFD700;
  29. }
  30. #menu ul li ul {
  31. display:none;
  32. }
  33. #menu ul li:hover ul {
  34. display:block;
  35. }
  36. #menu li:hover ul li {
  37. float:none;
  38. }
  39. </style>

Message cité 1 fois
Reply

Marsh Posté le 03-03-2019 à 09:24:49   

Reply

Marsh Posté le 17-03-2019 à 16:29:09    

mulanee a écrit :

Bonjour,
 
J'ai un site assez basique sur mon NAS.
 
J'ai créé un menu , mais il est toujours aligné à gauche.
J'aurais souhaité qu'il se centre et s'adapte au changement de largeur d'affichage en changeant de ligne, sur quel paramètre jouer ?
 
Merci.
 

Code :
  1. <style type="text/CSS">
  3. #menu li {
  4. float:left;
  5. margin:center;
  6. padding:0;
  7. background-color:black;
  8. }
  9. #menu li a {
  10. display:block;
  11. width:100px;
  12. color:white;
  13. text-decoration:none;
  14. padding:5px;
  15. border:2px solid;
  16. }
  17. </style>



Bonjour,
Le problème vient probablement de l'instruction float:left qui sort les li du flux normal.
J'utiliserais plutôt ceci s'il s'agit bien d'avoir un menu horizontal :

Code :
  1. #menu li {
  2.     /*float:left;*/
  3.     display:inline-block;
  4.     margin:center;
  5.     padding:0;
  6.     background-color:black;
  7.     color:white;
  8.     }
  9.     #menu li a {
  10.     /*display:block;*/
  11.     width:100px;
  12.     color:white;
  13.     text-decoration:none;
  14.     padding:5px;
  15.     border:2px solid;
  16.     }


cdt

Reply

Marsh Posté le 19-03-2019 à 11:36:28    

Excellent, merci!
 
Juste une chose à améliorer, au survol, un sous-menu apparait, très bien, mais il est trop haut, il empiète sur le menu principal; comment décaler l'apparition de ce sous-menu d'une ou 2 lignes vers le bas?

Reply

Marsh Posté le 20-03-2019 à 05:41:14    

Réglé en définissant la hauteur de ligne.

Reply

Sujets relatifs:

Leave a Replay

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