Foros del Web » Creando para Internet » CSS »

repeat-x y scroll horizontal

Estas en el tema de repeat-x y scroll horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/02/2010, 17:11
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 0
repeat-x y scroll horizontal

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!
  #2 (permalink)  
Antiguo 04/02/2010, 03:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: repeat-x y scroll horizontal

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

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 04/02/2010, 04:33
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: repeat-x y scroll horizontal

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?
  #4 (permalink)  
Antiguo 04/02/2010, 15:37
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: repeat-x y scroll horizontal

Buenas,

puedes probar poniendo min-width: 1300px; a #header
  #5 (permalink)  
Antiguo 04/02/2010, 15:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: repeat-x y scroll horizontal

Cita:
Iniciado por Tecna Ver Mensaje
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?
__________________
Revisa las FAQ's antes de disparar.
  #6 (permalink)  
Antiguo 04/02/2010, 16:01
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: repeat-x y scroll horizontal

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.
  #7 (permalink)  
Antiguo 05/02/2010, 08:52
 
Fecha de Ingreso: febrero-2010
Mensajes: 3
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: repeat-x y scroll horizontal

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

Etiquetas: horizontal, scroll
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 01:19.