repeat-x y scroll horizontal

chicle · #1 (**permalink**) 03/02/2010, 17:11

Hola tengo un problema con una imagen de fondo un contenedor con un ancho fijo (que tiene que ser fijo) y un scroll horizontal. Tal vez alguno pueda ayudarme.

Simplificándolo pongamos el siguiente HTML

Código:

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

<div id="fijo"></div>


</body>

Y estas CSS

Código:

#header {
background-image:url("fondo_head.jpg");
background-repeat:repeat-x;
height:145px;
}


#fijo {
margin:0 auto;
overflow:hidden;
width:1300px;
*/no me queda otra con este ancho/*
height:40px;
}

Lo que sucede es que a una resolución amplia por ejemplo 1440*900 se ve bien.

Vale, a 1024*768 tendré un scroll horizontal. El problema está en el header.
Al desplazar la barra de scroll la imagen que aparece en la parte superior repetida
se corta. Es decir aparece en blanco a partir de la zona desde la que desplazamos el scroll.

El scroll horizontal ya sé que no es nada recomendable pero no me queda otra
para resoluciones "pequeñas".

¿Alguna idea?

¡Gracias!

Impostor · #2 (**permalink**) 04/02/2010, 03:39

Agregale un ancho a #header, prueba con un width:1300px, y ve probando hasta que se quede como deseas.

Saludos¡¡

chicle · #3 (**permalink**) 04/02/2010, 04:33

Hola Impostor:

Muchas gracias por responder pero el problema son las resoluciones.

No puedo hacer fijo el superior ni añadirle un width:100% porque sigo en la misma ruina.

La idea es que haga scroll en las más pequeñas pero que no falle en las grandes.

Si yo asumo que va a tener un ancho fijo la parte superior: ponle 1280, pues hará scroll en todas las resoluciones por debajo de ese ancho y por encima quedará vacío (1400,1680) con lo que sigo teniendo el mismo problema.

¿Alguna idea?

Tecna · #4 (**permalink**) 04/02/2010, 15:37

Buenas,

puedes probar poniendo min-width: 1300px; a #header

Impostor · #5 (**permalink**) 04/02/2010, 15:39

Cita:

Iniciado por Tecna

Buenas,

puedes probar poniendo min-width: 1300px; a #header

¿Si width:1300px no le funcionó, porque piensas que min-width:1300px si le va a valer?

Tecna · #6 (**permalink**) 04/02/2010, 16:01

Buenas,

si pone un ancho fijo, para tamaño iguales o menores se verá bien pero no para tamaños mayores que el ancho

si pone un 100% ocurría lo que comentaba que al hacer scroll se quedaba vacio y eso no ocurriría si obligas a que tenga un ancho mínimo.

y para tamaños mas grandes al ser un elemento en bloque y no tener un ancho definido ocuparía todo el espacio disponible.

chicle · #7 (**permalink**) 05/02/2010, 08:52

Hola Tecna:

Muchas gracias era eso. Me has salvado la vida.

El IE6 para variar da problemas pero el código así funciona perfecto
CSS

Código:

#header {
background-image:url("fondo_head.jpg");
background-repeat:repeat-x;
height:145px;
/*Para IE6*/
width: expression(document.body.clientWidth < 1301? "1300px": "auto" );
min-width:1300px;
}


#fijo {
margin:0 auto;
overflow:hidden;
width:1300px;
background-color:blue;
height:40px;
}

HTML

Código:

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

<div id="fijo"></div>


</body>

Gracias a ambos

Un saludo