JavaScript - AYUDA: centrado dinámico de capa

 
Vista:

AYUDA: centrado dinámico de capa

Publicado por miguel (2 intervenciones) el 27/05/2010 21:01:44
Buenas a todos, y gracias por interesaros por mi post.... bien al temita.

A ver estoy intentando hacer una web y tengo una capa que estará oculta hasta que el usuario la pinche en un determinado link, hasta ahí todo correcto. Quiero que la capa aparezca en el centro del documento (ojo, centro del documento, que no de la pantalla), independientemente de la resolución de pantalla del usuario, o de si tiene el explorador maximizado o no; y ya de paso si puede ser que la capa se vuelva a centrar cada vez que el tamaño del explorador se modifique (de ahí lo de "centrado [i]dinámico[/i]").

Casi he conseguido centrarlo, pero me queda un pelín desplazado... adjunto una imagen para q os hagáis mejor idea del asunto:

[center][img]http://r.i.elhacker.net/cache?url=http://img541.imageshack.us/img541/2664/capao.png[/img][/center]

Las lineas negras indican el centro del documento y el recuadro rojo los bordes de la capa, quiero que el centro de ambos coincida.

Eso lo he conseguido después de googlear bastante y conseguir parir, poco a poco, este código:

[code]<style>
body {
margin: 0;
padding: 0;
}
#centro {
background-color:#FF0;
position: absolute;
left: 50%;
top: 50%;
}
</style>[/code]
Aunque mi idea es utilizar javascript (con jquery mejor :xD)....

¿Alguna idea?
Gracias a todos!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

RE:AYUDA: centrado dinámico de capa

Publicado por ScriptShow (692 intervenciones) el 29/05/2010 15:02:16
Saludos Miguel,

no precisas jquery ni grandes librerías para algo tan sencillo. Veamos:

<style>
#capa {
display:block;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:10px;
border:10px solid #AFAFAF;
background-color:#EFEFEF;
z-index:10;
overflow:auto;
}
</style>
<div id="capa">Esto es un ejemplo de capa centrada ...</div>

En porcentaje es fácil controlar la posición. Con valores fijos, es un poco más complicado: hay que descontar la mitad del valor dado al ancho y alto, con respecto de la posición izquierda y arriba.

Otros ejemplos simples, con algo de JavaScript:

http://www.emanueleferonato.com/downloads/lightbox.html

http://sandbox.leigeber.com/tinybox/

En fin ...

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:AYUDA: centrado dinámico de capa

Publicado por miguel (2 intervenciones) el 02/06/2010 22:56:18
muchas gracias ScriptShow, esto seguramente me sirva... aunque la idea era hacer utilizar una capa en la q no sé las medidas (por eso no usaba porcentajes)
pero muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar