Foros del Web » Creando para Internet » CSS »

Caja (div) con scoll horizontal

Estas en el tema de Caja (div) con scoll horizontal en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 01/06/2009, 05:22
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta Caja (div) con scoll horizontal

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
  #2 (permalink)  
Antiguo 01/06/2009, 05:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

"overflow-y: auto;" (siempre que tengas definido un ancho a esa caja)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 01/06/2009, 05:31
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

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;
}
  #4 (permalink)  
Antiguo 01/06/2009, 05:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>scroll</title>
  4. <style type="text/css">
  5. * {margin:0; padding: 0; position: relative;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. #contiene-minis {
  10. width: 520px;
  11. height: 80px;
  12. float: left;
  13. overflow-x: auto;
  14. background-color:#fff;
  15. }
  16. .minis {
  17. width: auto;
  18. height: 60px;
  19. color:#000;
  20. white-space: pre;
  21. }
  22. </head>
  23. <div id="contiene-minis">
  24. <div class="minis">
  25. 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.
  26. </div>
  27. </div>
  28. </body>
  29. </html>

EDITO: para incluir los nuevos datos
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 02/06/2009 a las 07:26
  #5 (permalink)  
Antiguo 01/06/2009, 06:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

: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 ;)
  #6 (permalink)  
Antiguo 01/06/2009, 06:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

he modificado el código. Míratelo ahora

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 01/06/2009, 06:52
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

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
  #8 (permalink)  
Antiguo 01/06/2009, 08:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 02/06/2009, 03:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

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

Última edición por spyhardnet; 09/06/2009 a las 07:02
  #10 (permalink)  
Antiguo 02/06/2009, 04:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 02/06/2009, 05:32
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

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...

  #12 (permalink)  
Antiguo 02/06/2009, 05:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

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 )
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 02/06/2009, 05:53
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

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

Yo seguire investigando :P
  #14 (permalink)  
Antiguo 02/06/2009, 07:44
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Caja (div) con scoll horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 03/06/2009, 05:02
 
Fecha de Ingreso: mayo-2009
Mensajes: 22
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Caja (div) con scoll horizontal

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!!!
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 07:42.