Foros del Web » Creando para Internet » CSS »

CSS y @media screen

Estas en el tema de CSS y @media screen en el foro de CSS en Foros del Web. Hola a todos!! 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 ...
  #1 (permalink)  
Antiguo 11/05/2012, 04:53
Avatar de Papestella  
Fecha de Ingreso: abril-2009
Ubicación: Granada
Mensajes: 35
Antigüedad: 13 años, 4 meses
Puntos: 0
CSS y @media screen

Hola a todos!!

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!!!!!
  #2 (permalink)  
Antiguo 13/05/2012, 14:40
Avatar de madhatterdef  
Fecha de Ingreso: diciembre-2011
Ubicación: argentina
Mensajes: 213
Antigüedad: 10 años, 7 meses
Puntos: 59
Respuesta: CSS y @media screen

Cita:
Iniciado por madhatterdef Ver Mensaje
puedes cambiar el css según la resolución así

<script type="text/javascript">
if (screen.width < 1024 ) {document.write('<link rel="stylesheet" type="text/css" href="800.css">');}

else if (screen.width == 1024) {document.write('<link rel="stylesheet" type="text/css" href="1024.css">');}

else if (screen.width >1024 && screen.width <1280 ) {document.write('<link rel="stylesheet" type="text/css"href="1152.css">');}

else if (screen.width = 1280 && screen.height !== 960 ) {document.write('<link rel="stylesheet" type="text/css" href="1280.css">');}

else if (screen.width = 1280 && screen.height == 960 ) {document.write('<link rel="stylesheet" type="text/css" href="1280X960.css">');}

else {document.write('<link rel="stylesheet" type="text/css" href="1024.css">');}

</script>

esto va a cambiar el archivo css
en el primer caso si el ancho la resolución es menor a 1024
en el segundo si el ancho es igual a 1024
en el tercero si el ancho es mayor a 1024 y menor que 1280
en el cuarto si el ancho es 1280 y el alto 960
y el ultimo si no es ninguno de los anteriores

puedes cambiar los valores como quieras
si no entiendes algo pregunta y tratare de responderte
PD es js
__________________
PD gracias por el karma

Etiquetas: media, screen, fondo
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 21:41.