Votre question

[resolu]Centrer un menu

Tags :
  • Html
  • Programmation
Dernière réponse : dans Programmation
10 Novembre 2011 14:48:45

Bonjour a tous ,

j'ai un menu que je voudrais centrer au milieu de la page mais je n'y arrive pas ^^

le code :

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Test</title>
  5. <style type="text/css">
  6. <!--
  7. body {
  8. margin:0;
  9. padding:0;
  10. font: bold 11px/1.5em Verdana;
  11. }
  12.  
  13. h2 {
  14. font: bold 14px Verdana, Arial, Helvetica, sans-serif;
  15. color: #000;
  16. margin: 0px;
  17. padding: 0px 0px 0px 15px;
  18. }
  19.  
  20. img {
  21. border: none;
  22. }
  23.  
  24. /*- Menu Tabs 10--------------------------- */
  25.  
  26. #tabs10 {
  27. float:left;
  28. width:100%;
  29. font-size:93%;
  30. border-bottom:1px solid #2763A5;
  31. line-height:normal;
  32. }
  33. #tabs10 ul {
  34. margin:0;
  35. padding:10px 10px 0 50px;
  36. list-style:none;
  37. }
  38. #tabs10 li {
  39. display:inline;
  40. margin:0;
  41. padding:0;
  42. }
  43. #tabs10 a {
  44. float:left;
  45. background:url("tableft10.gif") no-repeat left top;
  46. margin:0;
  47. padding:0 0 0 4px;
  48. text-decoration:none;
  49. }
  50. #tabs10 a span {
  51. float:left;
  52. display:block;
  53. background:url("tabright10.gif") no-repeat right top;
  54. padding:5px 15px 4px 6px;
  55. color:#FFF;
  56. }
  57. /* Commented Backslash Hack hides rule from IE5-Mac \*/
  58. #tabs10 a span {float:none;}
  59. /* End IE5-Mac hack */
  60. #tabs9 a:hover span {
  61. color:#FFF;
  62. }
  63. #tabs10 a:hover {
  64. background-position:0% -42px;
  65. }
  66. #tabs10 a:hover span {
  67. background-position:100% -42px;
  68. }
  69.  
  70. #tabs10 #current a {
  71. background-position:0% -42px;
  72. }
  73. #tabs10 #current a span {
  74. background-position:100% -42px;
  75. }
  76. -->
  77. </style>
  78. </head>
  79.  
  80. <body>
  81. <h2>Tab Menu 10</h2>
  82. <div id="tabs10">
  83. <ul>
  84. <!-- CSS Tabs -->
  85. <li><a href=".."><span>test1</span></a></li>
  86. <li><a href=".."><span>test2</span></a></li>
  87. <li><a href=".."><span>test3</span></a></li>
  88. <li><a href=".."><span>test4</span></a></li>
  89. <li><a href=".."><span>test5</span></a></li>
  90.  
  91. </ul>
  92. </div>
  93. </body>
  94. </html>



merci d'avance

Autres pages sur : centrer menu

a c 232 L Programmation
10 Novembre 2011 15:40:37

Salut,

Pour centrer un élément, il faut lui mettre des marges gauche et droite à auto, et mettre une largeur à l'élément.
Remplace ton bloc CSS sur #tabs10 par :
  1. #tabs10 {
  2. overflow:auto;
  3. width:50%;
  4. margin: 0 auto;
  5. font-size:93%;
  6. border-bottom:1px solid #2763A5;
  7. line-height:normal;
  8. }


Et tu auras ton menu centré qui prendra 50% de la page. Tu peux modifier le width à ta convenance.
10 Novembre 2011 15:44:43

résolu , Merci !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS