elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  AYUDA: centrado dinámico de capa
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: AYUDA: centrado dinámico de capa  (Leído 2,085 veces)
miguelangelss4

Desconectado Desconectado

Mensajes: 70



Ver Perfil
AYUDA: centrado dinámico de capa
« en: 26 Mayo 2010, 22:20 pm »

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 dinámico").

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


*****EDITO******* 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:

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

¿Alguna idea?
Gracias a todos!!


« Última modificación: 26 Mayo 2010, 22:47 pm por miguelangelss4 » En línea

Mr. Crowley


Desconectado Desconectado

Mensajes: 343


Costa Rica


Ver Perfil WWW
Re: AYUDA: centrado dinámico de capa
« Respuesta #1 en: 5 Junio 2010, 00:44 am »

Es esto?

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#divCapa{
position:absolute;
width:400px;
height:200px;
background:#000;
left:50%;
margin-left:-200px; /* la mitad del width en negativo */
top:50%;
margin-top:-100px; /* la mitad del height en negativo */
color:#fff;
}
</style>
</head>

<body>
<div id="divCapa">
Hola mundo
</div>
</body>
</html>


En línea

Mi blog personal: www.calirojas.com
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Ayuda] ReadProcessMemory Address Dinamico
.NET (C#, VB.NET, ASP)
.mokk. 4 6,840 Último mensaje 18 Marzo 2014, 00:30 am
por Eleкtro
Centrado VERTICAL de elementos mediante CSS
Desarrollo Web
|Miguel| 0 1,353 Último mensaje 21 Marzo 2012, 18:56 pm
por |Miguel|
Centrado de posicion central en imagen
Programación C/C++
aguml 0 1,462 Último mensaje 8 Junio 2013, 14:57 pm
por aguml
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines