In the HTML below I made a table structure in order to get images in the center of the screen irrespective of the screen resolution of the user. Now I wonder if I could use different layers in the central table cell in order to get images and text above/under each other. For example I would like to have layer1 on top of layer2 instead of the two layers beside each other (as is in the HTML below). But I don't know how to do this. Can anyone help? <br />
<br />
This is the HTML: <br />
<html> <br />
<head> <br />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <br />
<meta name="generator" content="Adobe GoLive 4"> <br />
<style type="text/css"><!-- <br />
#layer1 {z-index: 1 } <br />
#layer2 {z-index: 2 } <br />
--> <br />
</style> <br />
</head> <br />
<br />
<body bgcolor="white" text="black"> <br />
<table border="1" bordercolor="blue" width="100%" height="100%"> <br />
<tr height="10%"> <br />
<td height="10%"> </td> <br />
</tr> <br />
<tr height="80%"> <br />
<td align="center" valign="middle" height="80%"> <br />
<table border="1" bordercolor="red" width="80%" height="100%" cellpadding="0" cellspacing="0"> <br />
<tr> <br />
<td align="center"> <br />
<div id="layer1"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.jpg" width="100" height="100"> <br />
</div> <br />
<div id="layer2"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image2.gif" width="150" height="150"> <br />
</div> <br />
</td> <br />
</tr> <br />
</table> <br />
</td></td> <br />
</tr> <br />
<tr height="10%"> <br />
<td height="10%"> </td> <br />
</tr> <br />
</table> <br />
</body> <br />
</html><!--content-->T'would be easy in pure css. (if you're interested.)<br />
<br />
In a table:<br />
<br />
we'll need to rehash your code slightly.<br />
<br />
td cell to have id=layer1<br />
<br />
#layer1 {background-image:url('image1.jpg');<br />
background-position:center;<br />
background-repeat:no-repeat;}<br />
<br />
Just drop the second pic in the cell as normal.<br />
<br />
ok?<!--content-->If you want them one on top of the other why not just do it in photoshop? Just a sudden thought.<!--content-->The quickest way would be to put a table without a border or padding in the cell. Then use two rows, one above the other.<!--content-->
<br />
This is the HTML: <br />
<html> <br />
<head> <br />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <br />
<meta name="generator" content="Adobe GoLive 4"> <br />
<style type="text/css"><!-- <br />
#layer1 {z-index: 1 } <br />
#layer2 {z-index: 2 } <br />
--> <br />
</style> <br />
</head> <br />
<br />
<body bgcolor="white" text="black"> <br />
<table border="1" bordercolor="blue" width="100%" height="100%"> <br />
<tr height="10%"> <br />
<td height="10%"> </td> <br />
</tr> <br />
<tr height="80%"> <br />
<td align="center" valign="middle" height="80%"> <br />
<table border="1" bordercolor="red" width="80%" height="100%" cellpadding="0" cellspacing="0"> <br />
<tr> <br />
<td align="center"> <br />
<div id="layer1"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image1.jpg" width="100" height="100"> <br />
</div> <br />
<div id="layer2"> <br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"image2.gif" width="150" height="150"> <br />
</div> <br />
</td> <br />
</tr> <br />
</table> <br />
</td></td> <br />
</tr> <br />
<tr height="10%"> <br />
<td height="10%"> </td> <br />
</tr> <br />
</table> <br />
</body> <br />
</html><!--content-->T'would be easy in pure css. (if you're interested.)<br />
<br />
In a table:<br />
<br />
we'll need to rehash your code slightly.<br />
<br />
td cell to have id=layer1<br />
<br />
#layer1 {background-image:url('image1.jpg');<br />
background-position:center;<br />
background-repeat:no-repeat;}<br />
<br />
Just drop the second pic in the cell as normal.<br />
<br />
ok?<!--content-->If you want them one on top of the other why not just do it in photoshop? Just a sudden thought.<!--content-->The quickest way would be to put a table without a border or padding in the cell. Then use two rows, one above the other.<!--content-->