Ver Mensaje Individual
  #3 (permalink)  
Antiguo 04/03/2012, 15:54
Avatar de JSGarcia91
JSGarcia91
 
Fecha de Ingreso: marzo-2012
Ubicación: Alicante
Mensajes: 24
Antigüedad: 12 años, 1 mes
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 */
}