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.

[fainaru]

Hey thanks for actually replying ^^ So does that mean if I slice my image in imageready a table code will already be given?

[talcumpowder]

Err.... Yeah. In PSP we have a little buttons that saves it. So then you've got all the slices and there's a .html file that contains the code and you play with that. ImageReady or whatever should be fairly similar.

[Elleusion]

^Woah, like if you slice it?
I wish gimp did that!