[css][resolu] centrer un menu.

centrer un menu. [css][resolu] - HTML/CSS - Programmation

Marsh Posté le 05-10-2005 à 22:52:12    

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
Reply

Marsh Posté le 05-10-2005 à 22:52:12   

Reply

Marsh Posté le 05-10-2005 à 23:24:15    

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.

Reply

Marsh Posté le 05-10-2005 à 23:27:44    

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. }

Reply

Marsh Posté le 06-10-2005 à 11:38:07    

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.

Reply

Marsh Posté le 06-10-2005 à 12:37:49    

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

Reply

Marsh Posté le 06-10-2005 à 12:45:48    

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
Reply

Marsh Posté le 06-10-2005 à 23:09:06    

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.

Reply

Marsh Posté le 07-10-2005 à 11:49:48    

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:

Reply

Marsh Posté le 07-10-2005 à 13:03:53    

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. :)

Reply

Sujets relatifs:

Leave a Replay

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