Table Coding?, Having some trouble getting this to work. Options

[fainaru]

I'm only posting this because I've spent over 2 days trying to get this to work. I can't seem to make my BG repeat and have the footer images get be placed where they're supposed to.

The code for the index:

CODE

<link rel="stylesheet" type="text/css" href="v2style.css">

<table border="0" cellpadding="0" cellspacing="0" width="760" height="100%" align="center" id="bg">
<tr><td id="top_01"></td></tr>
<tr><td id="top_02">
<a href="index.php">Index</a> -
<a href="about.php">About</a> -
<a href="contact.php">Contact</a> -
<a href="credits.php">Credits</a> -
<a href="portfolio.php">Portfolio</a> -
<a href="textures.php">Textures</a> -
<a href="plugboard.php">Plugboard</a> -
<a href="links.php">Links In/Out</a>
</td></tr>
<tr><td id="image"></td></tr>
<tr><td class="navigation">
<h1>Navigation</h1>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>
<a href="">Hi</a><br>

</td></tr>

<td class="center"></td>
<tr><td class="content">
<h1>Content</h1>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>
Hi<br>

</tr></td>

<tr><td id="bottom_01"></td></tr>
<tr><td id="bottom_02"></td></tr>
<tr><td id="bottom_03"></td></tr>
</table>


</table>

and the css coding for just the tables:

CODE

#top_01

{

    text-align: center;
    width: 760px;
    height: 16px;
    background-image: url(top_01.jpg);
    background-repeat: no-repeat;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

#top_02

{

    text-align: center;
    width: 760px;
    height: 42px;
    background-image: url(top_02.jpg);
    background-repeat: no-repeat;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    color: #868967;
    font-size: 8pt;
    text-align: center;
        font-family: verdana, sans-serif;
        cursor: default;
}


#top_02 a

{

    font-size: 8pt;
        color: #000000;
        font-weight: bold;
    cursor: default;
    text-decoration: none;

}

#top_02 a:hover

{

    font-size: 8pt;
        color: #868967;
        font-weight: bold;
    cursor: default;
    text-decoration: none;

}

#bottom_01

{

    text-align: center;
    width: 770px;
    height: 15px;
    background-image: url(bottom_01.jpg);
    background-repeat: no-repeat;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 8pt;
        font-family: verdana, sans-serif;
        cursor: default;

}

#bottom_02

{

    text-align: center;
    width: 770px;
    height: 16px;
    background-image: url(bottom_02.jpg);
    background-repeat: no-repeat;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 8pt;
    text-align: center;
        font-family: verdana, sans-serif;
        cursor: default;

}


#bottom_03

{

    text-align: center;
    width: 770px;
    height: 16px;
    background-image: url(bottom_03.jpg);
    background-repeat: no-repeat;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 8pt;
    text-align: center;
        font-family: verdana, sans-serif;
        cursor: default;

}

#bg

{

    text-align: center;
    width: 760px;
    background-image: url(bg.jpg);
    background-repeat: repeat-y;

}

td.navigation

{

    width: 180px;
        height: 100%;
    font-size: 8pt;
    text-align: justify;
        font-family: verdana, sans-serif;
        cursor: default;
    padding-left: 200px;
        position: absolute;
        top: 320px;

}

td.navigation a

{

    font-size: 8pt;
    text-align: justify;
        font-family: verdana, sans-serif;
        cursor: default;
    padding-left: 145px;
        background-color: #FFFFF;

}


td.navigation a:hover

{

    width: 180px;
    font-size: 8pt;
    text-align: justify;
        font-family: verdana, sans-serif;
        cursor: default;
        background-color: #BCC09C;

}

td.content

{
    width: 556px;
        height: 100%;
    font-size: 8pt;
    text-align: justify;
        font-family: verdana, sans-serif;
        cursor: default;
    padding-left: 140px;
        position: absolute;
        top: 320px;

}

It may seem like a lot, true, but that's just me and overduing some CSS.

If anyone can help/is good with tables that can help I'd be very grateful. ^^ Then the topic can be closed.

LINK FOR PREVIEW

[talcumpowder]

A layout like that doesn't lend itself well to tables without major slicing, that's why. If you've seen most table-based layouts, they're usually sliced and involve iFrames. &aren't usually two-column. &if they're not sliced, then they're usually just a header image with the sidebar/content included in the table under the header. Usually side-by-side, but sometimes not.
----
Basically, I think I'm suggesting that you re-slice it in Photoshop (or whatever you use) and get the table coding for it. And make sure you slice the backgrounds for the columns as seperate slices. If that makes sense. Because the you can set it as the background for that section of the table. Ugh. I'm not making sense.