Align an image in a table at the bottom of the window

[ducey]

Hi,
I'm having a problem trying to get an image in my table to be aligned at the very bottom of the window.

What I want is for my side menu to expand down the page to fill 100% of the height of the window and display an image at the very bottom.

I have tried aligning the last table row and table cell with valign="bottom" but it only aligns the image at the bottom of the cell, and not the bottom of the window.

I have also tried creating a seperate table for just the image to be displayed at the bottom of the window, but it appears on the top right handside of the previous table.

Does anyone know a way to solve this please? I have tried every way I can think of, but I can't get it to work.

Here is some code where I want "bottommenu.gif" to be forced to the bottom of the window:

<?php
include("connection.php");
?>
<!-- left section background -->
<br>
<!-- Table to put sections in -->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="160" bgcolor="#CEDEFF">
<!-- IP Address section with green border, hint of green backgound -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="150" bordercolor="#CCCCCC">
<tr>
<td align="left" valign="top" width="15"><img src="leftcorner.gif"></td>
<td align="center" background="topbg.gif" width="100%"><font color="#FFFFFF"><b>Your IP Address</b></font></td>
<td align="right" valign="top" width="15"><img src="rightcorner.gif"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<?php
$ip = $_SERVER['REMOTE_ADDR'];
echo("<tr>");
echo("<td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"center\" bgcolor=\"#FFFFFF\" width=\"100%\"><font><b><i>$ip</i></b></font></td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("</tr>");
?>
<tr>
<td align="left" valign="top" width="15"><img src="bottombg.gif"></td>
<td align="center" background="bottombg.gif" ></td>
<td align="right" background="bottombg.gif" width="15"></td>
</tr>
</table>
</td>
</tr>
<!--end of IP Addess Section-->
<!-- Now insert a blank space -->
<tr>
<td height="10"></td>
</tr>
<!-- End of blank space -->
<!-- Sub-menu section with green border, hint of green backgound -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="150" bordercolor="#CCCCCC">
<tr>
<td align="left" valign="top" width="15"><img src="leftcorner.gif"></td>
<td align="center" background="topbg.gif"><font color="#FFFFFF"><b>Sub-Menu</b></font></td>
<td align="right" valign="top" width="15"><img src="rightcorner.gif"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF" width="100%"><font><a href="#">Useful Links &amp; Docs</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF" width="100%"><font><a href="#">Corporate</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF" width="100%"><font><a href="#">Travel</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF" width="100%"><font><a href="#">Language Search</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td align="left" valign="top" width="15"><img src="bottombg.gif"></td>
<td align="center" background="bottombg.gif"></td>
<td align="right" background="bottombg.gif" width="15"></td>
</tr>
</table>
</td>
</tr>
<!--end of IP Addess Section-->
<!-- Now insert a blank space -->
<tr>
<td height="10"></td>
</tr>
<!-- End of blank space -->
<!-- Start of News Section -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="150" bordercolor="#CCCCCC">
<tr>
<td align="left" valign="top" width="15"><img src="leftcorner.gif"></td>
<td align="center" background="topbg.gif" width="100%"><font color="#FFFFFF"><b>Latest News</b></font></td>
<td align="right" valign="top" width="15"><img src="rightcorner.gif"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<?php
//get the latest news headlines and display only 5 of them. Also indicate which items are new
$query = "select * from inetnews order by id desc";
$returned = mysql_query($query, $connection);
$rows = mysql_num_rows($returned);
if($rows == 0)
{
echo("<tr><td><font>There are currently no news items</font></td></tr>");
}
else
{
for($i=0;$i<=4;$i++)
{
$array = mysql_fetch_array($returned);
// Get the first 20 chars of the news headline
$news = substr($array[0],0,35);
echo("<tr><td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"left\" bgcolor=\"#FFFFFF\" width=\"100%\"><font>$news... <a href=\"inews/news.php#$array[3]\">more</a></font></td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("</tr>");
echo("<tr>");
echo("<td colspan=\"3\" background=\"divider.gif\" height=\"2\"></td>");
echo("</tr>");
}
}
?>
</table>
</td>
</tr>
<!-- End of News Section -->
<!-- Now insert a blank space -->
<tr>
<td height="10"></td>
</tr>
<!-- End of blank space -->
<!-- Service Status Section -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="150" bordercolor="#CCCCCC">
<tr>
<td align="left" valign="top" width="15"><img src="leftcorner.gif"></td>
<td align="center" background="topbg.gif" width="100%"><font color="#FFFFFF"><b>Service Status</b></font></td>
<td align="right" valign="top" width="15"><img src="rightcorner.gif"></td>
</tr>
<?php
$query = "select * from status";
$returned = mysql_query($query, $connection);
$rows = mysql_num_rows($returned);
if($rows == 0)
{
echo("An error has occured. Please email webmaster@new-tr.wales.nhs.uk");
}
else
{
for($i=0;$i<$rows;$i++)
{
$array = mysql_fetch_array($returned);
echo("<tr><td colspan=\"3\" background=\"divider.gif\" height=\"2\"></td></tr>");
echo("<tr>");
echo("<td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"left\" bgcolor=\"#FFFFFF\" width=\"100%\">");
echo("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\"><tr><td align=\"center\"><font>Email:</font></td><td align=\"right\"><img src=\"images/$array[0].jpg\"></td></tr></table>");
echo("</td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("</tr>");
echo("<tr><td colspan=\"3\" background=\"divider.gif\" height=\"2\"></td></tr>");
echo("<tr>");
echo("<td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"left\" bgcolor=\"#FFFFFF\" width=\"100%\">");
echo("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\"><tr><td align=\"center\"><font>Internet:</font></td><td align=\"right\"><img src=images/" . $array[1] . ".jpg></td></tr></table>");
echo("</td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("</tr>");
echo("<tr><td colspan=\"3\" background=\"divider.gif\" height=\"2\"></td></tr>");
echo("<tr>");
echo("<td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"left\" bgcolor=\"#FFFFFF\" width=\"100%\">");
echo("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\"><tr><td align=\"center\"><font>Login:</font></td><td align=\"right\"><img src=images/" . $array[2] . ".jpg></td></tr></table>");
echo("</td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("</tr>");
echo("<tr><td colspan=\"3\" background=\"divider.gif\" height=\"2\"></td></td></tr>");
echo("<tr>");
echo("<td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"left\" bgcolor=\"#FFFFFF\" width=\"100%\">");
echo("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\"><tr><td align=\"center\"><font>Helpdesk:</font></td><td align=\"right\"><img src=images/" . $array[3] . ".jpg></td></tr></table>");
echo("</td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<tr>");
echo("<tr><td colspan=\"3\" background=\"divider.gif\" height=\"2\"></td></td></tr>");
echo("<tr>");
echo("<td background=\"left.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("<td align=\"left\" bgcolor=\"#FFFFFF\" width=\"100%\">");
echo("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\"><tr><td align=\"center\"><font>PAS:</font></td><td align=\"right\"><img src=images/" . $array[4] . ".jpg></td></tr></table>");
echo("</td>");
echo("<td background=\"right.gif\" bgcolor=\"#FFFFFF\"></td>");
echo("</tr>");
}
}
?>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF" width="100%"><font><a href="index.php?page=servicestatus/status.php">More information</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td align="left" valign="top" width="15"><img src="bottombg.gif"></td>
<td align="center" background="bottombg.gif"></td>
<td align="right" background="bottombg.gif" width="15"></td>
</tr>
</table>
</td>
</tr>
<!-- End of Service Status Section -->
<!-- Now insert a blank space -->
<tr>
<td height="10"></td>
</tr>
<!-- End of blank space -->
<!-- Request form and Feedback form section with green border, hint of green backgound -->
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="150" bordercolor="#CCCCCC">
<tr>
<td align="left" valign="top" width="15"><img src="leftcorner.gif"></td>
<td align="center" background="topbg.gif" width="100%"><font color="#FFFFFF"><b>Feedback Request</b></font></td>
<td align="right" valign="top" width="15"><img src="rightcorner.gif"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF" width="100%"><font><a href="#">Feedback Form</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td colspan="3" background="divider.gif" height="2"></td>
</tr>
<tr>
<td background="left.gif" bgcolor="#FFFFFF"></td>
<td align="center" bgcolor="#FFFFFF"><font><a href="#">Intranet Site Request Form</a></font></td>
<td background="right.gif" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td align="left" valign="top" width="15"><img src="bottombg.gif"></td>
<td align="center" background="bottombg.gif"></td>
<td align="right" background="bottombg.gif" width="15"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom"><img src="bottommenu.gif" width="160" valign="bottom" align="left">
</td>
</tr>
</table>

Many thanks,
Nathan

 

[chessbot]

<tr style="height: 100%;"><td><img src="img.gif"></td></tr>

Try that.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[ducey]

Thanks chessbot, but it didn't work for me
The table row with the height of 100% doesn't go down to the bottom of the window, to fill the space.

Here is a screenshot:

http://www.nathanducey.co.uk/wmob/upload/cornerscreenshot.gif

 

[SPYDERIX]

Ok a few things for you:

- your image problem just set the image as a background image using css to position at the very bottom. Would that be acceptable? Here is the css code if this is what you are looking for:
background-image: url('your_image.gif');
background-repeat: no-repeat;
background-position: bottom left;

- when doing php echos you do not need the brackets:
echo ("some text"); should be echo "some text";

- you do not need to keep opening and closing echos like that one is enough and then just continue your table structure like you normally would and then once everything is done then close the echo

Hope this helps!

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[ducey]

Hi Spyderix, Many thanks for your suggestions and code snippet.
I will follow your advise about the echo tags, thats a much better way of working!
About setting the image as a background though using CSS, it doesn't work for me. If i hardcode the height of the TD tag, for example to 500px, then the image is shown further down the page. But if I set the height to 100%, the image disappears completely!

If you, or anyone else, have any suggestions, I'd be much appreciated
Cheers!

 

[ducey]

I've solved the problem I was having. It was caused by specifying the background colour in a table. So I changed it to white and called my image in at the bottom of the menu and it works a treat.

Thanks everyone for your help, I really appreciate it