Problema al centrar un menú horizontal

JSGarcia91 · #1 (**permalink**) 04/03/2012, 12:57

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>



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



<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 */
}

C2am · #2 (**permalink**) 04/03/2012, 15:24

Hola
En el código que muestras no tienes nada puesto para que te centre el menú.
A

Código CSS:

Ver originalul.menuhor{
margin:0 auto;
width: 500px /*lo que quieras en ancho*/}

Es una base, luego sigues desde ahí.

Saludos y bienvenido al foro

JSGarcia91 · #3 (**permalink**) 04/03/2012, 15:54

Cita:

Iniciado por C2am

Hola
En el código que muestras no tienes nada puesto para que te centre el menú.
A

Código CSS:

Ver originalul.menuhor{
margin:0 auto;
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>



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



<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 */
}

C2am · #4 (**permalink**) 04/03/2012, 17:51

Hola
Fijate esta prueba:

http://jsfiddle.net/c2am/Gyg3V/10/

rampaign · #5 (**permalink**) 05/03/2012, 00:15

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.