Foros del Web » Creando para Internet » CSS »

Problema al centrar un menú horizontal

Estas en el tema de Problema al centrar un menú horizontal en el foro de CSS en Foros del Web. Hola, muy buenas a todos. Tengo un problema con un menú horizontal. Resulta que quiero centrarlo para que la resolución del equipo que vea la ...
  #1 (permalink)  
Antiguo 04/03/2012, 11:57
Avatar de JSGarcia91  
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 6 años, 3 meses
Puntos: 0
Pregunta Problema al centrar un menú horizontal

Hola, muy buenas a todos.

Tengo un problema con un menú horizontal. Resulta que quiero centrarlo para que la resolución del equipo que vea la página no afecte y siempre quede en el centro. Lo he conseguido con el banner sin problemas gracias a este código:

Código:
img.banner {
	display: block; /* Para que se comporte como un div */
	margin: 0 auto; /* Para centrar el banner */
	margin-top: -8px; /* Para quitar el espacio superior */

}
Pero al intentar hacerlo con el menú horizontal no consigo nada, no se si es porque al ser horizontal y el display sea inline ya no se puede poner un margin auto...

Si alguien sabe cómo hacerlo por favor que me lo explique, dejo a continuación el código.

Un saludo a todos y gracias de antemano.

HTML
Cita:
<html>

<head>

<title>Jardineria Enebro | JSGarcia</title>
<link href="style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<!-- B A N N E R -->

<img class="banner" src="./Imagenes/Banners/banner.png">


<!-- M E N U H O R I Z O N T A L -->

<ul class="menuhor">
<li><a href="#">Home</a>
<li><a href="#">Plantas</a>
<li><a href="#">Árboles</a>
<li><a href="#">Consejos</a>
<li><a href="#">Productos</a>
<li><a href="#">Servicios</a>
<li><a href="#">¿Dónde estamos?</a>
</ul>


</body>

</html>


CSS
Cita:
/* G E N E R A L */

body {
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
background-color: #FFFEBD;
}


/* B A N N E R */

img.banner {
display: block; /* Para que se comporte como un div */
margin: 0 auto; /* Para centrar el banner */
margin-top: -8px; /* Para quitar el espacio superior */

}


/* M E N U H O R I Z O N T A L */


ul.menuhor li {
display: inline; /* Para que el menú se muestre en horizontal */
padding: 10 px;
background-color: #E5C967;
}

ul.menuhor li a{
text-decoration: none; /* Texto sin formato */
}
  #2 (permalink)  
Antiguo 04/03/2012, 14:24
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 9 años, 5 meses
Puntos: 306
Respuesta: Problema al centrar un menú horizontal

Hola
En el código que muestras no tienes nada puesto para que te centre el menú.
A
Código CSS:
Ver original
  1. ul.menuhor{
  2. margin:0 auto;
  3. width: 500px /*lo que quieras en ancho*/}

Es una base, luego sigues desde ahí.

Saludos y bienvenido al foro
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 04/03/2012, 14:54
Avatar de JSGarcia91  
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 6 años, 3 meses
Puntos: 0
Respuesta: Problema al centrar un menú horizontal

Cita:
Iniciado por C2am Ver Mensaje
Hola
En el código que muestras no tienes nada puesto para que te centre el menú.
A
Código CSS:
Ver original
  1. ul.menuhor{
  2. margin:0 auto;
  3. width: 500px /*lo que quieras en ancho*/}

Es una base, luego sigues desde ahí.

Saludos y bienvenido al foro
Muchas gracias, pero ahora me sale otro problema y es que no consigo hacer que se me quede como debe. Adjunto una imagen para que veas como quiero que se me queda pero poniendo el WIDTH a 980px (lo que ocupa el banner) y el MARGIN AUTO para que se centre, me pasa lo siguiente:



Quiero que el menú sea todo lo que está punteado en negro, ahora con el código que pongo a continuación se me queda como en la imagen.


HTML

Cita:
<html>

<head>

<title>Jardineria Enebro | JSGarcia</title>
<link href="style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<!-- B A N N E R -->

<img class="banner" src="./Imagenes/Banners/banner.png">


<!-- M E N U H O R I Z O N T A L -->

<ul class="menuhor">
<li><a href="#">Home</a>
<li><a href="#">Plantas</a>
<li><a href="#">Árboles</a>
<li><a href="#">Consejos</a>
<li><a href="#">Productos</a>
<li><a href="#">Servicios</a>
<li><a href="#">¿Dónde estamos?</a>
</ul>


</body>

</html>
CSS

Cita:
/* G E N E R A L */

body {
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
background-color: #FFFEBD;
}


/* B A N N E R */

img.banner {
display: block; /* Para que se comporte como un div */
margin: 0 auto; /* Para centrar el banner */
margin-top: -8px; /* Para quitar el espacio superior */

}


/* M E N U H O R I Z O N T A L */

ul.menuhor{
margin:0 auto;
margin-top: 20px;
width: 980px /*Ancho del menú*/
}

ul.menuhor li {
display: inline; /* Para que el menú se muestre en horizontal */
padding: 10 px;
background-color: #E5C967;
}

ul.menuhor li a{
text-decoration: none; /* Texto sin formato */
}
  #4 (permalink)  
Antiguo 04/03/2012, 16:51
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 9 años, 5 meses
Puntos: 306
Respuesta: Problema al centrar un menú horizontal

Hola
Fijate esta prueba:

http://jsfiddle.net/c2am/Gyg3V/10/
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 04/03/2012, 23:15
Avatar de rampaign  
Fecha de Ingreso: febrero-2010
Ubicación: Lima, Peru, Peru
Mensajes: 12
Antigüedad: 8 años, 4 meses
Puntos: 3
Respuesta: Problema al centrar un menú horizontal

El UL del menu esta centrado, lo que sucede es que le has asignado el tamaño de 980px y todo el UL se ha centrado utilizando ese tamaño, independientemente de si dentro hay suficientes LI para llenarlo. Ademas, como el UL del menu no tiene un contenedor, se ha centrado respecto a toda la horizontal de la pantalla.

Lo que puedes hacer para que quede centrado es darle al UL el tamaño que tendra desde "Home", a "Donde estamos", por ejemplo, por dar un valor, 500px. Con esto, el UL con longitud 500px se centrara en la pantalla. Ahora, si lo que quieres es que todo el menu tenga la longitud del banner, pero los textos del menu esten centrados, puedes hacerlo metiendo el UL dentro de un DIV contenedor, a ese div dale un tamaño fijo de, en tu caso, 980px, y tambien centralo usando margin: 0 auto. Con esto, el div se centrara, con un tamaño de 980px respecto a la horizontal de la pantalla y el UL con longitud 500px se centrara dentro de su div contenedor, obteniendo el resultado que quieres.

Saludos

PD. como buena practica, deberias crear un div que sirva de contenedor para toda tu pagina, en tu caso de ancho 980px, asi estableces los limites horizontales de los elementos que se encuentren dentro.

Etiquetas: horizontal, 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 12:47.