Hola Zertiko
El problema que estás teniendo, es muy comun en el posicionamiento de capas... y mas teniendo en cuenta que la capa tenga que formar parte de un diseño al pixel.
La unica manera (por lo menos que yo nozca) para posicionar capas de esta manera, es por medio de Javascript.
Te he preparado una función muy muy sencilla, la cual, va comentada.
A continuación te la dejo
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Capa colocada SIEMPRE en su sitio</title>
<script language="JavaScript1.2" type="text/javascript">
onload = function()
{
// cuando cargue la página, colocamos la capa
recolocarCapa();
}
onresize = function()
{
// cuando se redimensione la página, colocamos la capa.
recolocarCapa();
}
// Función para recolocar la capa
function recolocarCapa()
{
// Capturamos el Objeto que es nuestra capa
var laCapa = document.getElementById("miCapa");
// Calculamos que proporciones tiene la ventana que tenemos abierta.
var anchoNavegador = document.body.clientWidth;
var altoNavegador = document.body.clientHeight;
// Posicionamos la capa
// Las restas que se hacen, solo tienes que jugar con ellas hasta que inicialmente consigas posicionar la capa en el lugar adecuado. A partir de hay, lo tendrás para todo navegador y resolución
var posicionXCapa = (anchoNavegador/2) + 100;
var posicionYCapa = (altoNavegador/2) -10;
// Asignamos a la capa las posiciones calculadas
laCapa.style.left = posicionXCapa;
laCapa.style.top = posicionYCapa;
}
</script>
</head>
<body style="margin:0px">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
<tr>
<td style="width:100%;height:100%" align="center" valign="middle" class="sp">
<table cellpadding="0" cellspacing="0" style="width:200;height:20" border="0">
<tr>
<td width="200" height="20" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;font-weight:bold;color: #EFEFEF;background-color:red" align="center">Este es mi texto</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="miCapa" style="position:absolute; left:100px; top:100px; width:300; height:200; z-index:1;border: 1px solid Red;">
<table cellpadding="0" cellspacing="0" style="width:300px;height:20px" border="0">
<tr>
<td width="300" height="19" style="font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 10px;font-weight:bold;color: #EFEFEF;background-color:green" align="right">Este es el otro Texto</td>
</tr>
</table>
</div>
</body>
</html>
Te señalo un par de cosas:
Lo primero, es que está puesta la función, en la carga del documento (
onload = function ... ) y en el
resize de la ventana (para que si varias el tamaño de la ventana, la capa se posicione donde debe de estar).
El segundo punto que he de señalarte, y que es el motor de esta función, es lo siguiente...
var posicionXCapa = (anchoNavegador/2) + 100;
var posicionYCapa = (altoNavegador/2) -10;
Esas dos variables, les sumamos y restamos dos valores (100 y 10, en ESTE ejemplo).
Con estos dos valores son con los que tienes que jugar tú para posicionar tu capa.
Todo se mueve respecto el centro de la pantalla (lo usamos como eje cartesiano de posicionamiento).
Si quieres que tu capa aparezca a la izquierda, a la posicionXCapa, tendrás que restarle una gran cantidad de unidades...
Si quieres que la capa aparezca muy abajo de la ventana, a la posicionYCapa, tendrás que sumarle una gran cantidad de unidades...
Esto ya, es que juegues tu a sumarle y restarle valores.
Si tienes alguna duda, no dudes en decirme algo.
Un saludo, y espero que te sea util.
