centrar imagen a la derecha de la pantalla

pcarvajal · #1 (**permalink**) 09/07/2009, 10:32

El siguiente código me deja una imagen estática alineada justo al lado de la barra de scroll:

Cita:

Lo que no sé es como hacerlo para que independiente de la resolución del navegador esta quede al centro de la pantalla. Se qué la clave debe estar en lo que puse en rojo, pero no se me alumbra como hacerlo :$

Adler · #2 (**permalink**) 09/07/2009, 12:33

Hola

A ver que te parece esto

Código javascript:

Ver originalfunction fixImagen () {
var ancho = parseInt(((screen.width) / 2) - 150); // menos la mitad del width de la imagen
var alto = parseInt(((screen.height) / 2) - 150); // menos la mitad del height de la imagen
var elem = document.getElementById("img");
elem.style.top = alto + "px";
elem.style.left = ancho + "px";
}
window.onload = fixImagen;

y ahora lo metes en un div

Código html:

Ver original<div id="img" style="z-index:9999999; position: fixed !important; position:absolute; top:0; left:0px; _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) : document.body.scrollTop + (document.body.clientHeight-this.clientHeight));cursor:hand;cursor:pointer;">
<a href="#" onclick="javascript:alert('Sign Up');">TEXTO</a>
</div>

Suerte

pcarvajal · #3 (**permalink**) 09/07/2009, 12:56

No no no no no Adler (

)
(Gracias por contestar)

El código que tu has puesto coloca al centro de la pantalla un texto o una imagen.
Lo mío es poner una imagen al lado de la barra de desplazamiento. El código que postié me lo deja al lado de la barra y la imagen no se mueve, independiente de que muevas el scroll. Lo que no sé hacer es "subirla" para que quede a la mitad de la pantalla (por lo mismo puse en rojo el "bottom", a mano podría ponerle una distancia en pixels pero así no se vale, además solo me serviría para la resolución en que estoy trabajando). No sé si me he explicado bien.
Avisame y te traduzco

Adler · #4 (**permalink**) 09/07/2009, 13:50

Hola

Prueba ahora

Código javascript:

Ver originalfunction fixImagen () {
var alto = parseInt(((screen.height) / 2) / 2); // menos la mitad del height de la imagen
var elem = document.getElementById("img");
elem.style.bottom = alto + "px";
}
window.onload = fixImagen;

Código html:

Ver original<div id="img" style="z-index:9999999; position: fixed !important; position:absolute; bottom:0; right:0px; _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight-this.clientHeight) : document.body.scrollTop + (document.body.clientHeight-this.clientHeight));cursor:hand;cursor:pointer;">
<a href="#" onclick="javascript:alert('Sign Up');">IMAGEN</a>
</div>

PD: ¿Consigues fijar la imagen en IE?

Suerte

pcarvajal · #5 (**permalink**) 09/07/2009, 14:03

Mmm, en FF queda fija, pero no al centro, y en IE queda fija pero en la parte de abajo :S

Adler · #6 (**permalink**) 10/07/2009, 05:59

Hola

Después de hacer algunas pruebas, a mi me funciona en FF y IE. En ambos fija y centra la imagen a la derecha

Código javascript:

Ver original<html>
<head>
<style type="text/css">
#fix { z-index:15000;}
body > div#fix { position: fixed; right:0px; bottom:0px;}
</style>
 
<script type="text/javascript">
function fixImagen () {
var alto = parseInt(((screen.height) / 2) / 2); 
var elem = document.getElementById("fix");
elem.style.bottom = alto + "px";
}
window.onload = fixImagen;
</script>
</head>
<body>
 
 
<div id="fix">
<a href="#"><img src="img.gif"/></a>
</div>
 
</body>
</html>

Suerte

pcarvajal · #7 (**permalink**) 10/07/2009, 07:24

Hola Adler

Testié el código en IE 6.0 y FF 3.0
En ambos casos la imagen se alinea a la derecha, pero no totalmente al centro, así que modifiqué esta linea para solucionar eso:

Cita:

var alto = parseInt(((screen.height) / 2) / 1.25);

Ahora con respecto al scroll, en FF no hay problema, pero en IE (ohhh, bendito IE) la imagen se mueve al hacer scroll.

Adler · #8 (**permalink**) 10/07/2009, 12:00

Hola

Yo uso IE8

y FF3 y funciona correctamente

Suerte

PD: ¿Como llegastes a que hay que dividirlo entre 1.25? ¿Es por el tamaño de la imagen?

pcarvajal · #9 (**permalink**) 10/07/2009, 12:30

Hola,
Lo del 1.25 no tiene secreto.. solo me puse a jugar con los numeros mientras estaba a pantalla completa y redimensionaba la pantalla

hasta que cuadró. Muchas gracias por tomarte la molestia de echarme una manito

Saludos!

Adler · #10 (**permalink**) 10/07/2009, 13:46

Hola, otra vez

¿Y si montas un hack para IE 6 y 7?

Código css:

Ver original<!--[if lte IE 7]>
<style type="text/css">
div#fix {
left: expression( ..... + 'px' );
top: expression( .... + 'px' );
}
</style>
<![endif]-->

Suerte