Foros del Web » Creando para Internet » CSS »

CSS: album fotografico

Estas en el tema de CSS: album fotografico en el foro de CSS en Foros del Web. Holas. Suponiendo que se tiene el siguiente codigo HTML Código PHP: < div  class= "foto" >< img src = "images.jpg" /></ div > < div  class= ...
  #1 (permalink)  
Antiguo 18/11/2008, 11:50
Avatar de Muzztein  
Fecha de Ingreso: agosto-2002
Ubicación: Hangar 18
Mensajes: 1.703
Antigüedad: 15 años, 3 meses
Puntos: 16
Sonrisa CSS: album fotografico

Holas.

Suponiendo que se tiene el siguiente codigo HTML


Código PHP:
<div class="foto"><img src="images.jpg"/></div>
<
div class="foto"><img src="images.jpg"/></div>
<
div class="foto"><img src="images.jpg"/></div>
<
div class="foto"><img src="images.jpg"/></div>
<
div class="foto"><img src="images.jpg"/></div>
<
div class="foto"><img src="images.jpg"/></div>
<
div class="foto"><img src="images.jpg"/></div
¿Como es posible, solo usando CSS, mostrar en pantalla las fotos de manera concatenada y no listada hacia abajo?

Mi idea es que las fotos aparezcan asi:




y no asi.






Me explico?

Cualquier ayuda para enviarme en la direccion correcta seria bienvenido.
de antemano gracias.
  #2 (permalink)  
Antiguo 18/11/2008, 11:59
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: CSS: album fotografico

Saludos Muzztein

Intenta ponerle al div esta propiedad:

display: inline;

y te recomiendo que esos divs los metas dentro de un gran div por ej:

<div id="album">
<div id="foto"></div>
<div id="foto"></div>
<div id="foto"></div>
</div>

el div album ponle
display: block

y a los divs foto ponles
display: inline

Intentalo y me cuentas!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 18/11/2008, 11:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: CSS: album fotografico

Deberías poner a la clase foto un float: left

.foto {float: left;}

Para que te entren 5, ni una más ni una menos, lo que deberías hacer es encerrar tdo ese grupo dentro de otra caja a la que des un ancho adecuado como para que quepan 5 cajas.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 18/11/2008, 12:10
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: CSS: album fotografico

Si veis que tal chocais! ni un minuto mas ni menos...

Aresillo!!
Qué CaliZzZ atareao con el duelo??
  #5 (permalink)  
Antiguo 18/11/2008, 12:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: CSS: album fotografico



En el mismísimo minuto.

Una deja unos espacios entre las imágenes y la otra no. ¿Cuál es cuál?
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 18/11/2008, 12:22
Avatar de Muzztein  
Fecha de Ingreso: agosto-2002
Ubicación: Hangar 18
Mensajes: 1.703
Antigüedad: 15 años, 3 meses
Puntos: 16
Respuesta: CSS: album fotografico

Muchas gracias! eso fue rapidisimo

Probe con los dos metodos propuestos:

el primero Block /inline , me parecio mas elegante, sin embargo cuando le aplico un padding al div de clase foto para que se vea mas ordenado, por alguna razon se solapan el uno con el otro.(en IE y FF)

El segundo metodo con el float:left, que es mas sencillo, resulto a prueba de balas.

Lo mejor es que aprendi muchismo.
Gracias a los dos... repartire karma para todos
  #7 (permalink)  
Antiguo 18/11/2008, 12:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: CSS: album fotografico

Por esa razón no soy muy aficionado al display inline. Para algunas cosas viene bien, pero para otras produce "efectos secundarios"

Me alegro de que te sirvan las dos respuestas para probar y aprender
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 18/11/2008, 13:21
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: CSS: album fotografico

:O lo tendre en cuenta para el duelo xD
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
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 09:42.