Flotar imagenes con overflow:scroll

locoxchacho · #1 (**permalink**) 22/08/2009, 15:05

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.

Mikmoro · #2 (**permalink**) 22/08/2009, 15:47

Para que el overflow funcione, el contendor debe tener un ancho. ¿Tiene un width definido tu contenedor?

kseso? · #3 (**permalink**) 22/08/2009, 15:48

Mira a ver si este "divertimento te ayuda:

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" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px; outline: 0;
}
body {
    background-color: #ebeef2;
    margin:20px;
}
 
h3 {
    color:#838c98;
}
 
a {
    text-decoration: none;
}
 
 
#principal {
    height:180px;
    margin:0 auto;
    overflow: auto;
    position:relative;
    width:500px;
}
.galeria {width: 1450px;}
 
#principal ul {
    
}
 
#principal ul li {
    list-style-type: none;
    float:left;
    margin: 5px;
    padding: 5px;
    background: #cdcdcd;
}
#principal ul li img {
    border:1px solid #EEE;
  float:left;
  margin-right:5px;
}
</style>
</head>
<body>
<div id="principal">
    <div class="galeria">
    <ul>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
    </ul>
    </div>
</div>
</body>
</html>

Un saludo

Edito:
cachis, por 1 minuto

Mikmoro · #4 (**permalink**) 22/08/2009, 15:52

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;
}

kseso? · #5 (**permalink**) 22/08/2009, 15:57

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

jomaruro · #6 (**permalink**) 23/08/2009, 02:27

Hola:

Kseso?, para ganarle a Mikmoro hay que atarlo y amordazarlo

. Y para ganarte a tí, también

Saludos.

locoxchacho · #7 (**permalink**) 23/08/2009, 11:28

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.

kseso? · #8 (**permalink**) 23/08/2009, 11:43

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.

locoxchacho · #9 (**permalink**) 23/08/2009, 11:58

OK, muchas gracias por su respuesta!

De paso, probe su codigo y anda de maravillas! Gracias!

locoxchacho · #10 (**permalink**) 23/08/2009, 12:10

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.

kseso? · #11 (**permalink**) 23/08/2009, 12:24

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.

locoxchacho · #12 (**permalink**) 23/08/2009, 13:38

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.