Foros del Web » Creando para Internet » CSS »

div con scroll horizontal

Estas en el tema de div con scroll horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/09/2009, 11:12
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
div con scroll horizontal

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
  1. .imagen {
  2.     float: left;
  3.     padding: 2px;
  4. }
  5.  
  6. #visor {
  7.     padding: 5px;
  8.     height: 70px;
  9.     width: 500px;
  10.     overflow-y: hidden;
  11.     overflow-x: auto;
  12. }

Y el HTML:

Código HTML:
Ver original
  1. <div id="visor">
  2.     <div class="imagen">
  3.         <img src="imagen1.jpg" width="80" height="60" alt="Google" />
  4.     </div>
  5.     <div class="imagen">
  6.         <img src="imagen2.jpg" width="80" height="60" alt="Google" />
  7.     </div>
  8.     <div class="imagen">
  9.         <img src="imagen3.jpg" width="80" height="60" alt="Google" />
  10.     </div>
  11.     <div class="imagen">
  12.         <img src="imagen4.jpg" width="80" height="60" alt="Google" />
  13.     </div>
  14.     <div class="imagen">
  15.         <img src="imagen5.jpg" width="80" height="60" alt="Google" />
  16.     </div>
  17.     <div class="imagen">
  18.         <img src="imagen6.jpg" width="80" height="60" alt="Google" />
  19.     </div>
  20.     <div class="imagen">
  21.         <img src="imagen7.jpg" width="80" height="60" alt="Google" />
  22.     </div>
  23.     <div class="imagen">
  24.         <img src="imagen8.jpg" width="80" height="60" alt="Google" />
  25.     </div>
  26. </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???
__________________
El aprendiz.
  #2 (permalink)  
Antiguo 29/09/2009, 11:58
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: div con scroll horizontal

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
  #3 (permalink)  
Antiguo 29/09/2009, 12:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: div con scroll horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 29/09/2009, 12:18
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Respuesta: div con scroll horizontal

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.
__________________
El aprendiz.
  #5 (permalink)  
Antiguo 29/09/2009, 12:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: div con scroll horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 29/09/2009, 12:25
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Respuesta: div con scroll horizontal

no hay problema con el php, pero se pude poner un width a un div desde una varable de php?
__________________
El aprendiz.
  #7 (permalink)  
Antiguo 29/09/2009, 12:27
 
Fecha de Ingreso: mayo-2003
Ubicación: Lima
Mensajes: 931
Antigüedad: 14 años, 7 meses
Puntos: 8
Respuesta: div con scroll horizontal

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.
__________________
El aprendiz.
  #8 (permalink)  
Antiguo 29/09/2009, 12:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: div con scroll horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 18:11.