div con scroll horizontal

juandedios · #1 (**permalink**) 29/09/2009, 10:12

Hola, quiero poner varias imágenes en sentido horizontal dentro de un DIV de ancho especifico.

por ejemplo: quiero poner 10 imagenes de un ancho de 80px cada una dentro de un div de 500px y que el scroll horizontal funcione. Yo hice lo siguiente:

Código CSS:

Ver original.imagen {
    float: left;
    padding: 2px;
}
 
#visor {
    padding: 5px;
    height: 70px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: auto;
}

Y el HTML:

Código HTML:

Ver original<div id="visor">
    <div class="imagen">
        <img src="imagen1.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen2.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen3.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen4.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen5.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen6.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen7.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
        <img src="imagen8.jpg" width="80" height="60" alt="Google" />
    </div>
</div>

De esta manera el scroll horizontal no aparece y las imagenes de van abajo, es decir en vez de seguir poniendose una al costado de la otra, llega al tope del contenedor que son 500px y se van abajo.

Cuando en overflow-x pongo scroll en vez de auto, la barra de desplazamiento horizontal si sale pero no sirve por las imagenes se van para abajo.

Que estoy haciendo mal???

deirdre · #2 (**permalink**) 29/09/2009, 10:58

Hola juandedios

Mira si esto te lo soluciona (ajusta las medidas a tus necesidades)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll horizontal en div</title>
<style type="text/css">
.imagen {
	float: left;
	padding: 2px;
}
#visor {
	padding: 5px;
	height: 110px;
	width: 500px;
	overflow: hidden;
	overflow-x: auto;
	border: 1px solid #000; /* solo para test */
}
#portaimagen {
	width: 1100px;
	overflow: hidden;
}
</style>
</head>

<body>
<div id="visor">
  <div id="portaimagen">
    <div class="imagen">
       <img src="imagen1.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen2.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen3.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen4.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen5.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen6.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen7.jpg" width="80" height="60" alt="Google" />
    </div>
    <div class="imagen">
       <img src="imagen8.jpg" width="80" height="60" alt="Google" />
    </div>
  </div>
</div>

</body>

</html>

Bye

kseso? · #3 (**permalink**) 29/09/2009, 11:07

Otra versión distinta, con sólo dos cajas y una lista que hace un tiempo hice para otro usuario del foro.
Deberías ajustar las medidas a tus necesidades.
http://css.devillasbuenas.es/galeria_scroll.html

Un saludo

juandedios · #4 (**permalink**) 29/09/2009, 11:18

Chevere, yo estoy haciendo ahora como dices tu kseso, pero en ambos casos tanto como para la primera respuesta como para la tuya, el problema viene que no se cuantas imagenes van a ser porque estas se jalan de una tabla, entonces le puedo poner 1100px a la caja donde iran los LI, pero y si son mas imagenes? o si son menos?, entonces el scroll igual recorrera los 1100px que puse.

kseso? · #5 (**permalink**) 29/09/2009, 11:24

Para eso ya necesitarías ayudarte de algún lenguaje de programación (tipo php) para calcular la anchura en función de las imágenes cargadas.
Creo que no será muy difícil, pero eso ya escapa de mis conocimientos

Un saludo

juandedios · #6 (**permalink**) 29/09/2009, 11:25

no hay problema con el php, pero se pude poner un width a un div desde una varable de php?

juandedios · #7 (**permalink**) 29/09/2009, 11:27

ok, ya lo tengo solucionado, como todos los thumb tienen anchos iguales, entonces con saber cuantas imagenes son, solo multiplico el numero de imagenes por el ancho de las miniaturas y ya esta. Chevere, gracias por sus aportes.

kseso? · #8 (**permalink**) 29/09/2009, 11:46

Lo que he visto en algunas partes es aplicar el ancho con php vía estilos en el mismo html, no en el archivo css:

<div id="mi_div" style="width:<? ...?>px;">Contenido</div>

Pero si ya lo solucionaste, enhorabuena.

Un saludo