Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder StealthRT's Avatar
    Join Date
    Aug 2006
    Posts
    187
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Question centering table and images when using ul/li

    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>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</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
    Last edited by StealthRT; 05-26-2009 at 06:55 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •