In my design there will have 2 layer,
Layer 1 will running the fadeimage script, to make it as background image keep changing. i set the position as absolute.
Layer 2 will be the text contain area, which will on top of the layer 1. i set the position as relative because i want it stay on the same position in difference resolution screen.
I would like the layout as centering.
So i try with the 1280 x 1024 screen, it display keep on left.
After that i try to use the text-align: center and table td align center, but it display keep on right. it just can't align to center.
is there any script can make this display on center?
The 2 layer CSS code:
CODE
<style type="text/css">
#Layer2 {
position: relative;
width:736px;
height:643px;
left: 220px;
top: 140px;
z-index:2;
}
#Layer1 {
position: absolute;
top: 0px;
height:800px;
width:1000px;
z-index:1;
}
</style>
The HTML contain code:
CODE
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer1">
<table width="1000" border="0" height="800" cellpadding="0" cellspacing="0" >
<tr>
<td width="1000" height="484" colspan="3">
<script type="text/javascript">
//Image fadeshow
new fadeshow(fadeimages2, 1000, 484, 0, 3000, 0)
</script></td>
</tr>
<tr>
<td width="1000" height="316" colspan="3" style=" padding-bottom:5px; background-image:url(images/bg_bottom.png); background-position:bottom; background-repeat:no-repeat;" valign="bottom" align="center">
<a href="" class="bottommenu">HOME</a> l <a href="" class="bottommenu">ABOUT US</a> l <a href="" class="bottommenu">OUR PRODUCTS</a> l <a href="" class="bottommenu">OUR SERVICES</a> l <a href="" class="bottommenu">PORTFOLIOS</a> l <a href="" class="bottommenu">CONTACT US</a> l <a href="" class="bottommenu">RECOMMEND US</a> l <a href="" class="bottommenu">BOOKMARK US</a><br>
<div class="copyright">Copyrighted 2008 All Rights Reserved</div></td>
</tr>
</table>
</div>
<div id="Layer2">
<table width="736" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" id="topmenu" height="59">
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><a href="" class="topmenu">HOME</a></td>
<td width="1" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td align="center" valign="middle"><a href="" class="topmenu">ABOUT US</a></td>
<td width="1" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td align="center" valign="middle"><a href="" class="topmenu">OUR PRODUCT</a></td>
<td width="1" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td align="center" valign="middle"><a href="" class="topmenu">OUR SERVICES</a></td>
<td width="1" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td align="center" valign="middle"><a href="" class="topmenu">PORTFOLIOS</a></td>
<td width="1" align="center" valign="middle" bgcolor="#FFFFFF"> </td>
<td align="center" valign="middle"><a href="" class="topmenu">CONTATC US</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="736" height="250" colspan="2" valign="top" id="topcontent">123</td>
</tr>
<tr>
<td width="402" height="309" valign="top" id="leftcontent" >12</td>
<td width="334" height="309" valign="top" id="rightcontent">123</td>
</tr>
</table>
</div>
</body>
</html>
4 Jul, 2008 - 02:35 AM
| 