Foros del Web » Creando para Internet » CSS »

muchas imagenes en una sola fila

Estas en el tema de muchas imagenes en una sola fila en el foro de CSS en Foros del Web. Hola gente, tengo algo como esto... Código: <div style="width:500px; height:100ox; overflow: auto;"> <img src="1.jpg" height="100" width="100" /> <img src="1.jpg" height="100" width="100" /> <img src="1.jpg" height="100" ...
  #1 (permalink)  
Antiguo 31/03/2009, 15:47
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
muchas imagenes en una sola fila

Hola gente, tengo algo como esto...

Código:
<div style="width:500px; height:100ox; overflow: auto;">
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
</div>
Pero las filas no me quedan todas en una sola fila, cuando se llena la fila hace un salto y sigue debajo generándome varias líneas...

Hay alguna forma fácil de solucionarlo, fácil y que funcione bien en todos los navegadores ;)

Saludos y gracias de antemano...
PD: SOlamente pude solucionarlo con una tabla HTML...
__________________
Esteban Quintana
  #2 (permalink)  
Antiguo 31/03/2009, 16:05
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: muchas imagenes en una sola fila

Saludos!!

Intenta agregar al CSS esto:

#div img { display: inline; float:left; }

Con eso seguro se soluciona!

Hasta luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 31/03/2009, 16:12
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
Respuesta: muchas imagenes en una sola fila

tampoco

Cita:
<style>
div.galery {height:108px; width:500px; overflow:auto; padding:5px;}
div.galery img { display:inline; float: left;}
</style>
<div class="galery">

<img src="bariloche/thumbs/1.jpg" width="140" height="91" />
<img src="bariloche/thumbs/2.jpg" width="140" height="91" />
<img src="bariloche/thumbs/3.jpg" width="140" height="91" />
<img src="bariloche/thumbs/4.jpg" width="140" height="91" />
<img src="bariloche/thumbs/5.jpg" width="140" height="91" />
<img src="bariloche/thumbs/6.jpg" width="140" height="91" />
<img src="bariloche/thumbs/7.jpg" width="140" height="91" />
<img src="bariloche/thumbs/8.jpg" width="140" height="91" />
<img src="bariloche/thumbs/9.jpg" width="140" height="91" />

</div>
Saludos
__________________
Esteban Quintana
  #4 (permalink)  
Antiguo 31/03/2009, 16:13
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: muchas imagenes en una sola fila

Y si quitas div? y solo dejas .galery img?

EDITO: Ups!! Creo que me confundi, cambia display:inline; por display: block;
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 31/03/2009, 16:17
 
Fecha de Ingreso: marzo-2009
Mensajes: 2
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: muchas imagenes en una sola fila

Pero tienes una división de 500px en donde vas a meter 9 imaǵenes de 100px

9 x 100 = 900; 900 > 500

Si el contenido es más ancho que el contenedor, entonces... sucede lo que te sucede,

Debes ampliar tu división a mínimo900px, eso es todo.

Saludos
  #6 (permalink)  
Antiguo 31/03/2009, 16:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: muchas imagenes en una sola fila

Hola Esteban :

Debes darle al contenedor de las imágenes una anchura mayor o igual a la suma de sus anchuras más la suma de sus márgenes y bordes....

Y según veo tienes 8 imágenes de 100 pixeles de anchura en un contenedor de sólo 500 pixeles... y un añadido es que el overflow para esa anchura supongo que iría mejor scroll (aunque creo que auto valdría)

Después he visto que tienes también otras imágenes (el otro post) aún más anchas...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 01/04/2009, 07:14
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
Respuesta: muchas imagenes en una sola fila

Justamente la idea es que el contenedor sea más chico y que tenga el scroll horizontal...por eso el overflow ;)

Ya proble con inline, block y todo pero no funca, así que lo dejo así:

Cita:
<style>
div.galery {height:110px; width:500px; overflow:auto; padding:5px;}
</style>
<div class="galery">
<table><tr>
<td><img src="bariloche/thumbs/1.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/2.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/3.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/4.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/5.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/6.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/7.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/8.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/9.jpg" width="140" height="91" /></td>
</tr></table>
</div>
Saludos y gracias !
__________________
Esteban Quintana
  #8 (permalink)  
Antiguo 01/04/2009, 08:16
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: muchas imagenes en una sola fila

una solución fácil si quieres forzar un scroll horizontal sin que salte las imágenes es crear un iframe en la página y darle a este un ancho muy alto así sale el scroll dichoso.
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 11:10.