In the HTML below I have two centered tables (irrespective of the width of the screen), one in layer "layertable1" and the other in "layertable2". I make this because I want to put semi transparant imgeas and text in "layertable2" exactly on top of "layertable1". Now the question is: how do I get "layertable2" exactly on top of "layertable1" in such a way that both tables remain centered, whatever the size of the screen. Would this be possible?
This is my HLMT:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
body{margin:0;}-->
</style>
</head>
<body bgcolor="white" text="black">
<div id="layertable1" align="center" style="z-index:1;">
<table border="0" bordercolor="black" width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr height="15%">
<td height="15%" bgcolor="coral" COLSPAN="5" style="border-bottom:solid 6px #000000"> </td>
</tr>
<tr height="70%">
<td align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="violet"> violet</td>
<td align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="pink"> pink</td>
</tr>
<tr height="15%">
<td height="15%" bgcolor="red" COLSPAN="5"></td>
</tr>
</table>
</div>
<div id="layertable1" align="center" style="z-index:2;">
<table border="0" bordercolor="black" width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr height="15%">
<td height="15%" bgcolor="coral" COLSPAN="5" style="border-bottom:solid 6px #000000"> </td>
</tr>
<tr height="70%">
<td colspan="2" align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="violet"> violet</td>
<td align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="pink"> pink</td>
</tr>
<tr height="15%">
<td height="15%" bgcolor="red" COLSPAN="5"></td>
</tr>
</table>
</div>
</body>
</html>
This is my HLMT:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
body{margin:0;}-->
</style>
</head>
<body bgcolor="white" text="black">
<div id="layertable1" align="center" style="z-index:1;">
<table border="0" bordercolor="black" width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr height="15%">
<td height="15%" bgcolor="coral" COLSPAN="5" style="border-bottom:solid 6px #000000"> </td>
</tr>
<tr height="70%">
<td align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="violet"> violet</td>
<td align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="pink"> pink</td>
</tr>
<tr height="15%">
<td height="15%" bgcolor="red" COLSPAN="5"></td>
</tr>
</table>
</div>
<div id="layertable1" align="center" style="z-index:2;">
<table border="0" bordercolor="black" width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
<tr height="15%">
<td height="15%" bgcolor="coral" COLSPAN="5" style="border-bottom:solid 6px #000000"> </td>
</tr>
<tr height="70%">
<td colspan="2" align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="violet"> violet</td>
<td align="center" width="50%" style="border-bottom:solid 6px #000000; border-right:solid 1px #000000" bgcolor="pink"> pink</td>
</tr>
<tr height="15%">
<td height="15%" bgcolor="red" COLSPAN="5"></td>
</tr>
</table>
</div>
</body>
</html>
