Scroll con dos o mas imágenes

fedematos · #1 (**permalink**) 19/08/2011, 09:37

Buenas!
Tengo un problema, estoy haciendo una pagina con una linea del tiempo (que es una imagen larga) que se muestra en un scroll horizontal..
Codigo:

Cita:

CSS:

Cita:

#caja_scroll {
width: 100%;
overflow: auto;
background-color: #ffd6cb;
clear:both;
margin :auto;
}

Lo que quiero hacer es que para actualizar esta linea de tiempo, le tengo que agregar imagenes a la derecha de la que ya tengo a medida que pase el tiempo.. Pero no me deja pegar otra imagen al lado asi:

Cita:

Se me alinean verticalmente.. Me imagino que tengo que tocar el CSS, por eso hice el tema aca.. Alguna solución?
Gracias!!

IsaBelM · #2 (**permalink**) 19/08/2011, 13:11

añade otro selector con la propiedad float:left/right

Cita:

#caja_scroll img{
float:left;
}

fedematos · #3 (**permalink**) 28/08/2011, 14:42

Perdon por la ignorancia pero sigo sin poder..
Agrego eso en el css, y en el html como lo llamo?

IsaBelM · #4 (**permalink**) 29/08/2011, 03:58

así

Cita:

#caja_scroll {
width: 100%;
overflow: auto;
background-color: #ffd6cb;
clear:both;
margin :auto;
}

#caja_scroll img{
float:left;
}

<div id="caja_scroll" align="center"><img src="line.jpg" border="0"><img src="line.jpg" border="0"></div>

fedematos · #5 (**permalink**) 29/08/2011, 20:51

Me sigue poniendo las imagenes una abajo de otra (Además me saca el scroll de la imagen..) Probe con distintos navegadores, sacando atributos, poniendo, cambiando, cortando, pegando y sigueeeeeeeeeee..
En cualquiero momento renuncio jaja

emprear · #6 (**permalink**) 29/08/2011, 21:32

fedematos:
Al darle un width 100% al div, la estás limitando al area visible del navegador. Bueno sería saber cual es el tamaño de las imágenes, pero la solución pasa por darle al div un tamaño que supere el ancho de las mismas. Agergando un float solo vas a conseguir sobreescribir el valor align="center" que está en tu código
algo así

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
 
#caja_scroll {
 width: 2600px;
 background-color: #ffd6cb;
 }
 
</style>
</head>
<body>
<div id="caja_scroll" align="center"><img src="cat-black.jpg" width=1900" border="0"><img src="logo_video_vd.jpg" width="600" border="0"></div>
</body>
</html>

Saludos

fedematos · #7 (**permalink**) 29/08/2011, 23:30

Ahi pude!! muchas Gracias gente!!
Me quedaba alineado con el codigo de arriba pero la pagina pasaba a tener un ancho de 12mil px jaja, asi que le agregue un div con el 100%
Asi

Cita:

#caja_scroll {
width:12000px;
}

#scroll {
width:100%;
overflow: auto;
background-color: #ffd6cb;
clear:both;
margin :auto;
}

Cita: