Posicion capa respecto a la ventana

manolo_manolo · #1 (**permalink**) 07/05/2009, 17:56

Buenas queria asignarle las coordenadas a unas imágenes que se muestran con capas.

<STYLE>
.mostrar {visibility:visible; position:absolute; top:150px; left:350px}
.ocultar {visibility:hidden; position:absolute; top:150px; left:350px}
</STYLE>

Lo que quiero es darle las coordenadas top y left pero con respecto a la ventana, no al documento. Para que por mucho que muevan el scroll del raton arriba como abajo se muestre la imágen siempre en la misma posición. No sé si me explico...

Gracias!!

ArturoGallegos · #2 (**permalink**) 07/05/2009, 18:12

cambia tu position:absolute; por position:fixed;

manolo_manolo · #3 (**permalink**) 07/05/2009, 20:10

Hola Ag666, muchas gracias por responder, cambié ABSOLUTE por FIXED, pero me sigue haciendo lo mismo. Si me muevo de arriba a bajo no la muestra en relacion a la ventana.

¿Hay alguna otra solucion? Gracias

ArturoGallegos · #4 (**permalink**) 07/05/2009, 23:22

Ok carnal solo me queda pensar en que tengas alguna otra instrucción que anule el fixed en tus imágenes, podrías mostrar tu código completo o tu sitio?

en dado caso te dejo este código como ejemplo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <style>
  body{height:2000px;}
  .fixed{visibility:visible; position:fixed; top:150px; left:350px;}
  </style>
 </head>
 <body>
<img src="http://ag.wsimarketing.info/img/img005.jpg" class="fixed" />
 </body>
</html>

manolo_manolo · #5 (**permalink**) 08/05/2009, 03:11

Hola de nuevo Ag666, lo he vuelto a intentar pero nada, te dejo el código de la prueba que estoy haciendo para que lo veas.

Código HTML:

<HTML><HEAD>
<title>Prueba</title>
<STYLE>
    .mostrar {visibility:visible; position:fixed; top:333px; left:321px}
    .ocultar {visibility:hidden; position:fixed; top:333px; left:321px}
</STYLE>
</HEAD>
<BODY> 

<DIV style="visibility:hidden; position:fixed; left:333px; top: 321px; z-index:1">
<img id="demo" src="imagen.jpg">
</DIV> 

<P onmouseover="demo.className='mostrar'" onmouseout="demo.className='ocultar'">- Imagen -</P>
<br><br><br><br><br><br><br><br><br>
<P onmouseover="demo.className='mostrar'" onmouseout="demo.className='ocultar'">- Imagen -</P>
<br><br><br><br><br><br><br><br><br>
<P onmouseover="demo.className='mostrar'" onmouseout="demo.className='ocultar'">- Imagen -</P>
<br><br><br><br><br><br><br><br><br>
<P onmouseover="demo.className='mostrar'" onmouseout="demo.className='ocultar'">- Imagen -</P>
<br><br><br><br><br><br><br><br><br>
<P onmouseover="demo.className='mostrar'" onmouseout="demo.className='ocultar'">- Imagen -</P>
</BODY>
</HTML>

Mil gracias por la ayuda compi

nflamel · #6 (**permalink**) 08/05/2009, 03:18

Cita:

Iniciado por manolo_manolo

Buenas queria asignarle las coordenadas a unas imágenes que se muestran con capas.

<STYLE>
.mostrar {visibility:visible; position:absolute; top:150px; left:350px}
.ocultar {visibility:hidden; position:absolute; top:150px; left:350px}
</STYLE>

Lo que quiero es darle las coordenadas top y left pero con respecto a la ventana, no al documento. Para que por mucho que muevan el scroll del raton arriba como abajo se muestre la imágen siempre en la misma posición. No sé si me explico...

Gracias!!

De qué navegador estamos hablando?

kseso? · #7 (**permalink**) 08/05/2009, 04:40

Creo que primero deberías comprender las propiedades y características de las diferentes "posiciones" y respecto a quién o qué toma la referencia.

Mira este Aporte: pequeña guía de migración a XHTML+CSS de Mikmoro. Creo que te resultará útil.

ArturoGallegos · #8 (**permalink**) 08/05/2009, 11:13

independientemente del explorador mi apreciado nflamel, ya viendo el código de nuestro amigo fue fácil determinar su problema y creo que en esta semana es la segunda vez que veo preguntan y es este error jaja.

bueno manolo_manolo tu problema no esta en la propiedad que usas jeje el fixed esta funcionando bien... tu error esta en no especificar la codificación del tu documento

reemplaza en tu documento las primeras dos lineas por estas

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>

con eso funcionara, como otro consejo corrige los errores de sintaxis,
los <br> deben ser <br /> el <STYLE> es <style type="text/css">

y bueno ya debes saber que mas jejej

manolo_manolo · #9 (**permalink**) 08/05/2009, 13:00

ufff, cierto era eso! gracias compi!! Todo me pasa por haberlo hecho deprisa y corriendo, era una prueba, para luego implementarla en una web. Por eso estaban las etiquetas no muy bien escritas como <br> y <style> a secas.

De todas formas gracias por la solución porque no habría caido que la codificación hiciera falta si o si para una pequeña prueba. Ya no se me olvidará

.

Gracias a todos!

P.D. kseso?, me leeré el articulo enterito enterito, me interesa bastante la conversión. Gracias también.

ssclamp · #10 (**permalink**) 08/05/2009, 18:56

Conviene recordar que no la propiedad fixed no funciona en iexplorer 6 (y que quedan aún muchos usuarios con ese navegador).

Saludos

manolo_manolo · #11 (**permalink**) 09/05/2009, 10:29

Ostras... eso no lo sabía yo...

El usuario que tenga IE6 que le pasará?? Le saldrá algún error? o simplemente no le funcionará y no se dará cuenta?

willyfc · #12 (**permalink**) 09/05/2009, 13:00

si vas a utilizar fixed, tendrás que utilizar algo que corrige los bugs de IE6 o hackear tu web, o hay otra solución:

1.- Solo con CSS, un ejemplo de Mik.
2.- IE7 --> Corrige los bugs de IE6, en ese vínculo esta la documentación de como utilizarlo(no estoy seguro si corrige esto pero podrías probarlo.
3.-hackear, no recomendado ya que tu web no validará.Encontrarás muchas soluciones de esta manera o con javascript simplemente googleando.