Foros del Web » Creando para Internet » CSS »

la Imagen se ubica diferente según Res.Pantalla

Estas en el tema de la Imagen se ubica diferente según Res.Pantalla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/04/2007, 11:13
 
Fecha de Ingreso: septiembre-2004
Mensajes: 362
Antigüedad: 13 años, 3 meses
Puntos: 1
la Imagen se ubica diferente según Res.Pantalla

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:

Cita:
.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.
__________________
Saludos,

Martin
  #2 (permalink)  
Antiguo 26/04/2007, 11:29
Avatar de demiurgo_daemon  
Fecha de Ingreso: diciembre-2006
Ubicación: Querétaro
Mensajes: 184
Antigüedad: 11 años
Puntos: 2
Re: la Imagen se ubica diferente según Res.Pantalla

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
  #3 (permalink)  
Antiguo 26/04/2007, 17:45
 
Fecha de Ingreso: septiembre-2004
Mensajes: 362
Antigüedad: 13 años, 3 meses
Puntos: 1
Re: la Imagen se ubica diferente según Res.Pantalla

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;
}
__________________
Saludos,

Martin
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 18:36.