If you run this html page, you will find out that the left table is overlapping the header titled "Top Bar"
I would like the left table to have the same height as the right.
In other words, I want the white table header with the title "Top Bar" above to sit on top of the left table just like it is sitting on top of the right table.
Also, the the title , "Top Bar" needs to be aligned to the middle.
I can't make that happen.
Please help me urgently!
this is the entire html code:
<html>
<head>
<title>Page Design</title>
<meta name="keywords" content="This one page design contains a link to Administration Services, Water Services and Transportation Services">
<meta name="description" content="You will optionally be linked to our portal site and to Public Works site.">
<meta name="ROBOTS" content = "All">
<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" link="0000ff" vlink="#0000ff">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="765" height="508">
<tr>
<td width="183" bgcolor="IndianRED" rowspan="5" valign="top"><br>
<br>
<br>
<br>
<br>
<br>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="160">
<tr>
<td width="100%"><b><font face="Arial" size="3" color="#FFFFFF">Water Services<br>
<font><font face="arial" size="2" color="#FFFFFF"><br><br>
</font><a href="Link1.htm"><font face="Arial" size="3" color="#FFFF00">Link to a page!<br>
</font></a>
<a href=" face="Arial" size="3" color="#FFFF00">Link To a page</font></a></b></td>
</tr>
</table>
</div>
</td>
<td width="582" valign="middle" height="50" colspan="2" bgcolor="floralwhite">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="5"></td>
<td width="21%"><font face="arial" size="2"><b>Top Bar</b></font></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="582" valign="top" height="42" colspan="2" bgcolor="darkslateGray"> </td>
</tr>
<tr>
<td width="369" valign="top" height="217" bgcolor="Azure1">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%"><br>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" align="center"><b>
<font face="Arial" size="5" color="#930303">
Public Web Site! </font></b></td>
</tr>
</table>
</div>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%"><br><center><a href=" onclick="NewWindow(this.href,'name','430','230','no');return false"><img border="0" src="there.gif" width="110" height="34"></a><b><font face="Arial" size="3" color="#000000">
<br><br>
<a href=" To Portal Site</a><br>
</font></b></center></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td width="213" valign="top" height="416" bgcolor="slateBLUE" rowspan="3"> </td>
</tr>
<tr>
<td width="369" valign="top" height="27" background="admin.gif">
</td>
</tr>
<tr>
<td width="369" valign="top" height="172" background="map4b.gif">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="365" valign="middle" height="20">
<tr>
<td width="204" bgcolor="#C61B1B" align="left" valign="middle"> </td>
<td width="157" bgcolor="#C61B1B" align="left" valign="middle"> </td>
</tr>
</table>
</center>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="95%" height="135">
<tr>
<td width="50%"><a href="Link1.htm"><img border="0" src="blank.gif" width="160" height="116"></a></td>
<td width="50%" valign="middle"><font face="arial" size="2" color="#930303"><b><a href="Link1.htm">Navigation1</a></b></font><font face="arial" size="1"><br>
This link takes you to page1 !! </font></td>
</tr>
<tr>
<td width="50%"><a href="Link2.htm"><img border="0" src="blank.gif" width="160" height="116"></a></td>
<td width="50%" valign="middle"><font face="arial" size="2" color="#930303"><b><a href="Link1.htm">Navigation2</a></b></font><font face="arial" size="1"><br>
This takes you to the second page!! </font></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="765" height="25">
<tr>
<td width="100%" bgcolor="#720808" valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="761">
<tr>
<td width="100%" height="21" bgcolor="#FFFFFF" align="center"><font face="arial" size="1">©Copyright
2002 Public Games</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
I would like the left table to have the same height as the right.
In other words, I want the white table header with the title "Top Bar" above to sit on top of the left table just like it is sitting on top of the right table.
Also, the the title , "Top Bar" needs to be aligned to the middle.
I can't make that happen.
Please help me urgently!
this is the entire html code:
<html>
<head>
<title>Page Design</title>
<meta name="keywords" content="This one page design contains a link to Administration Services, Water Services and Transportation Services">
<meta name="description" content="You will optionally be linked to our portal site and to Public Works site.">
<meta name="ROBOTS" content = "All">
<script language="javascript">
var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0" link="0000ff" vlink="#0000ff">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="765" height="508">
<tr>
<td width="183" bgcolor="IndianRED" rowspan="5" valign="top"><br>
<br>
<br>
<br>
<br>
<br>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="160">
<tr>
<td width="100%"><b><font face="Arial" size="3" color="#FFFFFF">Water Services<br>
<font><font face="arial" size="2" color="#FFFFFF"><br><br>
</font><a href="Link1.htm"><font face="Arial" size="3" color="#FFFF00">Link to a page!<br>
</font></a>
<a href=" face="Arial" size="3" color="#FFFF00">Link To a page</font></a></b></td>
</tr>
</table>
</div>
</td>
<td width="582" valign="middle" height="50" colspan="2" bgcolor="floralwhite">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="5"></td>
<td width="21%"><font face="arial" size="2"><b>Top Bar</b></font></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="582" valign="top" height="42" colspan="2" bgcolor="darkslateGray"> </td>
</tr>
<tr>
<td width="369" valign="top" height="217" bgcolor="Azure1">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%"><br>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" align="center"><b>
<font face="Arial" size="5" color="#930303">
Public Web Site! </font></b></td>
</tr>
</table>
</div>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%"><br><center><a href=" onclick="NewWindow(this.href,'name','430','230','no');return false"><img border="0" src="there.gif" width="110" height="34"></a><b><font face="Arial" size="3" color="#000000">
<br><br>
<a href=" To Portal Site</a><br>
</font></b></center></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
<td width="213" valign="top" height="416" bgcolor="slateBLUE" rowspan="3"> </td>
</tr>
<tr>
<td width="369" valign="top" height="27" background="admin.gif">
</td>
</tr>
<tr>
<td width="369" valign="top" height="172" background="map4b.gif">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="365" valign="middle" height="20">
<tr>
<td width="204" bgcolor="#C61B1B" align="left" valign="middle"> </td>
<td width="157" bgcolor="#C61B1B" align="left" valign="middle"> </td>
</tr>
</table>
</center>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="95%" height="135">
<tr>
<td width="50%"><a href="Link1.htm"><img border="0" src="blank.gif" width="160" height="116"></a></td>
<td width="50%" valign="middle"><font face="arial" size="2" color="#930303"><b><a href="Link1.htm">Navigation1</a></b></font><font face="arial" size="1"><br>
This link takes you to page1 !! </font></td>
</tr>
<tr>
<td width="50%"><a href="Link2.htm"><img border="0" src="blank.gif" width="160" height="116"></a></td>
<td width="50%" valign="middle"><font face="arial" size="2" color="#930303"><b><a href="Link1.htm">Navigation2</a></b></font><font face="arial" size="1"><br>
This takes you to the second page!! </font></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="765" height="25">
<tr>
<td width="100%" bgcolor="#720808" valign="middle" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="761">
<tr>
<td width="100%" height="21" bgcolor="#FFFFFF" align="center"><font face="arial" size="1">©Copyright
2002 Public Games</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>