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.