Foros del Web » Creando para Internet » CSS »

como lograr que las imagenes se vean una al lado de otra dentro de un div

Estas en el tema de como lograr que las imagenes se vean una al lado de otra dentro de un div en el foro de CSS en Foros del Web. hola mi problema es el siguiente. tengo un clase css que se llaba box y lo que hace es mostrar un sierto pedazo del contenido ...
  #1 (permalink)  
Antiguo 15/07/2011, 16:04
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años
Puntos: 5
como lograr que las imagenes se vean una al lado de otra dentro de un div

hola mi problema es el siguiente.
tengo un clase css que se llaba box y lo que hace es mostrar un sierto pedazo del contenido de un div y agregarle automaticamente un scroll bar para ver todo el contenido que hay en el div.
la clase es la siguiente

Código CSS:
Ver original
  1. .box {
  2.     border-width:5px;
  3.     border-color:#CCC;
  4.     border-bottom-style:outset;
  5.     border-left-style:outset;
  6.     border-right-style:outset;
  7.     border-top-style:outset;
  8.     width: 703px;
  9.     height: 495px;
  10.     overflow:auto;
  11. }

bueno dentro del div al que le asigne esta clase recupero fotos de la base de datos y las muestro.
yo pongo el codigo del div de esta menera:

Código HTML:
Ver original
  1. <div id="box" class="box">
  2.  
  3. <img height='477' src='fotos/".$album."/".$nombre."'></a>
  4. <img height='477' src='fotos/".$album."/".$nombre."'></a>
  5. <img height='477' src='fotos/".$album."/".$nombre."'></a>
  6.  
  7. </div>

el tema es que las fotos normalmente se deverian ver una al lado de otra y el scrollbar ser orizontal, pero no se porque me aparecen una foto abajo de otra y el scrollbar vertical.

alguien sabe como lograr en el estilo css que se vean horizontales las fotos y no una arriva de otra ??

desde ya muchas gacias y espero que alguien sepa como hacerlo XD !!
__________________
un saludo..... . . .
  #2 (permalink)  
Antiguo 15/07/2011, 16:08
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 9 meses
Puntos: 64
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

habria q verificar el ancho de las imagenes, ya que si supera el ancho del div contenedor, (.box width: 703px;) se veran como una "lista"... fijate que medidas tienen..
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 15/07/2011, 17:03
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años
Puntos: 5
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

si son un poco mas chicas pero entran una sola porque con la segunda ya supera el ancho.
y si el problema es ese mismo, pero no hay ningun atributo css que lo oblige a seguir para el costado y no en fila ??
__________________
un saludo..... . . .
  #4 (permalink)  
Antiguo 15/07/2011, 17:13
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 9 meses
Puntos: 64
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

Cita:
Iniciado por intiweb Ver Mensaje
si son un poco mas chicas pero entran una sola porque con la segunda ya supera el ancho.
y si el problema es ese mismo, pero no hay ningun atributo css que lo oblige a seguir para el costado y no en fila ??
no seria mas sencillo que le des un width:auto al div contenedor?? de esa manera se adaptaria ....

las imagenes varian mucho de tamaño o son siempre del mismo??
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #5 (permalink)  
Antiguo 15/07/2011, 19:06
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años
Puntos: 5
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

pasa que la idea es que sea vea una tira de fotos en el centro de la pantalla en un cuadrado. y que la pases con el scroll .
si le saco el width fijo va a ser enorme se me va todo el diseño por la borda jaja.
lo puedo hacer con un iframe pero quiero evitar eso porque tiene un borde que se lo meto al div y no tengo ganas de luchar con el iframe y como queda posicionado jaja
__________________
un saludo..... . . .
  #6 (permalink)  
Antiguo 15/07/2011, 19:17
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 6 años, 9 meses
Puntos: 64
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

Cita:
Iniciado por intiweb Ver Mensaje
pasa que la idea es que sea vea una tira de fotos en el centro de la pantalla en un cuadrado. y que la pases con el scroll .
si le saco el width fijo va a ser enorme se me va todo el diseño por la borda jaja.
lo puedo hacer con un iframe pero quiero evitar eso porque tiene un borde que se lo meto al div y no tengo ganas de luchar con el iframe y como queda posicionado jaja


