la Imagen se ubica diferente según Res.Pantalla

[Martine]

Hola,

Tengo esta galería con css
http://www.ritmolatinocolumbus.com/fotos-alacranes.html

Al pasar el ratón sobre la imagen pequeña, aparece la imagen ampliada a la derecha.

Se ve bien en resolución de 1024 x 768... pero si la resolución disminuye entonces la imagen grande se sube mucho y si la resolución aumenta (por ej. 1280 x 1024) entonces la imagen grande se baja mucho.

En ambos casos me daña el diseño.

Este es el cóodigo css:

.thumbnail img{
border: 1px solid white;
margin: 0 1px 1px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid white;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#666666;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: white;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 43%;
left: 43%; /*position where enlarged image should offset horizontally */
z-index: 50;
}

La ubicación de la imagen la intente con valores absolutos y el resultado es peor... así que lo dejé con porcentajes: top: 43% y left: 43%... pero de todas formas tengo el problema que les menciono.

Así se ve en 1280 x 1024


Como ven, la imagen grande se monta sobre las pequeñas que están abajo y deja un espacio no deseado en la parte de arriba.

[demiurgo_daemon]

Hola,

puedes intentar

Código:

.contentppal{
position: relative;
}

y recalcular los porcentajes.

contentppal es el div que contiene todas tus imágenes. De lo contrario, no podrás usar position: absolute con pantallas diversas a menos que hagas todo un circo en Javascript.

Saludos

[Martine]

Yahooo!!

Gracias, ahora quedó bien.

Al que le interese esta forma de Galería de imágenes, simplemente vea el archivo styles2.css, allí encontrará el código. Es recomendable pues si tu visitante tiene bloqueo de PopUp's, no sufrirá el desagrado de ver que la imagen grande no abre.

Credito: http://www.dynamicdrive.com/style/cs...y/category/C4/

Gracias a "demiurgo_daemon" que me corrigió esta línea (que encierra el contenido ppal):

.contentppal{
position: relative;
}