Tema: Centrar botones de Menu
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 20/07/2011, 00:11
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 7 meses
Puntos: 1567
Respuesta: Centrar botones de Menu
El problema fundamental es que queres centrar todo con margin: 0px auto;
y eso no funciona a menos que le des un ancho en medidas (no relativas) a los elementos.

trabajá con esto como base

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.  
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. div#contenedor {
  9. width: 100%;
  10. height: 50px;
  11. background-color: #333;
  12. padding-top: 1px;
  13. }
  14. .menu { 
  15. height: 42px;
  16. width: 800px;
  17. list-style:none;
  18. margin: 5px auto 0px auto; 
  19. padding: 0px;
  20. background-color: #666;
  21. -moz-border-radius: 5px; 
  22. -webkit-border-radius: 5px; 
  23. -khtml-border-radius: 5px; 
  24. border-radius: 5px; 
  25. } 
  26. .menu li { 
  27. float:left; 
  28. text-align:center; 
  29. width: 80px;
  30. border: solid 1px #000;
  31. height: 30px;
  32. margin: 5px 3px 3px 3px;;
  33. -moz-border-radius: 5px; 
  34. -webkit-border-radius: 5px; 
  35. -khtml-border-radius: 5px; 
  36. border-radius: 5px; 
  37. background: -moz-linear-gradient(top, #212121, #161616); 
  38. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#212121), to(#161616));
  39. background: -o-linear-gradient(top, #212121, #161616);
  40. font-family: verdana, serif;
  41. font-size: 12px;
  42. } 
  43. .menu li.uno {
  44. margin-left: 6px;
  45. }
  46. .menu li a { 
  47. color: #fff; 
  48. outline:0; 
  49. padding: 0px 3px 0px 3px; 
  50. text-decoration:none; 
  51. display:block; 
  52. line-height: 30px;
  53. vertical-align: middle;
  54. } 
  55. .menu li a:hover { 
  56. color:#ccc; 
  57. } 
  58. /*]]>*/
  59. </style>
  60. <title></title>
  61. </head>
  62. <body>
  63. <div id="contenedor">
  64. <ul class="menu">
  65. <li class="nodrop uno"><a href="link1" target="_blank">Boton 1</a></li>
  66. <li class="nodrop"><a href="link2" target="_blank">Boton 2</a></li>
  67. <li class="nodrop"><a href="link3" target="_blank">Boton 3</a></li>
  68. <li class="nodrop"><a href="link4" target="_blank">Boton 4</a></li>
  69. <li class="nodrop"><a href="link5" target="_blank">Boton 5</a></li>
  70. <li class="nodrop"><a href="link6" target="_blank">Boton 6</a></li>
  71. <li class="nodrop"><a href="link7" target="_blank">Boton 7</a></li>
  72. <li class="nodrop"><a href="link8" target="_blank">Boton 8</a></li>
  73. <li class="nodrop"><a href="link9" target="_blank">Boton 9</a></li>
  74. </ul>
  75. </div><br />
  76. <br />
  77. </body>
  78.  
  79. </html>

Ah, y para el gradient en IE tenes algo llamado PIE Css
http://css3pie.com/

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.