Hey all i am having the hardest time getting these things to work. I am trying to center both images in the middle of the page and also the table behind them. This is my code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://www.incg.nl/blog/2008/hover-block-jquery/example/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul.hover_block li').hover(function(){
$(this).find('#kdaaTop').animate({top:'-182px'},{queue:false,duration:500});
$(this).find('#kdaaBottom').animate({top:'182px'},{queue:false,duration:500});
}, function(){
$(this).find('#kdaaTop').animate({top:'0px'},{queue:false,duration:500});
$(this).find('#kdaaBottom').animate({top:'0px'},{queue:false,duration:500});
});
});
</script>
<style media="screen">
body { background: #666; }
ul.hover_block { overflow: hidden; text-align:center; list-style:none; display:block ; margin:0px; list-style-type:none; }
ul.hover_block li {list-style:none; width:100%; position: relative; display: block; margin-left: auto; margin-right: auto; z-index:100;}
ul.hover_block li a {display: block;position: relative;overflow: hidden;height: 300px;width: 100%;padding: 0px;}
ul.hover_block li a { text-decoration: none; }
img.kdaaTop {position:absolute; top: 0; left: 0;border: 0;display: block;margin-left: 50%;}
img.kdaaBottom {position:absolute;top: 0;left: 0;border: 0;display: block; margin-left: 50%;}
#theOptions {position:absolute; width:100%; height:600px;z-index:-1;display:block;text-align:center;}
</style>
</head>
<body class="center">
<ul class="hover_block">
<li>
<div id="theOptions">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left">test</td>
<td align="center">asdf</td>
<td align="right">test</td>
</tr>
<tr>
<td align="left">test</td>
<td align="center">asdf</td>
<td align="right">test</td>
</tr>
</table>
<p>Testing this all out<img src="file:///C|/kappadelta/save.png" alt="" width="16" height="16" /></p>
</div>
<a><img src="file:///C|/kappadelta/KAtop.jpg" width="700" height="300" alt="" class="kdaaTop" id="kdaaTop"/></a><a><img src="file:///C|/kappadelta/KAbottom.jpg" alt="" width="700" height="300" class="kdaaBottom" id="kdaaBottom" /></a>
</li>
</ul>
<SCRIPT LANGUAGE=javascript>var xy = navigator.appVersion;xz = xy.substring(0,4);document.write('<B> ',screen.width,' x ',screen.height,'</B>---------------------------------------------------------------------------------------')</SCRIPT>
</body>
</html>
And here is an image of what it looks like..
Any help would be great!
David
Before you post, read our: 
centering table and images when using ul/li
