Hacer que un div no influya sobre el scroll de la web

designermaster · #1 (**permalink**) 06/09/2012, 00:20

Hola!
Tengo una página web de 920px de ancho.
Hay en una parte que he puesto un div de 1500px, y la idea era que ocupase dicha estensión, puesto que lo quiero utilizar de fondo.

Pero hay un problema, cuando vas reduciendo el ancho del navegador, a los 1500px aparece el scroll.

Mi pregunta es: ¿Cómo puedo poner una capa, que sea más grande que el envoltorio de mi web y que no afecte al scroll en horizontal de la web?

Un saludo.

YYs86 · #2 (**permalink**) 06/09/2012, 03:09

Código CSS:

Ver original.capaPP{
 
width: 920px;
overflow: hidden;
 
}

designermaster · #3 (**permalink**) 06/09/2012, 03:53

Amigo, gracias por tu respuesta, pero no es lo que busco.

La idea es tener una capa más grande que la envoltura, pero que esa capa se vea, no que que se corta a los 920px.

Si alguien lo sabe.

Un saludo.

C2am · #4 (**permalink**) 07/09/2012, 16:06

Me parece que lo mejor es que pongas el código que estas usando (Css +html) porque la respuesta de Yys86 es correcta.
El inconveniente lo debes tener, y son solo conjeturas debido a la falta de código, con la caja de 920px que seguro también tiene definido el overflow:hidden.

Ahora, poner un div de 1500 dentro de otro de 920, es como meter un elefante dentro de una caja de zapatos, lo más seguro es que aplaste a la caja de zapatos a que se meta dentro. Yo que vos repensaría mi maquetado.

Saludos

memoadian · #5 (**permalink**) 07/09/2012, 16:32

creo que lo que dices es que tienes una especie de body falso, que usas para poner un background de 1500px, honestamente no se para que lo haces, pero como dice c2am sin código no podemos ver la idea, lo recomendable en estos casos es no usar px, si no % y además usar mediaqueries en la medida de lo posible.

designermaster · #6 (**permalink**) 07/09/2012, 21:54

<body>

<div class="texto_nosotros">
<div class="texto_nosotros_fondo"></div> 
<div class="texto_nosotros_int"></div>
</div>

<style>

.texto_nosotros { width:920px; height:160px; display: block; float:left; clear: both; margin-top:25px; margin-bottom:48px; }

.texto_nosotros_fondo { width:1152px; height:160px; position: absolute; float:left; clear: both; margin-left:-115px; background:url(fondo.png) no-repeat 50% 0%; }

.texto_nosotros_int { width:920px; height:160px; position: absolute; z-index: 100; margin:0 auto;margin-top:3px; clear: both; background:url(texto.png) no-repeat 50% 57%; }

</style>

</body>

memoadian · #7 (**permalink**) 07/09/2012, 22:18

pues sigo sin entender por que no usas directamente el boy para poner el fondo. así te ahorras todo esto.

igual como te dije la solución podría ser usar porcentajes en vez de pixeles o mediaqueries.

C2am · #8 (**permalink**) 07/09/2012, 23:53

No entiendo que pretendes.
Vamos a la lógica, ¿tiene sentido poner un fondo delante de lo que se quiere mostrar?
Digo, un fondo se ubica en el fondo, por eso se llama fondo ¿o no?

Explicate mejor sobre lo que quieres lograr, porque tu código es muy confuso, posicionas los div pero también los flotas.

Saludos

jcorrea · #9 (**permalink**) 08/09/2012, 10:02

cierto mejor dejalo como fondo del body y ya asi no te complicas tanto

designermaster · #10 (**permalink**) 08/09/2012, 20:50

Os he hecho un gráfico de lo que quiero hacer.
No, el body lleva un fondo, y esta caja otro distinto.

chrishxc · #11 (**permalink**) 09/09/2012, 03:59

El estilo de nosotros fondo tendría que tener un style tipo:

Código:

width:1150px;
max-width:100% !important;

De esta forma, el valor será de 1150px, a excepción de cuando el monitor sea de menos resolución, que entonces ocupará el 100% de la pantalla.

Pero si quieres ser más agresivo... entonces mata directamente al perro xDDDD

Código:

body{ overflow:hidden; }