Scroll horizontal

rapuig · #1 (**permalink**) 28/08/2011, 16:48

Buenas, mi consulta es la siguiente: tengo 3 divs y quiero que de ancho siempre ocupen toda la pantalla, no tengo ningún problema cuando la ventana del explorador esta maximizada, pero cuando la restauro al punto que aparece el scroll horizontal y "escroleo" hacia la derecha me encuentro con que esos divs quedan coartados. Espero que me entiendan. Acá va el código por si sirve de ayuda. Muchas gracias!

CSS

Código:

body{
	margin:0;
	padding:0;
	background-color:#E3CEB5;
	}

#top, #menu{
	width:100%;
	background-color:#46321A;
	}
	
#top{
	position:absolute;
	margin-top:-15px;
	z-index:1;
	height:50px;
	}
#header{
	background-image:url(img/background3.jpg);
	width:100%;
	background-repeat:repeat;
	height:435px;
	margin-top: 40px;
	box-shadow: 0px 5px 5px #3C2211;
	position:absolute;
	z-index:1;
	}

#menu{
	height:100px;
	box-shadow: inset 0px -5px 5px #3C2211;
	margin-top:-25px;
	}

HTML

Código HTML:

<body>

<div id="top"></div>

<div id="header"></div>

<div id="menu"><div id="navi">
  <ul>
......
  </ul>
</div></div>
</body>

Gracias!

dooplanillo · #2 (**permalink**) 30/08/2011, 01:58

No se en que navegador y con qué versión lo estás viendo pero no sale scroll

venommist · #3 (**permalink**) 30/08/2011, 07:09

tienes que darle 100% de width a todos los divs, te recomiendo que uses un class y sentencies ESE CLASS en css..

Agrega estas líneas de código:

Cita:

*{
margin:0px;
padding:0px;
}

body{
margin:0;
padding:0;
background-color:#E3CEB5;
}

#top, #menu{
width:100%;
background-color:#46321A;
}

#top{
position:absolute;
margin-top:-15px;
z-index:1;
height:50px;
}
#header{
background-image:url(img/background3.jpg);
width:100%;
background-repeat:repeat;
height:435px;
margin-top: 40px;
box-shadow: 0px 5px 5px #3C2211;
position:absolute;
z-index:1;
}

#menu{
height:100px;
box-shadow: inset 0px -5px 5px #3C2211;
margin-top:-25px;
}

.cienporciento{
width: 100%; !important
overflow:auto; !important
}

Quedando el código HTML así:

Cita:

Te explico un poco:

Cita:

*{ /* La Etiqueta "*" se integra a TODAS las etiquetas de tu HTML, desde <BODY> hasta <HTML> */
margin:0px; /* Margen de "0px" a todas las etiquetas para eliminar el margen hacia los extremos */
padding:0px; /* Padding de "0px" a todas las etiquetas para eliminar el margen interior del Body y de todos los divs, saltos de línea, etc. */
}

.cienporciento{ /* Después de agregar la etiqueta "cientoporciento" a los divs, se agrega este css Sentenciando el Tamaño total */
width: 100%; !important [/B] /* 100% para que quede pegado a todos los bordes, tanto derecho como izquierdo */
overflow:auto; !important [/B] /* Overflow auto para que cuando se hagan los cambios en pixelaje (maximizar, minimizar, etc.) se autoajuste el tamaño de los divs
manteniento el 100% del div, pero ajustanto el HEIGHT (alto) del div */
/* EL !IMPORTANT ES PARA QUE OMITA TODA SENTENCIA PREVIA QUE POSÍA DE ESOS CÓDIGOS, EN ESTE CASO WIDTH Y OVERFLOW */
}

Saludos

rapuig · #4 (**permalink**) 30/08/2011, 12:00

Muchas gracias! Voy a probarlo y te comento, saludos. :)