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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu css décentré à gauche

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu css décentré à gauche

n°2329926
mulanee
Posté le 03-03-2019 à 09:24:49  profilanswer
 

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>

mood
Publicité
Posté le 03-03-2019 à 09:24:49  profilanswer
 

n°2330513
itela
Posté le 17-03-2019 à 16:29:09  profilanswer
 

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

n°2330531
mulanee
Posté le 19-03-2019 à 11:36:28  profilanswer
 

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?

n°2330581
mulanee
Posté le 20-03-2019 à 05:41:14  profilanswer
 

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


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

  Menu css décentré à gauche

 

Sujets relatifs
revenier au 1 er onglet des sous menu et sousmenuPlusieurs pages html appellent le même menu. Possible svp ?
[RESOLU] menu déroulant qui fonctionne en tactileMenu qui ne veut pas se fixer.
CSS Menu navigation responsive et fixeMenu CSS invisible sur mobile
Creer une barre de menuProblème Menu Jquery SuperFish
Placer sous-menu en dessous des liens :'(je n'arrive pas a créer un menu déroulant avec mes div
Plus de sujets relatifs à : Menu css décentré à gauche


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