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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [css][resolu] centrer un menu.

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[css][resolu] centrer un menu.

n°1216073
omega2
Posté le 05-10-2005 à 22:52:12  profilanswer
 

Voilà mon probléme, j'ai un menu à base de <ul> et <li>, le <ul> étant mis directement dans le body de la page.
Jusque que là, facile.
 
Dans le <ul>, j'ai plusieurs éléments <li> affiché à gauche les uns des autres. Ca j'y suis arrivé.
 
Mais maintenant j'aimerais que le menu soit centré en largeur et c'est là que je bloque. Visiblement, il faut mettre les marges droite et gauche en auto et donner une taille à l'élément qu'on veut centrer. Moi, je veux bien donner une taille au <ul> mais si je lui donne une taille trop grande, le menu ne semble pas centré et si je lui en met une trop petite, les <li> passent les uns sous les autres. (sic)
 
Y a moyen de réussir à centrer tout ça sans rajouter un div autour du menu qui ne servirait qu'a faire de la présentation? Fanchement, je trouverais domage de repartir dans de l'html de présentation alors que les css sont censé servir à éviter ça.


Message édité par omega2 le 07-10-2005 à 13:12:37
mood
Publicité
Posté le 05-10-2005 à 22:52:12  profilanswer
 

n°1216088
gatsusat
Posté le 05-10-2005 à 23:24:15  profilanswer
 

bah tu connais la musique : ON VEUT DU CODE, donc file déjà ce que tu as, et un lien vers ce que tu as déjà produit serait un plus.
 
m'enfin tu connais la musique.

n°1216089
omega2
Posté le 05-10-2005 à 23:27:44  profilanswer
 

Voilà le code. le css est peut être pas super propre à cause de mes diférents tests :
le fichioer html :

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5. <title></title>
  6. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
  7. <link rel="stylesheet" type="text/css" href="/css/menu2.css" title="menu de base"/>
  8. <link rel="alternate stylesheet" type="text/css" href="/css/menu1.css" title="Présentation alternative" />
  9. </head>
  10. <body>
  11. <ul class="niveau1">
  12.   <li class="niveau1"><div>site web
  13.    <ul>
  14. <li><a href="/bechat">site bechat</a>
  15. </li>
  16. <li><a href="/bechat/install.php5">installateur</a>
  17. </li>
  18.    </ul></div>
  19.   </li>
  20.   <li class="niveau1"><div>autres tests
  21.    <ul>
  22.     <li><a href="/uuser">uuser</a>
  23. </li>
  24. <li><a href="/u/user">u/user</a>
  25. </li>
  26. <li><a href="/~user">~user</a>
  27. </li>
  28.    </ul></div>
  29.   </li>
  30. </ul>
  31. </body>
  32. </html>


 
le css correspondant :

Code :
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. background: white;
  5. font: 80% verdana, arial, sans-serif;
  6. }
  7. ul, li {
  8. display:block;
  9. margin: 0;
  10. padding: 0;
  11. list-style-type: none;
  12. border-radius:10px;
  13. -moz-border-radius:10px;
  14. -khtml-border-radius:10px
  15. }
  16. ul.niveau1 {
  17. position: relative;
  18. align:center;
  19. top:50px;
  20. margin-left: auto;
  21. margin-right: auto;
  22. width:100%;
  23. horizontal-align:middle;
  24. }
  25. li.niveau1 {
  26. float: left;
  27. width: 8em;
  28. max-width:200px;
  29. cursor: pointer;
  30. text-align: center;
  31. font-weight: bold;
  32. background: #ccc;
  33. border: 1px solid blue;
  34. margin: 1px;
  35. }
  36. li.niveau1 ul {
  37. display: none;
  38. _display: inherit;
  39. background: white;
  40. border: 1px solid gray;
  41. }
  42. li.niveau1:hover ul{
  43. display: inherit;
  44. }
  45. body{
  46. align:center;
  47. width:100%
  48. }

n°1216389
omega2
Posté le 06-10-2005 à 11:38:07  profilanswer
 

J'espéres que quelqu'un aura une idée sur comment faire pour centrer mon menu sans rajouter de balise servant qu'a l'affichage et pour que ca marche quelque soit la résolution.

n°1216439
gatsusat
Posté le 06-10-2005 à 12:37:49  profilanswer
 

