Foros del Web » Creando para Internet » CSS »

menu que ocupe todo el ancho de pagina

Estas en el tema de menu que ocupe todo el ancho de pagina en el foro de CSS en Foros del Web. hola quiero hacer un menu que ocupe todo el ancho de pagina pero que el contenido de abajo del menu(todo el contenido) este centrado en ...
  #1 (permalink)  
Antiguo 30/09/2010, 11:36
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
menu que ocupe todo el ancho de pagina

hola quiero hacer un menu que ocupe todo el ancho de pagina pero que el contenido de abajo del menu(todo el contenido) este centrado en unos 960px de ancho. me estoy comiendo la cabeza pero no se como hacerlo. os dejo el codigo de como lo tengo ahora (un ejemplo de lo que quiero hacer esta en el tuenti).

index.php:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cara jaula 2.0</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="contenedor">
<div id="menu">
</div>
</div>
</body>
</html>
index.css:
Código:
@charset "utf-8";
/* CSS Document */
#contenedor {width:960px; height:auto; margin: 0 auto;}

#menu {width:960px; height:40px; background-color:#1F6CE0;}
  #2 (permalink)  
Antiguo 30/09/2010, 11:43
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

He probado a darle al #menu el width:auto; pero no hace nada. no se como hacerlo, porque el contenedor principal le tengo que dar 960px de ancho para que me encaje en las resoluciones de pantalla de 17" pero cada futuro visitante de la pagina tendra una resolucion de pantalla diferente asi como hacer que el menu me ocupe todo el ancho..... mmmm
  #3 (permalink)  
Antiguo 30/09/2010, 11:47
 
Fecha de Ingreso: marzo-2010
Mensajes: 17
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

width: 100%

Contame si te sirvió (:
  #4 (permalink)  
Antiguo 30/09/2010, 11:51
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

no me sirve rodrekihno no se si será, que será seguramente por el contenedor principal que tiene 960 de ancho.
  #5 (permalink)  
Antiguo 30/09/2010, 12:02
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

ahora si tengo el menu ocupandome todo el ancho de pagina para eso e modificado asi el codigo:

index.php:

Código:
<body>

<div id="menu">
</div>
<div id="contenedor">


</div>
</body>
</html>
index.css:

Código:
@charset "utf-8";
/* CSS Document */
#contenedor {width:960px; height:auto; margin: 0 auto;}

#menu {width:100%; height:40px; background-color:#1F6CE0;}
pero ahora tengo un problema el menu me ocupa todo el ancho como central el contenido de los enlaces del menu en un ancho de 960px para tener el contenido centrado y dentro de esos margenes???
  #6 (permalink)  
Antiguo 30/09/2010, 12:02
 
Fecha de Ingreso: marzo-2010
Mensajes: 17
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. #contenedor {width: 100&#37;; height:auto; margin:0;}
  4.  
  5. #menu {width: 100%; height:40px; background-color:#1F6CE0;}

Ese te tiene que servir. Lo probé yo mismo en un monitor 19 pulgadas y se ve perfecto.

  #7 (permalink)  
Antiguo 30/09/2010, 12:04
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

una pregunta. en el codigo que me as puesto que es esto? ==> #contenedor {width: 100%
  #8 (permalink)  
Antiguo 30/09/2010, 12:11
 
Fecha de Ingreso: marzo-2010
Mensajes: 17
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

Cita:
Iniciado por rufus Ver Mensaje
una pregunta. en el codigo que me as puesto que es esto? ==> #contenedor {width: 100%
Sí, ha de ser un error del highlight.
Si es posible pone una captura y el codigo de contenido a ver si lo podemos solucionar
  #9 (permalink)  
Antiguo 30/09/2010, 14:32
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 que ocupe todo el ancho de pagina

Hola:

Si he entendido bien, quieres el menú al 100% de la página y el contenedor a 960px ¿me equivoco?

Con el código CSS que has puesto y el HTML debería funcionarte:

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. #contenedor {width:960px; height:auto; margin: 0 auto;}
  4.  
  5. #menu {width:100%; height:40px; background-color:#1F6CE0;}

Código HTML:
Ver original
  1. <div id="menu">
  2. </div>
  3. <div id="contenedor">
  4. </div>
  5. </body>

Para centrar el menú puedes ver este ejemplo : http://source.octabot.net/web-tips/menu-100x.html

Saludos.


Última edición por jomaruro; 30/09/2010 a las 14:38
  #10 (permalink)  
Antiguo 30/09/2010, 14:38
 
Fecha de Ingreso: marzo-2010
Mensajes: 17
Antigüedad: 7 años, 9 meses
Puntos: 1
Respuesta: menu que ocupe todo el ancho de pagina

También agregarle el Display:inline al css así te queda en linea horizontal el menu dentro del css del #contenedor.

Sería

#contenedor ul li { display:inline ; }

Etiquetas: ancho, todo
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 09:14.