Menu al 100% de ancho

ladyevil6 · #1 (**permalink**) 12/04/2011, 04:18

Hola a todos, estoy tirándome de los pelos tratando de hacer esto, a ver si alguien me puede ayudar.
Tengo una web con la siguiente estructura
<div id="wrap">Aquí tengo todo el contenido
<div id="top">Aquí incluyo una cabecera y un menu
<div id="header"></div>
<div id="menu"></div>
</div>
<div id="resto">Aquí está el resto del contenido</div>
</div>
<div id="footer">Aquí va el footer</div>

Tanto el footer como el menú los tengo con una imagen como background con repeat-x y width 100%.
El problema es que con el navegador a pantalla completa se ve perfecto, en todos los navegadores, pero si lo encojo, aparece el scroll horizontal (lógico) y el menu y el footer se hacen cada vez más estrechos dejándome un margen en blanco a la derecha que se ve cuando muevo el scroll hacia ese lado.
He puesto el body con un 100% pero por alguna razón parece que no lo admite ya que, mirando el código con el firebug, me marca que el body ocupa sólo el mismo ancho que el que están cogiendo el footer y el menu, hasta el hueco en blanco.
¿A alguien se le ocurre algo? SOCORRO jjjjj
Muchas gracias por adelantado ;)

IsaBelM · #2 (**permalink**) 12/04/2011, 05:19

cuando dices que lo encojes, a qué te refieres?? a que haces zoom negativo??

ladyevil6 · #3 (**permalink**) 12/04/2011, 05:21

Hola, no, me refiero literalmente a encoger la ventana del navegador, tirando de la esquina superior izquierda ¿?

IsaBelM · #4 (**permalink**) 12/04/2011, 05:45

no entiendo cual es el sentido de hacer eso, pero bueno. es el comportamiento lógico. pruebalo en esta web, verás que ocurre lo mismo

ladyevil6 · #5 (**permalink**) 12/04/2011, 06:02

Yo tampoco entiendo el sentido de hacerlo, la verdad, es una queja de mi jefe, qué le voy a hacer.
¿Puedes mandar el enlace que comentabas en tu post anterior, para enseñárselo y que vea que ocurre siempre? Es que se te olvidó ponerlo.

Y muchísimas gracias por tu ayuda.

IsaBelM · #6 (**permalink**) 12/04/2011, 06:09

no te puedo dar ningún enlace. solo has de probarlo en cualquier web. mencioné este foro como podría haber dicho cualquier otra web

chabri · #7 (**permalink**) 12/04/2011, 09:14

Proba poniendo body {
margin:0;
}

tambien puede ser overflow: hidden;

y sino proba como tengo en mi web:

te paso el codigo, es CSS play.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation </title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css play, Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS experiments, CSS demonstrations" />
<meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />

<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
text-align:left;
}
body {
font-family:verdana, arial, sans-serif;
font-size:76%;
}
#background{
position:absolute;
z-index:1;
width:100%;
height:100%;
}
</style>
</head>

<body>
<div>
<img id="background" src="1.png" alt="" title="" />
</div>
</body>

</html>

ya solo deberias de adaptarlo a los div que quieras.
saludos

ladyevil6 · #8 (**permalink**) 13/04/2011, 03:48

Muchísimas gracias por vuestra ayuda. El código tuyo, Chabri, funciona perfecto, pero en cuanto empiezo a meter un div dentro de otro, volvemos a empezar, además el Overflow hidden me impide que aparezca la barra de scroll horizontal por lo que pierdo contenido.
Así que le enseñaré a mi jefe lo que decía IsaBelM, y esta página, para que me deje tranquila ;)
Muchas gracias de nuevo