Caja (div) con scoll horizontal

spyhardnet · #1 (**permalink**) 01/06/2009, 04:22

Hola!

Tengo un problemilla que no se como solucionar, he buscado pero no encuentro...

Tengo una etiqueta que tiene un tope de ancho y alto. En ella tengo imagenes, y quiero que el scroll me lo haga horizontal... como puedo poner un scroll horizontal para la caja?

He intentado con overflow pero no se como poner...

Gracias

kseso? · #2 (**permalink**) 01/06/2009, 04:25

"overflow-y: auto;" (siempre que tengas definido un ancho a esa caja)

spyhardnet · #3 (**permalink**) 01/06/2009, 04:31

gracias por contestar,
pero eso no me funciona... e probado. Es una etiqueta con imagenes dentro, y cuando llega al tope me baja la imagen a la siguiente fila (que no se ve) en vez de hacerme el scroll... :(
Nose que acer!!!!

PD: tengo el ancho de la caja te adjunto el css para que veas ;)

#minis{
width: 520px;
height: 80px;
float: left;
overflow-y: auto;
}

kseso? · #4 (**permalink**) 01/06/2009, 04:57

es conveniente dar cuanta más información mejor
mira a ver si esto te da una idea de como hacer. Sólo es cuestión de que cambies algún valor para adaptarlo a tus necesidades:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>scroll</title>
<style type="text/css">
* {margin:0; padding: 0; position: relative;}
html, body {
background-color: #cdcdcd;
}
#contiene-minis {
width: 520px;
height: 80px;
float: left;
overflow-x: auto;
background-color:#fff;
}
.minis {
width: auto;
height: 60px;
color:#000;
white-space: pre;
}
</style>
</head>
<body>
<div id="contiene-minis">
<div class="minis">
Inicio del texto con espacios para que veas el funcionamiento de la propiedad "white-space: pre"     aquí   hay      varios        espacios  seguidos  y ahora viene una palabra imposible por lo larga que es blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla final del texto.
</div>
</div>
</body>
</html>

EDITO: para incluir los nuevos datos

spyhardnet · #5 (**permalink**) 01/06/2009, 05:14

:P

gracias, eso me funciono!! pero tengo otro problema ahora.

Has útilizado dos cajas, ese era mi problema, estaba haciendo con una... :S

Bueno, mi problema ahora; a una de las cajas, le tengo que dar el valor de anchura, pero esta caja varia la anchura cuando meto mas fotos... :S (las introduzco mediante php automaticamente) y he probado a poner el width 100% pero eso no funciona :(

tiene solución, o tengo que poner una anchura siempre?

Gracias de todos modos ;)

kseso? · #6 (**permalink**) 01/06/2009, 05:31

he modificado el código. Míratelo ahora

Un saludo

spyhardnet · #7 (**permalink**) 01/06/2009, 05:52

Casi lo tenemos jeje.

Estos cambios no me funcionaron :(

el auto no me hace nada... y el white-space tampoco me vale. Me sigue poniendo scroll vertical y alinea las fotos para abajo. Poniendo un numero de pixeles (2000px) si que me funciona, pero no es la solución, porque ahora sobra, pero luego faltara... :S

Nuse, gracias de todas maneras! :P

kseso? · #8 (**permalink**) 01/06/2009, 07:38

Si tanta diferencia va a haber entre una situación y otra, puedes intentar:
--> darle la anchura a ese contenedor (el interior) mediante php
--> Colocar la galería de imágenes mediante algún script

En lo que seguimos dando vueltas al problema algo más tarde, creo que habrá que dar alguna clase y sus propiedades a las imágenes para lograrlo sólo con css. (Cabezota yo

)
Y si tienes la página en línea, sería bueno un enlace.

Un saludo

spyhardnet · #9 (**permalink**) 02/06/2009, 02:14

Lo había pensado ;) . Es otra solución, pero tiene que haber manera de hacerlo mediante css (creo). 100% o auto tienen que funcionar de alguna manera... no se cual, pero tienen que funcionar... :S . jeje.

Gracias eh!!! :P

kseso? · #10 (**permalink**) 02/06/2009, 03:58

Ok. Ya lo miro con más calma y te comento más extensamente.
Ahora unas reflexiones rápidas:
--> El efecto de carga de la imagen en el contenedor superior es molesto (parece que haya una recarga de toda la imagen poniendo el foco en la parte superior, por lo que si has hecho algo de scroll te sube la página).
-->Podrías mirar algún script para darle más "vida" a esa galería.
--> Creo que habrá que cambiar el planteamiento y la imágenes colocarlas como elementos de una lista (ul/li)
--> Quizás como aquí (la página de presentación de los trabajos), cambiando el mostrar la imagen en vez de al a:hover al pinchar.

Y ahora una pequeña sugerencia que nada tiene que ver con tu consulta: ¿Estás obligado a usar ese flash en la cabecera? encuentro molesto el movimiento de la hierba.

Un saludo.
P.D.: Supongo que el logo tan en blanco será temporal por estar en construcción

spyhardnet · #11 (**permalink**) 02/06/2009, 04:32

Gracias! Pues la galeria voy a ir cambiandola... para darle mas "vida". Tienes razon. La tengo que agrandar, porque todas las fotos que se suban no van a ser panoramicas...

Lo del flash es necesario :P

Pero lo del scroll me tiene mosca eh! que curioso. He probado mas cosas pero na...

kseso? · #12 (**permalink**) 02/06/2009, 04:49

Pues qué pena! El flash, digo. no se si a los urbanitas eso les transmitirá valores naturales, sanos... pero a lo que es a que no lo soy...

Bueno, a lo que nos trae por aquí

, durante el día miro el tema de colocarlas en una lista y probar algo como lightbox para visualizarlas (después te quedará a ti colocarlas

)

spyhardnet · #13 (**permalink**) 02/06/2009, 04:53

Gracias kseso!!! he mirado lo tu link y esta guay!

Yo seguire investigando :P

kseso? · #14 (**permalink**) 02/06/2009, 06:44

Bueno, Spyhardnet.
Antes de nada, había un error tonto en el código del #4 (~~overflow-y~~ auto overflow-x: auto)

Después de trastear un rato, creo que todo pasa por darle un ancho al div interior. Y como la carga de imágenes es variable, si quieres seguir por ese camino creo que deberías darle la anchura calculándola con php o algún script (ahí ya no digo nada por ignorancia).

Quizás se pudiese aparentar eso que tú quieres a base de divitis, pero no creo que merezca la pena.

Pienso que por simplicidad y estética te vendrá mejor una galería con algún script. Encontré alguna:
Una con explicación (inglés) y demo
Una recopilación de varias
Pero hay muchas más en la red.

Un saludo

spyhardnet · #15 (**permalink**) 03/06/2009, 04:02

Gracias tio! Estoy haciendo una galeria nueva!! Por ahora me va bien, pero no consigo que se vea el css en explorer... En los demas navegadores se me ve ok, pero explorer (como siempre) me jode...

Muchas gracias por todo eh!!!