Foros del Web » Creando para Internet » CSS »

Menu horizontal centrado

Estas en el tema de Menu horizontal centrado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/02/2009, 14:10
Avatar de Verys  
Fecha de Ingreso: octubre-2008
Ubicación: Argentina
Mensajes: 48
Antigüedad: 9 años, 2 meses
Puntos: 1
Menu horizontal centrado

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 =)
  #2 (permalink)  
Antiguo 02/02/2009, 14:22
Avatar de _Ju
_Ju
 
Fecha de Ingreso: noviembre-2008
Ubicación: Colima, MX
Mensajes: 192
Antigüedad: 9 años, 1 mes
Puntos: 6
Respuesta: Menu horizontal centrado

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;
}
  #3 (permalink)  
Antiguo 02/02/2009, 14:35
Avatar de Verys  
Fecha de Ingreso: octubre-2008
Ubicación: Argentina
Mensajes: 48
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Menu horizontal centrado

hola, gracias por responder, hice las modificaciones pero se sigue viendo igual en firefox e IE

Saludos =)
  #4 (permalink)  
Antiguo 02/02/2009, 16:06
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menu horizontal centrado

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.

  #5 (permalink)  
Antiguo 03/02/2009, 17:12
Avatar de Verys  
Fecha de Ingreso: octubre-2008
Ubicación: Argentina
Mensajes: 48
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: Menu horizontal centrado

Cita:
Iniciado por jomaruro Ver Mensaje
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 =)
  #6 (permalink)  
Antiguo 03/02/2009, 17:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menu horizontal centrado

Me alegro que te haya funcionado.

Saludos.

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 13:22.