Aún no me quedan claras algunas cosas. Cómo si es una sola celda, si la capa debe "cubrir" lo que tenga debajo o empujarlo, si al acomodarse puede desplazar a la celda y así quedar todo centrado verticalmente...
Seguramente lo estás probando en
IE, por eso no te funciona. Seguramente también hay alguna manera de acomodarlo. Pero habrá que reescribirlo y para eso tienes que saber exactamente lo que quieres.
Como comentario adicional, tuve que corregirte algunas 'falta de comillas' y agregué el botón que está debajo de la tabla. Ahora funciona ... en
Mozilla.
Lo de la posición relativa no afecta los bordes. Como sugerencia final, podrías usar dos filas-celdas, la del contenido de la capa debajo, y hacerla aparecer y desaparecer; va a empujar lo que esté más abajo o reubicar la celda de arriba si lo centras todo verticalmente. Pero insisto en que olvidaste mencionar cómo quieres que se comporte.
Código:
<html>
<head>
<title>Probando a crear cosas con DHTML</title>
<script language="JavaScript1.2" type="text/javascript">
function crearCosas()
{
var tablaGeneral = document.createElement("table");
tablaGeneral.cellPadding = 0;
tablaGeneral.cellSpacing = 0;
tablaGeneral.width = "200px";
tablaGeneral.height = "25px";
tablaGeneral.border = 0;
// Creamos un TR
var trGeneral = document.createElement("tr");
// Creamos el TD
var tdGeneral = document.createElement("td");
tdGeneral.id = "tdContent";
tdGeneral.width = tablaGeneral.width;
tdGeneral.height = tablaGeneral.height;
tdGeneral.style.backgroundColor = "Red";
tdGeneral.style.border = "solid";
tdGeneral.style.borderWidth = "1px";
tdGeneral.innerHTML = "Este es el TD";
// Creamos una capa con texto, la cual se tiene que situar DEBAJO del TD creado
var capaPaDebajo = document.createElement("div");
capaPaDebajo.id = "divContent";
capaPaDebajo.style.visibility = "visible";
capaPaDebajo.style.position = "absolute";
capaPaDebajo.style.overflow = "visible";
capaPaDebajo.style.borderWidth = 0;
capaPaDebajo.style.borderStyle = "solid";
capaPaDebajo.style.borderColor = "Blue";
capaPaDebajo.style.backgroundColor = "#00FF00";
capaPaDebajo.innerHTML = "Esta capa tendría que quedar DEBAJO del TD.<br><br>No vale con posición RELATIVA porque el TD se estiran sus bordes y no es la finalidad";
capaPaDebajo.style.width = tablaGeneral.width;
capaPaDebajo.style.height = tablaGeneral.width;
// Voy añadiendo la jerarquía de elementos
tdGeneral.appendChild(capaPaDebajo);
trGeneral.appendChild(tdGeneral);
tablaGeneral.appendChild(trGeneral);
// Finalmente. añado el elemento PRINCIPAL al documento
document.getElementById("contenedor").appendChild(tablaGeneral);
document.getElementById("contenedor").innerHTML = document.getElementById("contenedor").innerHTML; // Si no pongo esta línea, no me crea bien el TD
}
function muestra(T){
var laCapa = document.getElementById("divContent");
if(laCapa.style.display == "block"){
laCapa.style.display = "none";
T.value = "+";
}
else{
laCapa.style.display = "block";
T.value = "-";
}
}
</script>
<style>
#divContent{display:none; }
</style>
</head>
<body style="margin:0px">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="1">
<tr>
<td style="width:100%;height:100%; " align="center" valign="middle" id="contenedor">
<script language="JavaScript1.2" type="text/javascript">crearCosas();</script>
</td>
</tr>
</table>
<input type="button" value="+" onclick="muestra(this)" />
<br /><br />
</body>
</html>
espero que algo te sirva.
Saludos
furoya