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