Foros del Web » Creando para Internet » CSS »

¿Menú horizontal con los botones centrados?

Estas en el tema de ¿Menú horizontal con los botones centrados? en el foro de CSS en Foros del Web. Hola, buenas noches. Me ha surgido un problema, he seguido un tutorial para realizar un menú horizontal, y la verdad me ha resultado muy útil. ...
  #1 (permalink)  
Antiguo 09/09/2012, 14:57
Avatar de JSGarcia91  
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 12 años
Puntos: 0
Exclamación ¿Menú horizontal con los botones centrados?

Hola, buenas noches. Me ha surgido un problema, he seguido un tutorial para realizar un menú horizontal, y la verdad me ha resultado muy útil. Ahora quería modificar algo que no aparecía en el tutorial y era centrar los botones automáticamente de forma horizontal, es decir que siempre aparecieran los botones en el centro de la pantalla y en caso de añadir o quitar algún botón que se quedara siempre centrado, he estado cambiando propiedades a los elementos para que se quedaran centrados los botones pero no he llegado a conseguirlo, hacía que se mostrara como inline-block y luego centraba con el auto, pero nada.

Ahora mismo se me queda así el menú:


El div de atrás ocupa todo el ancho de la página y quiero centrar los botones para que queden siempre centrados, pero no hay manera, os dejo los códigos para ver si me podéis echar una mano.

HTML
Cita:
<div id="menuhor">
<ul id="boton">
<li><a href="#">Botón 1</a></li>
<li><a href="#">Botón 2</a></li>
<li><a href="#">Botón 3</a></li>
<li><a href="#">Botón 4</a></li>
</ul>
</div> <!-- Cierre de "menuhor" -->
CSS
Cita:
#menuhor {
width: auto;
height: 50px;
margin-left: -8px;
margin-right: -8px;
background-image: url(../img/estilo/bg_menu.png);
margin-top: -16px; /* Margen superior negativo para pegar el menu al div con id "fondo_encabezado" */
}

#boton {
padding: 0px;
margin: auto;
/*margin-left: 28%; /* Modificar el margin para centrar los botones cuando se añado o quite alguno */
}

#boton li {
display: inline;

}

#boton li a {
line-height: 30px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;

}

#boton li a:hover {
background-image: url(../img/estilo/bg_menu_hover.png);
}
Un saludo y gracias por la ayuda.
  #2 (permalink)  
Antiguo 09/09/2012, 15:19
Avatar de flashmax  
Fecha de Ingreso: julio-2012
Ubicación: Bs.As. Argentina
Mensajes: 507
Antigüedad: 11 años, 8 meses
Puntos: 86
Respuesta: ¿Menú horizontal con los botones centrados?

Hola haber si así lo solucionas!!
Código HTML:
#menuhor {
width: 100%;
height: 50px;
margin-left: 8px;
margin-right: 8px;
background-image: url(../img/estilo/bg_menu.png);
margin-top: 16px; /* Margen superior negativo para pegar el menu al div con id "fondo_encabezado" */
}

#boton {
padding: 0px;
margin: auto;
text-align:center;
/*margin-left: 28%; /* Modificar el margin para centrar los botones cuando se añado o quite alguno */
}

#boton li {
display: inline;

}

#boton li a {
line-height: 30px;	
font-family: Arial;
font-size: 16px;
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;

} 

#boton li a:hover {
background-image: url(../img/estilo/bg_menu_hover.png);
}
__________________
Saludos!
----------------------------------------------------------
  #3 (permalink)  
Antiguo 11/09/2012, 08:24
Avatar de JSGarcia91  
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 12 años
Puntos: 0
Exclamación Respuesta: ¿Menú horizontal con los botones centrados?

GRACIAS flashmax SI QUE FUNCIONA

Dejo el código por si a alguien le sirviera el código.

HTML
Cita:
<div id="menuhor">
<ul id="boton">
<li><a href="#">Botón 1</a></li>
<li><a href="#">Botón 2</a></li>
<li><a href="#">Botón 3</a></li>
<li><a href="#">Botón 4</a></li>
<li><a href="#">Botón 5</a></li>
</ul>
</div> <!-- Cierre de "menuhor" -->
CSS
Cita:
/* M E N U H O R I Z O N T A L */

#menuhor {
width: auto;
height: 50px;
margin-left: -8px;
margin-right: -8px;
background-image: url(../img/estilo/bg_menu.png);
margin-top: 0px;
}

#boton {
padding: 0px;
margin: auto;
text-align: center;
}

#boton li {
display: inline;
}

#boton li a {
line-height: 30px;
font-family: Arial;
font-size: 16px;
text-decoration: none;
display: inline-block;
padding: 10px;
color: #fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
}

#boton li a:hover {
background-image: url(../img/estilo/bg_menu_hover.png);
}

Etiquetas: botones, horizontal, hover, html, fondo
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 05:55.