Foros del Web » Creando para Internet » HTML »

Centrar botones de Menu

Estas en el tema de Centrar botones de Menu en el foro de HTML en Foros del Web. Hola, Tengo un menu con 9 botones y necesito centrarlos para que se vean siempre centrados sin importar la resolución del monitor. Para el caso ...
  #1 (permalink)  
Antiguo 19/07/2011, 18:37
Avatar de darkra  
Fecha de Ingreso: abril-2010
Mensajes: 11
Antigüedad: 7 años, 8 meses
Puntos: 0
Centrar botones de Menu

Hola,

Tengo un menu con 9 botones y necesito centrarlos para que se vean siempre centrados sin importar la resolución del monitor.



Para el caso de mi resolucion se deberia ver asi:




Código html:

Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html>
<
head>
<
link href="menu.css" rel="stylesheet" type="text/css" />
</
head>
<
body>
<
div id="wrapper_menu">
    <
ul class="menu menu_black">       
        <
li class="nodrop"><a href="link1" target="_blank">Boton 1</a></li>
        <
li class="nodrop"><a href="link2" target="_blank">Boton 2</a></li>
        <
li class="nodrop"><a href="link3" target="_blank">Boton 3</a></li>
        <
li class="nodrop"><a href="link4" target="_blank">Boton 4</a></li>
        <
li class="nodrop"><a href="link5" target="_blank">Boton 5</a></li>
        <
li class="nodrop"><a href="link6" target="_blank">Boton 6</a></li>
        <
li class="nodrop"><a href="link7" target="_blank">Boton 7</a></li>
        <
li class="nodrop"><a href="link8" target="_blank">Boton 8</a></li>
        <
li class="nodrop"><a href="link9" target="_blank">Boton 9</a></li>
    </
ul>
</
div>
<
br><br>
</
body>
</
html
Código CSS:

Código PHP:
#wrapper_menu {

    
margin:0 auto;
    
display:block;
    
positionrelative;

}
.
menu {
    list-
style:none;
    
margin:0px auto 0px auto;
    
height:43px;

}
.
menu li {
    
float:left;
    
text-align:center;
    
position:relative;
    
margin-right:20px;
    
margin-top:6px;
    
border:none;
    
    
background: -moz-linear-gradient(top#212121, #161616);
    
background: -webkit-gradient(linear00%, 0100%, from(#212121), to(#161616));
    
background: -o-linear-gradient(top#212121, #161616);
    
-moz-border-radius5px;
    -
webkit-border-radius5px;
    -
khtml-border-radius5px;
    
border-radius5px;
}
.
menu li.fullwidth {
    
position: static !important;
}
.
menu li:hover {
    
background:#161616;
    
border:1px solid #000000;
    
border-bottom:none;
    
margin-right:19px;
    
background: -moz-linear-gradient(top#212121, #161616);
    
background: -webkit-gradient(linear00%, 0100%, from(#212121), to(#161616));
    
background: -o-linear-gradient(top#212121, #161616);
    
-moz-border-radius5px 5px 0px 0px;
    -
webkit-border-radius5px 5px 0px 0px;
    -
khtml-border-radius5px 5px 0px 0px;
    
border-radius5px 5px 0px 0px;
}
.
menu li.nodrop:hover {
    
background:#292929;

    
padding4px 10px 4px 9px;
    
border-bottom:1px solid #161616;
    
background: -webkit-gradient(linear00%, 0100%, from(#212121), to(#292929));
    
background: -o-linear-gradient(top#212121, #292929);
    
-moz-border-radius5px;
    -
webkit-border-radius5px;
    -
khtml-border-radius5px;
    
border-radius5px;
}
.
menu li.nodrop:hover a {
    
padding0px;
}
.
menu li a {
    
color#EEEEEE;
    
outline:0;
    
padding5px 10px 3px 10px;
    
text-decoration:none;
    
display:block;

}
.
menu li:hover a {
    
color:#ffffff;

    
position:relative;
    
z-index:11;

    
padding4px 9px 4px 9px;
}
.
menu li:hover div a {
    
display:inline;
}
.
menu li .drop {
    
padding-right:27px;
    
background:url("img/drop_dark.png"no-repeat right 13px;
}
.
menu li:hover .drop {
    
padding-right:27px;
    
background:url("img/drop_dark.png"no-repeat right 12px;
}

.
menu p,
.
menu ul,
.
menu li,
.
menu h2,
.
menu h3 {
    
color:#ffffff;
    
font-size:12px
    
font-family:ArialHelveticasans-serif;
    
line-height:21px;
    
text-align:left;
}
.
menu p {
    
font-size:12px;
    
line-height:18px;
    
margin:0;
    
margin-bottom:10px;

}
.
menu .strong {
    
font-weight:bold;
}
.
menu .italic {
    
font-style:italic;
}
.
menu h2
.
menu h3 {

    
border-bottom:1px solid #333333;
    
margin-top:7px;
}
.
menu h2 {
    
font-weight:400;
    
font-size:21px;
    
margin-bottom:18px;
    
padding-bottom:11px;
}
.
menu h3 {
    
font-weight:600;
    
font-size:14px;
    
margin-bottom:14px;
    
padding-bottom:7px;
}
.
menu li:hover div a {
    
text-decoration:none;

    
border:none;
    
padding:0;
}

.
menu_black {
    
background#36373A;
    
border1px solid #444;

}
.
menu_black li:hover div a {
    
color:#CCC;
}
.
menu_black li:hover div a:hover {
    
color:#EEE;
}
.
menu_black li ul li a:hover {
    
color:#EEE;

Desde ya gracias por la ayuda.
  #2 (permalink)  
Antiguo 20/07/2011, 01:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 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.

Etiquetas: botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:27.