menu que ocupe todo el ancho de pagina

rufus · #1 (**permalink**) 30/09/2010, 10:36

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;}

rufus · #2 (**permalink**) 30/09/2010, 10:43

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

rodrekinho · #3 (**permalink**) 30/09/2010, 10:47

width: 100%

Contame si te sirvió (:

rufus · #4 (**permalink**) 30/09/2010, 10:51

no me sirve rodrekihno no se si será, que será seguramente por el contenedor principal que tiene 960 de ancho.

rufus · #5 (**permalink**) 30/09/2010, 11:02

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???

rodrekinho · #6 (**permalink**) 30/09/2010, 11:02

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
#contenedor {width: 100&#37;; height:auto; margin:0;}
 
#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.

rufus · #7 (**permalink**) 30/09/2010, 11:04

una pregunta. en el codigo que me as puesto que es esto? ==> #contenedor {width: 100%

rodrekinho · #8 (**permalink**) 30/09/2010, 11:11

Cita:

Iniciado por rufus

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

jomaruro · #9 (**permalink**) 30/09/2010, 13:32

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@charset "utf-8";
/* CSS Document */
#contenedor {width:960px; height:auto; margin: 0 auto;}
 
#menu {width:100%; height:40px; background-color:#1F6CE0;}

Código HTML:

Ver original<body>
<div id="menu">
</div>
<div id="contenedor">
</div>
</body>

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

Saludos.

rodrekinho · #10 (**permalink**) 30/09/2010, 13:38

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 ; }