Foros del Web » Creando para Internet » CSS »

Menu al 100% de ancho

Estas en el tema de Menu al 100% de ancho en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/04/2011, 05:18
 
Fecha de Ingreso: diciembre-2005
Mensajes: 11
Antigüedad: 12 años
Puntos: 0
Pregunta Menu al 100% de ancho

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 ;)
  #2 (permalink)  
Antiguo 12/04/2011, 06:19
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Menu al 100% de ancho

cuando dices que lo encojes, a qué te refieres?? a que haces zoom negativo??
  #3 (permalink)  
Antiguo 12/04/2011, 06:21
 
Fecha de Ingreso: diciembre-2005
Mensajes: 11
Antigüedad: 12 años
Puntos: 0
Respuesta: Menu al 100% de ancho

Hola, no, me refiero literalmente a encoger la ventana del navegador, tirando de la esquina superior izquierda ¿?
  #4 (permalink)  
Antiguo 12/04/2011, 06:45
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Menu al 100% de ancho

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
  #5 (permalink)  
Antiguo 12/04/2011, 07:02
 
Fecha de Ingreso: diciembre-2005
Mensajes: 11
Antigüedad: 12 años
Puntos: 0
Respuesta: Menu al 100% de ancho

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.
  #6 (permalink)  
Antiguo 12/04/2011, 07:09
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Menu al 100% de ancho

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
  #7 (permalink)  
Antiguo 12/04/2011, 10:14
Avatar de chabri  
Fecha de Ingreso: septiembre-2009
Ubicación: Torremolinos
Mensajes: 227
Antigüedad: 8 años, 2 meses
Puntos: 17
Respuesta: Menu al 100% de ancho

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
  #8 (permalink)  
Antiguo 13/04/2011, 04:48
 
Fecha de Ingreso: diciembre-2005
Mensajes: 11
Antigüedad: 12 años
Puntos: 0
Respuesta: Menu al 100% de ancho

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

Etiquetas: 100, ancho
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 10:43.