Foros del Web » Creando para Internet » CSS »

Flotar imagenes con overflow:scroll

Estas en el tema de Flotar imagenes con overflow:scroll en el foro de CSS en Foros del Web. Buenas tardes a todos! La consulta es simple, pero no logro hacer que me funcione. Yo tengo una seria de imagenes (un listado ul) cuyos ...
  #1 (permalink)  
Antiguo 22/08/2009, 16:05
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Flotar imagenes con overflow:scroll

Buenas tardes a todos!

La consulta es simple, pero no logro hacer que me funcione. Yo tengo una seria de imagenes (un listado ul) cuyos elementos li son flotantes y, por ende, cada imagene se encuentra al lado de la otra. Teoricamente.

Por que teoricamente? Porque al div en que se encuentran las imagenes, le di un overflow:scroll y overflow-y: hidden, para que solo aparezca el scroll horizontal. La idea seria que el usuario mire las imagenes desplazando la barra.

Pero el problema es que, al estar overflow activado, las imagenes no flotan a la izquierda, sino que se van una abajo de otra.

Hay alguna forma de solucionar esto? Desde ya, muchas gracias!

Pablo.
  #2 (permalink)  
Antiguo 22/08/2009, 16:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Flotar imagenes con overflow:scroll

Para que el overflow funcione, el contendor debe tener un ancho. ¿Tiene un width definido tu contenedor?
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 22/08/2009, 16:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar imagenes con overflow:scroll

Mira a ver si este "divertimento te ayuda:

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" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * { margin: 0px;
  7. padding: 0px; outline: 0;
  8. }
  9. body {
  10.     background-color: #ebeef2;
  11.     margin:20px;
  12. }
  13.  
  14. h3 {
  15.     color:#838c98;
  16. }
  17.  
  18. a {
  19.     text-decoration: none;
  20. }
  21.  
  22.  
  23. #principal {
  24.     height:180px;
  25.     margin:0 auto;
  26.     overflow: auto;
  27.     position:relative;
  28.     width:500px;
  29. }
  30. .galeria {width: 1450px;}
  31.  
  32. #principal ul {
  33.    
  34. }
  35.  
  36. #principal ul li {
  37.     list-style-type: none;
  38.     float:left;
  39.     margin: 5px;
  40.     padding: 5px;
  41.     background: #cdcdcd;
  42. }
  43. #principal ul li img {
  44.     border:1px solid #EEE;
  45.   float:left;
  46.   margin-right:5px;
  47. }
  48. </head>
  49. <div id="principal">
  50.     <div class="galeria">
  51.     <ul>
  52.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
  53.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
  54.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
  55.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
  56.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
  57.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
  58.     </ul>
  59.     </div>
  60. </div>
  61. </body>
  62. </html>

Un saludo

Edito:
cachis, por 1 minuto
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 22/08/2009 a las 16:55
  #4 (permalink)  
Antiguo 22/08/2009, 16:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Flotar imagenes con overflow:scroll

Muy mono, sí señor.

Juraría que te sobran el overflow-x:auto; y el overflow-y:hidden;, pudiendo quedarse como:

#principal {
height:180px;
margin:0 auto;
overflow:auto;
position:relative;
width:500px;
}
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 22/08/2009, 16:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar imagenes con overflow:scroll

Efectivamente, tienes toda la razón. Despiste tonto y las prisas (quería ganarte en la respuesta y me dejé influir inconscientemente por la descripción inicial del problema).

Editado y corregido. Gracias
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 23/08/2009, 03:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Flotar imagenes con overflow:scroll

Hola:

Kseso?, para ganarle a Mikmoro hay que atarlo y amordazarlo . Y para ganarte a tí, también

Saludos.

  #7 (permalink)  
Antiguo 23/08/2009, 12:28
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Flotar imagenes con overflow:scroll

kseso? y mikmoro! muchas gracias por su ayuda! funciona perfectamente...

supongo que lo que me faltaba era flotar las imagenes dentro del li, porque mi contendero si tenia un ancho definido.

Asique, muchas gracias!

Por otro lado: mi cliente quiere que esa barra sea de "color": le comente que la unica alternativa que conocia era usando codigo NO estandar, y que servia solo para IE. Me dijo que no habia problema, que el y tudos sus potenciales visitas utilizaban el Explorer.

Pero bien, yo queria sacarme definitvamente la duda: existe alguna forma, con CSS u otra tecnologia, de hacer el scroll de color? Que no sea flash! ;)

Gracias por sus respuestas!

Pablo.
  #8 (permalink)  
Antiguo 23/08/2009, 12:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar imagenes con overflow:scroll

Sí, hay forma para ff.
Anda en algún tema más o menos reciente un enlace publicado por Corneja. Pero ni recuerdo la fecha aproximada ni detalles concretos al respecto.

Suerte en la búsqueda.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 23/08/2009, 12:58
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Flotar imagenes con overflow:scroll

OK, muchas gracias por su respuesta!

De paso, probe su codigo y anda de maravillas! Gracias!
  #10 (permalink)  
Antiguo 23/08/2009, 13:10
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Flotar imagenes con overflow:scroll

Una duda con respecto a lo de las imagenes:

Supongo que definen .galeria y su ancho para que las imagenes se floten a la izquierda y entren dentro del div.

Ahora, supongamos que esa galeria es dinamica, y un cliente puede tener 3 fotos, o 20, entonces, poner el ancho predefinido seria muy arriesgado, ya que si pongo muy ancho, el cliente que tenga pocas imagenes, le quedara mucho espacio a la derecha, en blanco.

Me explico? Como se podria solucionar esto? Ya que width:auto, definitivamente no funciona.

Saludos y gracias!

Pablo.
  #11 (permalink)  
Antiguo 23/08/2009, 13:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Flotar imagenes con overflow:scroll

Creo que una buena forma sería con calcular la anchura con algún tipo de programación (js, php ...)

Pero para eso, ya hay galerías basadas en motools, jquery...
Si te dás una vuelta por www.xiberneticos.com , www.anieto2k.com o similares verás bastantes reseñas al respecto.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 23/08/2009, 14:38
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Flotar imagenes con overflow:scroll

claro! como no se me habia ocurrido!

Con PHP cuento la cantidad de imagenes (el resultado de mi consulta en la BD), lo multiplico por un valor predefinido, que seria el ancho de cada imagen, y ese seria el ancho total del div.

Luego, mediante JS, cambio el style.width de ese elemento... Como no se me habia ocurrido!

Gracias kseso? por toda tu ayuda!

Un saludo!

Pablo.
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 23:33.