Foros del Web » Creando para Internet » CSS »

Scroll horizontal

Estas en el tema de Scroll horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/08/2011, 17:48
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 6 meses
Puntos: 13
Scroll horizontal

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!
  #2 (permalink)  
Antiguo 30/08/2011, 02:58
 
Fecha de Ingreso: enero-2007
Mensajes: 64
Antigüedad: 9 años, 10 meses
Puntos: 1
Respuesta: Scroll horizontal

No se en que navegador y con qué versión lo estás viendo pero no sale scroll
  #3 (permalink)  
Antiguo 30/08/2011, 08:09
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Chile
Mensajes: 28
Antigüedad: 5 años, 6 meses
Puntos: 3
Respuesta: Scroll horizontal

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:

<body>

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

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

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

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

Última edición por venommist; 30/08/2011 a las 08:20
  #4 (permalink)  
Antiguo 30/08/2011, 13:00
 
Fecha de Ingreso: junio-2011
Mensajes: 477
Antigüedad: 5 años, 6 meses
Puntos: 13
Respuesta: Scroll horizontal

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

Etiquetas: ancho, horizontal, html, scroll, fondo
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 16:13.