Foros del Web » Creando para Internet » CSS »

Posicion capa respecto a la ventana

Estas en el tema de Posicion capa respecto a la ventana en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 07/05/2009, 18:56
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Posicion capa respecto a la ventana

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!!
  #2 (permalink)  
Antiguo 07/05/2009, 19:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Posicion capa respecto a la ventana

cambia tu position:absolute; por position:fixed;
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 07/05/2009, 21:10
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Posicion capa respecto a la ventana

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
  #4 (permalink)  
Antiguo 08/05/2009, 00:22
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Posicion capa respecto a la ventana

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> 
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 08/05/2009, 04:11
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Posicion capa respecto a la ventana

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
  #6 (permalink)  
Antiguo 08/05/2009, 04:18
Avatar de nflamel  
Fecha de Ingreso: agosto-2005
Ubicación: Granada
Mensajes: 41
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Posicion capa respecto a la ventana

Cita:
Iniciado por manolo_manolo Ver Mensaje
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?
  #7 (permalink)  
Antiguo 08/05/2009, 05:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicion capa respecto a la ventana

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 08/05/2009, 12:13
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Posicion capa respecto a la ventana

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 08/05/2009, 14:00
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Posicion capa respecto a la ventana

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.

  #10 (permalink)  
Antiguo 08/05/2009, 19:56
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Posicion capa respecto a la ventana

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

Saludos
  #11 (permalink)  
Antiguo 09/05/2009, 11:29
 
Fecha de Ingreso: octubre-2008
Ubicación: Alicante
Mensajes: 337
Antigüedad: 9 años, 1 mes
Puntos: 9
Respuesta: Posicion capa respecto a la ventana

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?
  #12 (permalink)  
Antiguo 09/05/2009, 14:00
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Posicion capa respecto a la ventana

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.
__________________
WFC
codigo82
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 11:48.