Foros del Web » Creando para Internet » CSS »

ayuda con thumbails

Estas en el tema de ayuda con thumbails en el foro de CSS en Foros del Web. hola tengo una galeria que cuando mustra las fotos las muestra asi quiciera saber como hago para que las imagenes pequeñas como las del centro ...
  #1 (permalink)  
Antiguo 07/09/2010, 14:41
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
ayuda con thumbails

hola tengo una galeria que cuando mustra las fotos las muestra asi



quiciera saber como hago para que las imagenes pequeñas como las del centro quende en el centro de las grandres osea que no queden todas alineadas al borde de arriba de la imagen.

Código:
este es el css

.thumbs{
float:left;	
margin:5px;	
padding:1px;
background-color:#CCC;
}
y asi va el html

Código:
<div class="thumbs">
<a href="#" onclick="mostrarFoto('carro1_thumb.jpg');return false; ">
<img src="../View/galeria/thumbs/carro1_thumb.jpg">
</a>
</div>
<div class="thumbs">
<a href="#" onclick="mostrarFoto('carro2_thumb.jpg');return false; ">
<img src="../View/galeria/thumbs/carro2_thumb.jpg">
</a>
</div>

que puedo hacer saludos
  #2 (permalink)  
Antiguo 07/09/2010, 17:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con thumbails

Sin tener otra información complementaria (como compatibilidad), fíjese en este ejemplo: http://bit.ly/bxwBRc
Deje el selector siguiente tal que así:
Código CSS:
Ver original
  1. #segundo .hijo {
  2. margin:10px 0;
  3. vertical-align:middle;
  4. width:100px;
  5. }
y aumente el contenido de alguno de ellos para ver qué sucede.

Espero lo encuentre útil como punto de partida.
  #3 (permalink)  
Antiguo 07/09/2010, 17:43
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con thumbails

hola ya utilice lo que me dijiste pero no funcion , segun el ejemplo que me diste los div estan en una lista?

saludos
  #4 (permalink)  
Antiguo 07/09/2010, 18:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con thumbails

Pues he debido comprender mal lo que desea conseguir.
Esta es la idea que me hice y lo que se logra en ese ejemplo con la variación indicada:

Y en ese ejemplo no hay listas (ul/li). Sólo tiene que ver el código. Son div´s, pero nada impide hacer los cambios oportunos para que lo sea (una lista) si es lo que precisa.
  #5 (permalink)  
Antiguo 07/09/2010, 18:16
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con thumbails

ummm precisamente lo que aparece en la imagen es lo que yo quiero pero con el css que me diste no funciono...?

podrias darme un ejemplo de la img


saludos
  #6 (permalink)  
Antiguo 07/09/2010, 19:44
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 7 años, 9 meses
Puntos: 14
Respuesta: ayuda con thumbails

hola mira lo logre con este css

Código:
.thumbs{
    background: #CCC;
	display: inline-block;
	letter-spacing: normal;
	font-size: normal;
	white-space: normal;
	text-align: normal;
	vertical-align: middle;
	border: 1px solid #fff;
	margin:5px 10px;
	padding:1px;
}

.padre {
	text-align: center;
	font-size: 20px;
	letter-spacing: 20px;
	line-height: 12px;
	overflow: hidden;
	padding: 10px 0;
}
pero no entiendo porque funciona?


saludos
  #7 (permalink)  
Antiguo 08/09/2010, 08:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con thumbails

La función principal de ese ejemplo no era la alineación vertical, sino el centrado horizontal de un número variable de elementos con tamaños dispares.
Símplemente incluí la propiedad /vertical-align/ para ajustarlo a su captura. Teniendo en cuenta que en las cajas su posicionamiento /display/ ya era compatible.

Etiquetas: Ninguno
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:03.