Foros del Web » Creando para Internet » CSS »

Scroll con dos o mas imágenes

Estas en el tema de Scroll con dos o mas imágenes en el foro de CSS en Foros del Web. 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.. ...
  #1 (permalink)  
Antiguo 19/08/2011, 10:37
 
Fecha de Ingreso: marzo-2009
Mensajes: 8
Antigüedad: 7 años, 8 meses
Puntos: 0
Scroll con dos o mas imágenes

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:
<div id="caja_scroll" align="center"><img src="line.jpg" border="0"></div>
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:
<div id="caja_scroll" align="center"><img src="line.jpg" border="0"><img src="line.jpg" border="0"></div>
Se me alinean verticalmente.. Me imagino que tengo que tocar el CSS, por eso hice el tema aca.. Alguna solución?
Gracias!!
  #2 (permalink)  
Antiguo 19/08/2011, 14:11
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: Scroll con dos o mas imágenes

añade otro selector con la propiedad float:left/right
Cita:
#caja_scroll img{
float:left;
}
  #3 (permalink)  
Antiguo 28/08/2011, 15:42
 
Fecha de Ingreso: marzo-2009
Mensajes: 8
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Scroll con dos o mas imágenes

Perdon por la ignorancia pero sigo sin poder..
Agrego eso en el css, y en el html como lo llamo?
  #4 (permalink)  
Antiguo 29/08/2011, 04:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 5 meses
Puntos: 1008
Respuesta: Scroll con dos o mas imágenes

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>
  #5 (permalink)  
Antiguo 29/08/2011, 21:51
 
Fecha de Ingreso: marzo-2009
Mensajes: 8
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Scroll con dos o mas imágenes

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
  #6 (permalink)  
Antiguo 29/08/2011, 22:32
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 5 meses
Puntos: 1567
Respuesta: Scroll con dos o mas imágenes

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8.  
  9. #caja_scroll {
  10.  width: 2600px;
  11.  background-color: #ffd6cb;
  12.  }
  13.  
  14. </head>
  15. <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>
  16. </body>
  17. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 30/08/2011, 00:30
 
Fecha de Ingreso: marzo-2009
Mensajes: 8
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Scroll con dos o mas imágenes

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:
<div id="scroll">
<div id="caja_scroll"><img src="line.jpg" width="10335" border="0"><img src="lines.jpg" width="1181" border="0"></div></div>

Etiquetas: horizontal, scroll
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 08:32.