Necesito AYUDA URGENTE o lo antes posible....si alguién me puede ayudar...
Tengo una galería de imágenes que funciona con CSS, éste es el código de la página principal donde se ve la galería:
<div class="cont_banner_sup_gal_aplic">
<div class="avatar_detalle">
<a class="s_thumb opencontainer" href="domain/appsManagement/<s:property value="id"/>">
<img src="static/img/apps/<s:property value="avatar" />" />
</a>
</div>
<div class="img_banner_sup_gal_aplic">
<a class="s_thumb opencontainer" href="domain/appsManagement/<s:property value="id"/>">
<img src="static/img/apps/banner_comun_gal_aplic.png" />
</a>
</div>
<div class="title_detalle"><s:property value="name" /></div>
</div>
<div class="fondo_galeria nested">
<ul class="cat">
<s:iterator value="screenShootList" status="rowstatus">
<li>
<a href="#">
<img alt="#" src="static/img/apps/<s:property />" class="min">
<img alt="#" src="static/img/apps/<s:property />" class="max">
</a>
</li>
</s:iterator>
</ul>
<div class="img_default_galeria">
<s:iterator value="screenShootList" status="rowstatus">
<s:if test="#rowstatus.odd == true">
<img src="static/img/apps/<s:property/>"></img>
</s:if>
</s:iterator>
</div>
Y los estilos estan BIEN definidos en su respectiva CSS.
Bien, hasta a qui todo OK, funciona correctamente la galería....el problema es el siguiente:
Resulta que se me descoloca la imágen grande que aparece cada vez que le paso el cursor por encima de las imágenes pequeñas. La galería funciona del siguiente modo:
Cuando pasas el curso por encima de alguna de las miniaturas de la galería, se visualiza dejado la imágen en grande (hay siempre una imágen grande por defecto y luego según pasas el cursor, las imágenes grandes cambian).
Pues bien, éstas imágenes son las que se me descolocan dependiendo de la resolución de la pantalla del usuario.
Las imágenes grandes que aparecen tienen este estilo:
.max {
background-repeat: no-repeat;
left: 30.6%;
max-width: 405px;
min-width: 405px;
position: absolute;
top: 50.9%;
visibility: hidden;
z-index: 1;
}
Este estilo sólo se ve bien en una resolución de 1024x768px, en el resto de resoluciones se ve MAL....
Entonces estuve buscando soluciones a esto y encontré esto:
@media screen and (min-width: 768px) and (max-width: 1024px) {
.max {
background-repeat: no-repeat;
left: 30.6%;
max-width: 405px;
min-width: 405px;
position: absolute;
top: 50.9%;
visibility: hidden;
z-index: 1;
}
}
@media only screen and (min-width : 840px) {
.max {
background-repeat: no-repeat;
left: 30.9%;
max-width: 405px;
min-width: 405px;
position: absolute;
top: 53.1%;
visibility: hidden;
z-index: 1;
}
}
@media only screen and (min-width : 900px) {
.max {
background-repeat: no-repeat;
left: 31%;
max-width: 405px;
min-width: 405px;
position: absolute;
top: 53.1%;
visibility: hidden;
z-index: 1;
}
}
pero lo he probado y NO ME FUNCIONA!!!!
Por qué?
Me podéis ayudar por favor???
Lo que me pasa es que por lo visto si parece que el navegador lee los estilos, pero...sólo lee el de la resolución de 900px, no sé por qué....por qué sobreescrive los demás estilos y los tacha y no los lee?...
No entiendo por qué....es algo un poco raro...me podéis solucionar esta situación alguno?
He probado a poner cada estilo en una CSS diferente y enlazarlas en la página de la galería en lugar de ponerlos todos en la misma css....y me pasa lo mismo...ya no sé qué más hacer!!!!
¿Sugerencias?
¿Alguna otra solución?
HELP!!!!!