ul{  
margin:0 auto;
}
(juste après ta declaration de UL, LI

n°1216452
omega2
Posté le 06-10-2005 à 12:45:48  profilanswer
 

Je vois pas de différence avec firefox 1.0.7. J'ai l'ensemble toujours calé à gauche. Je testerait chez moi ce soir avec la 1.5.
 
Mais bizarement sous IE, je me retrouve avec le second niveau de <ul> colé au bord droit du <ul> <li> extérieur. :o Trop fort IE. :lol:


Message édité par omega2 le 06-10-2005 à 12:46:38
n°1217145
omega2
Posté le 06-10-2005 à 23:09:06  profilanswer
 

firefox 1.6 alpha 1 (deer park) et firefox 1.5beta1
résultat idem : le menu reste calé à gauche au lieu d'être centré. :(
 
 
Visiblement, c'était pas ça la bonne solution.

n°1217461
omega2
Posté le 07-10-2005 à 11:49:48  profilanswer
 

Je viens de trouver l'info sur le net ici : http://www.allmyfaqs.com/faq.pl?Center_with_CSS
 
 
En fait, il fallait que je rajoute "display: table;" pour le <ul> extérieur. Avec cette caractéristique là, on a plus besoin de régler la taille de l'élément pour pouvoir le centrer en largeur :) vu que par défaut, il prendra la taille du contenu.
 
 
 
Bon, étape suivante : le mettre dans une autre couche de calque pour que le site descende pas dans la page quand on accéde au sous-menu. je reviendrais surement plustard avec des questions. :lol:

n°1217545
omega2
Posté le 07-10-2005 à 13:03:53  profilanswer
 

Mon menu est finis et tout marche comme voulu :) à un détail prés : IE6 ne l'a pas centré. :( Vivement la version 7 de ce navigateur.
 
Voilà le code auquel je suis arrivé :
Le css à peu prés nettoyé.

Code :
  1. body {
  2. background: white;
  3. font: 80% verdana, arial, sans-serif;
  4. }
  5. ul, li {
  6. margin: 0;
  7. padding: 0;
  8. list-style-type: none;
  9. border-radius:10px;
  10. -moz-border-radius:10px;
  11. -khtml-border-radius:10px
  12. }
  13. ul.niveau1 {
  14. display: table;
  15. position: absolute;
  16. _position: static;
  17. z-index:5;
  18. align:center;
  19. top:2.5em;
  20. margin-left: auto;
  21. margin-right: auto;
  22. }
  23. li.niveau1 {
  24. float: left;
  25. width: 8em;
  26. max-width:200px;
  27. cursor: pointer;
  28. text-align: center;
  29. font-weight: bold;
  30. background: #ccc;
  31. border: 1px solid blue;
  32. margin: 1px;
  33. }
  34. li.niveau1 ul {
  35. display: none;
  36. _display: inherit;
  37. background: white;
  38. border: 1px solid gray;
  39. }
  40. li.niveau1:hover    ul{
  41. display: inherit;
  42. }


la page html (avec du texte qui permet de vérifier qu'il se décale pas à cause du menu :) )

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">   
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5.     <title></title>
  6.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
  7.     <link rel="stylesheet" type="text/css" href="menu.css" title="menu de base"/>
  8.     <link rel="alternate stylesheet" type="text/css" href="/css/menu1.css" title="Présentation alternative" />
  9. </head>
  10. <body>
  11. <ul class="niveau1">
  12.   <li class="niveau1"><div>site web
  13.    <ul>
  14.     <li><a href="/bechat">site bechat</a>
  15.     </li>
  16.     <li><a href="/bechat/install.php5">installateur</a>
  17.     </li>
  18.    </ul></div>
  19.   </li>
  20.   <li class="niveau1"><div>autres tests
  21.    <ul>
  22.     <li><a href="/uuser">uuser</a>
  23.     </li>
  24.     <li><a href="/u/user">u/user</a>
  25.     </li>
  26.     <li><a href="/~user">~user</a>
  27.     </li>
  28.    </ul></div>
  29.   </li>
  30. </ul>
  31. <p align=center>test<br/><br/><br/>test2</p>
  32. </body>
  33. </html>


 
Bon, je sais, les trois <br/> dans la page html, c'est pas génial, mais c'était juste pour vérifier si le menu s'affichait bien par dessus du texte. Et je voulais pas trop poluer le css. ;)
 
A terme, les lignes "-moz-border-radius:10px;" et "-khtml-border-radius:10px" pouront disparaitre quand les navigateurs correspondant passeront au css3. :) De même pour les lignes "_display: inherit;" et "_position: static;" avec IE7 qui gérera (normalement) enfin les chôses comme il faut. :)


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

  [css][resolu] centrer un menu.

 

Sujets relatifs
vfw.h et clipboard [resolu][RESOLU] Probleme d'import pour librairie POI
[resolu] Duplication de STDOUTOutil de travail collaboratif sur Eclipse genre CVS ? [résolu]
Menu : décallage IE et FireFox[J2EE][Tomcat] ServletException[Résolu]
menu deroulant avec div et css[JS] document.write jamais nécéssaire?[Résolu]
VBA : ouverture d'un fichier txt dont le nom change-POST RESOLUMenu Roll over
Plus de sujets relatifs à : [css][resolu] centrer un menu.


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