I've got a site that I want centered in the browser.
I've got most of my info in a table but also have layers as well. If I left align the table everything stays in the right place when it's in the browser. If I centre the table, when the page is dragged larger in the browser, the table moves whereas the layers don't therefore the elements of the page aren't where they need to be.
I really want this to be centered in the browser as it would look much better.
Does anyone know how I can resolve this issue?
Here's the code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:298px;
top:382px;
width:464px;
height:116px;
z-index:1;
}
body {
background-image: url(images/starsglow.gif);
background-repeat: repeat;
margin-left: 0%;
margin-right: 0%;
}
#frametext {
position:absolute;
left:144px;
top:427px;
width:602px;
height:202px;
z-index:1;
}
.style1 {color: #FF00FF}
-->
</style>
</head>
<body><div id="centerbox">
<div class="style1" id="frametext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nunc mi, malesuada sed, elementum id, dictum eu, neque. Mauris in metus. In hac habitasse platea dictumst. Vivamus a dui et nunc consectetuer nonummy. Curabitur ac justo nec sem porttitor semper. Nam porttitor eleifend est. Proin eget libero id leo porta cursus. Vestibulum tincidunt, erat vitae porttitor euismod, sem purus sollicitudin pede, ac aliquam enim nunc nec turpis. Pellentesque sed lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nunc mi, malesuada sed, elementum id, dictum eu, neque. Mauris in metus. In hac habitasse platea dictumst. Vivamus a dui et nunc consectetuer nonummy. Curabitur ac justo nec sem porttitor semper. </div>
<table width="1100" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="100%"><div align="center"><img src="images/masthead.png" alt="masthead" width="1045" height="179" /></div></td>
</tr>
<tr>
<td height="75"><div align="center"><img src="images/navmenu.png" alt="navmenu" width="881" height="30" /></div></td>
</tr>
<tr>
<td height="500"><div align="center"><img src="images/frame.png" alt="framealien" width="887" height="300" /></div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
I've got most of my info in a table but also have layers as well. If I left align the table everything stays in the right place when it's in the browser. If I centre the table, when the page is dragged larger in the browser, the table moves whereas the layers don't therefore the elements of the page aren't where they need to be.
I really want this to be centered in the browser as it would look much better.
Does anyone know how I can resolve this issue?
Here's the code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:298px;
top:382px;
width:464px;
height:116px;
z-index:1;
}
body {
background-image: url(images/starsglow.gif);
background-repeat: repeat;
margin-left: 0%;
margin-right: 0%;
}
#frametext {
position:absolute;
left:144px;
top:427px;
width:602px;
height:202px;
z-index:1;
}
.style1 {color: #FF00FF}
-->
</style>
</head>
<body><div id="centerbox">
<div class="style1" id="frametext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nunc mi, malesuada sed, elementum id, dictum eu, neque. Mauris in metus. In hac habitasse platea dictumst. Vivamus a dui et nunc consectetuer nonummy. Curabitur ac justo nec sem porttitor semper. Nam porttitor eleifend est. Proin eget libero id leo porta cursus. Vestibulum tincidunt, erat vitae porttitor euismod, sem purus sollicitudin pede, ac aliquam enim nunc nec turpis. Pellentesque sed lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum nunc mi, malesuada sed, elementum id, dictum eu, neque. Mauris in metus. In hac habitasse platea dictumst. Vivamus a dui et nunc consectetuer nonummy. Curabitur ac justo nec sem porttitor semper. </div>
<table width="1100" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="100%"><div align="center"><img src="images/masthead.png" alt="masthead" width="1045" height="179" /></div></td>
</tr>
<tr>
<td height="75"><div align="center"><img src="images/navmenu.png" alt="navmenu" width="881" height="30" /></div></td>
</tr>
<tr>
<td height="500"><div align="center"><img src="images/frame.png" alt="framealien" width="887" height="300" /></div></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