le das float left a las imagenes .. y q el ancho del content sea un promedio de lo q calzarian 2 fotos, pero q no sea menos porq te va a pasar siempre eso .. es la unica manera...

UNA PREGUNTA .. VOS QUERES Q EL SCROLL SEA VERTICAL U HORIZONTAL ??
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #7 (permalink)  
Antiguo 15/07/2011, 21:38
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años
Puntos: 5
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

el scroll quiero que sea horizontal, probe con float left pero no anda, y no le puedo modificar el tamaño al divy las fotos son cargadas por el usuario no se de que ancho son :S.
__________________
un saludo..... . . .
  #8 (permalink)  
Antiguo 18/07/2011, 01:17
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 2 meses
Puntos: 252
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

Buenas, ahora haré un par de pruebas a ver si consigo lo que quieres, pero te aviso que esta línea HTML no está muy bien:

<img height='477' src='fotos/".$album."/".$nombre."'></a>

te falta el cierre de img y tienes un link sin abrir, supongo que de algún remanente que tengas por ahí. Lo del link será de copiar y pegar aquí, pero la imagen añádele el cierre (<img ... />), que si no, no te validará.

Un saludo.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #9 (permalink)  
Antiguo 18/07/2011, 12:02
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años
Puntos: 5
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

si esos errores los cambie al toque que publique XD ...
pero no es por eso que no anda. porque ahora esta con el cierre de la imagen y todo como debe ser pero no anda.
intente usando float, y tambien intente usando una clase css con display:inline-blok; pero tampoco me sirvio :(,
no se que mas hacer...
__________________
un saludo..... . . .
  #10 (permalink)  
Antiguo 18/07/2011, 13:59
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 9 años, 2 meses
Puntos: 252
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

Buenas, perdona la tardanza.

Creo que lo que comentas no se puede hacer por donde vas. Me da que la única solución es con position: absolute; Es que precisamente la idea de float es que el contenido ocupe el sitio disponible, si no hay sitio, tenderá a bajarte la imagen hacia la siguiente fila. La pega de position:absolute es que tienes que poner la posición con left y top a mano, luego tienes que conocer los anchos de las imágenes. Lo que puedes hacer es, como has hecho con el alto, pero con el ancho. Es decir, dejar que las imágenes se redimensiones fijando únicamente el ancho y que, si se pasan de alto, se aumente el div.

No se me ocurre otra forma de hacerlo, lo siento. Espero que te sirva.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #11 (permalink)  
Antiguo 18/07/2011, 15:38
Avatar de intiweb  
Fecha de Ingreso: mayo-2009
Ubicación: Capital Federal
Mensajes: 363
Antigüedad: 8 años
Puntos: 5
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

no no puedo hacer eso porque el tamaño es el que fue diseñado y la idea es seguir el derecho, lo que pasa cuando programas algo que es diseñado por un diseñador grafico ajajajaj XD !!
pero lo voy a hacer con un iframe entonces y listo... muchas gracias por la ayuda.
__________________
un saludo..... . . .
  #12 (permalink)  
Antiguo 18/07/2011, 15:48
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.938
Antigüedad: 9 años, 2 meses
Puntos: 1309
Respuesta: como lograr que las imagenes se vean una al lado de otra dentro de un div

A ver si esto es lo que buscas, no creo que un iframe sea la única opción:

Código HTML:
Ver original
  1. <div id="boxcontainer">
  2.     <div id="box">
  3.         <img src="imagen1.jpg" alt="imagen1" />
  4.         <img src="imagen1.jpg" alt="imagen1" />
  5.         <img src="imagen1.jpg" alt="imagen1" />
  6.         <img src="imagen1.jpg" alt="imagen1" />
  7.         <img src="imagen1.jpg" alt="imagen1" />
  8.         <img src="imagen1.jpg" alt="imagen1" />
  9.         <img src="imagen1.jpg" alt="imagen1" />
  10.     </div>
  11. </div>
Código CSS:
Ver original
  1. #boxcontainer {
  2.     border: 5px outset #CCC;
  3.     width: 703px;
  4.     height: 495px;
  5.     overflow:auto;
  6. }
  7. #box{
  8.     height: 495px;
  9. }
  10. #box img{
  11.     height: 477px;
  12.     float: left;
  13. }

Saludos
__________________
Grupo Telegram Docker en Español

Etiquetas: contenido, imagenes, lado
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 16:47.