HTML tables + CSS?

I'm using CSS to apply several background images to a webpage. The problem I'm facing is that I also need a table to be fixed in the middle-center of a page. When I try and do this the HTML generates a page where the background images are displayed correctly at the top, however I have to scroll down to reach the table (which is completely out of view). Another problem I'm facing is that when I scroll down to see the table it covers up several of my background images.

Can someone give me any tips on how to fix a table to the middle-center of a page without it covering up my images?

The code I have so fare is this:

CSS:


body { 
 background-color: fcfcfe;
 background-image: url('gradient.png');
 background-repeat: repeat-x;
 background-position: bottom center;
 background-attachment: fixed;
 margin:0;
 padding:0;
 height:100%; 
 }div#awesome {
 background-image:url("thing.png");
 background-repeat:no-repeat;
 background-position: 0% 100%;
 background-attachment: fixed;
 height:100%;
 }
div#t-logo {
 background-image:url("logo.png");
 background-repeat:no-repeat;
 background-position: top right;
 background-attachment:fixed;
 height:100%;
 }span {
 display:none;
 }

HTML:


<html>
<head>
 <title>gradient test</title>
 <LINK REL=StyleSheet HREF="blah.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td align="center" valign="middle">
<table border="0" cellspacing="1" cellpadding="2" bgcolor="black" height="0%">
<tr>
<td width="750" height="541"></a></td>
</tr>
</table>
</td>
</tr>
 <div id="awesome">
  <span>awesome industries</span>
 <div id="t-logo">
  <span>awesome industries</span>
 </div>
</body>
</html>

div#awesome and div#t-logo are the only images that get covered up. My gradient seems to display fine even with the table covering it.

Thanks in advance

HTML tables + CSS?

gentoolicious

Frangal

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week