Menu horizontal centrado

Verys · #1 (**permalink**) 02/02/2009, 14:10

hola, recien comienzo con CSS y estaba haciendo una pagina de prueba y no logro que el menu horizontal quede centrado dentro del contenedor

este es el CSS

Código PHP:

  /*quita el borde superior*/ 
body{ 
    margin:0; 
    padding:0; 
} 
#contenedor{ 
    width:900px; 
    height:900px; 
    margin:auto; 
} 
#cabecera{ 
    background-image:url('botones y banner/banner.jpg'); 
    height:150px; 
} 
/*quita los puntitos de la lista*/ 
ul{ 
    list-style:none; 
} 
/*la lista queda horizontal*/ 
#menu li{ 
    margin:0 auto; 
    float:left; 
} 
/*quitar borde azul de los links de las imagenes*/ 
img 
{ 
  border:0; 
}

y el html

Código PHP:

  <html> 
<head> 
 <title>Hot wheels de prueba</title> 
  <link href="estilos.css" rel="stylesheet" type="text/css"/> 
</head> 
 
<body> 
  <div id="contenedor"> 
    <div id="cabecera"></div> 
    <div id="menu"> 
          <ul style="height: 104px; width: 860px;"> 
             <li><a href="#"><img src="botones y banner/boton-inicio.jpg" alt="Inicio" /></a></li> 
             <li><a href="#"><img src="botones y banner/boton-nosotros.jpg" alt="Nosotros" /></a></li> 
             <li><a href="#"><img src="botones y banner/boton-galeria.jpg" alt="Galeria" /></a></li> 
             <li><a href="#"> 
                <img src="botones y banner/boton-contacto.jpg" alt="Contacto" width="216" /></a></li> 
          </ul> 
    </div> 
   
  </div> 
   
</body> 
 
</html>

queda el espacio entre:

la cabecera y el menu
entre el menu y el contenedor

como hago para que todo quede centrado dentro del contenedor

y uno al lado del otro?

Saludos =)

_Ju · #2 (**permalink**) 02/02/2009, 14:22

Intenta quitando los margenes y rellenos al menu y cabecera, intenta con esto:

/*quita el borde superior*/
body{
margin:0;
padding:0;
}
#contenedor{
width:900px;
height:900px;
margin:auto;
}
#cabecera{
background-image:url('botones y banner/banner.jpg');
height:150px;
padding: 0;
margin: 0;
}
/*quita los puntitos de la lista*/
ul{
list-style:none;
}
/*la lista queda horizontal*/
#menu li{
margin:0;
padding: 0;
float:left;
}
/*quitar borde azul de los links de las imagenes*/
img
{
border:0;
}

Verys · #3 (**permalink**) 02/02/2009, 14:35

hola, gracias por responder, hice las modificaciones pero se sigue viendo igual

en firefox e IE

Saludos =)

jomaruro · #4 (**permalink**) 02/02/2009, 16:06

Hola Verys:

Prueba a poner en el <li>

display: inline;
text-align: center;

si aún así no te funciones prueba a ponerlo en el <ul> (borrandolo del <li>).

Saludos.

Verys · #5 (**permalink**) 03/02/2009, 17:12

Cita:

Iniciado por jomaruro

Hola Verys:

Prueba a poner en el <li>

display: inline;
text-align: center;

si aún así no te funciones prueba a ponerlo en el <ul> (borrandolo del <li>).

Saludos.

hola, gracias funciono, con el ul

Código PHP:

  ul{ 
    display:inline; 
    text-align:center; 
}

Saludos =)

jomaruro · #6 (**permalink**) 03/02/2009, 17:22

Me alegro que te haya funcionado.

Saludos.