News:

Click here for Toll-Free Service for your business starting at $2.00 per month

Main Menu

Tables troubles...again (will I EVER get this stuff!!)

Started by Paris, June 08, 2006, 05:02:08 AM

Previous topic - Next topic

Paris

Okay, well Im trying to make a pretty simple layout using tables with a header then 3 expanding columns and then a footer. Pretty simple huh? Yeh well don't rub it in.

I tried using my new dreamweaver but it makes the columns very terribly aligned with the header and the footer, so the borders are apart from the header and the footer.

The source code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>--+++Moral X Felicity+++--</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #0099FF;
        font-size: 10;
}
body {
background-color: #FFFFFF;
}

.navi1 {
        border-left: 1px;
        border-right: 1px;
        border-top: 0px;
        border-bottom: 0px;
        border-style: solid;
        border-color: #f2a3e5;
        text-align: left;
        font-size: 8;
        font-family: verdana;
}
.content {
        border-left: 0px;
        border-right: 1px;
        border-top: 0px;
        border-bottom: 0px;
        border-style: solid;
        border-color: #f2a3e5;
        text-align: left;
        font-size: 10;
        font-family: verdana;
}
.navi2 {
        border-left: 0px;
        border-right: 1px;
        border-top: 0px;
        border-bottom: 0px;
        border-style: solid;
        border-color: #f2a3e5;
        text-align: right;
        font-size: 8;
        font-family: verdana;
}
a:link {
color: #FFCC00;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFCC00;
}
a:hover {
text-decoration: underline;
color: #FF6600;
}
a:active {
text-decoration: none;
color: #FFCC00;
}
-->
</style></head>

<body>
<table width="750" height="563" border="0" align="center" cellpadding="0" cellspacing="0" background="file:///C|/Documents and Settings/Paris/Desktop/Moral_Felicity/header.jpg">
</table>
   
   
  <table width="750" align="center">

    <td width="15" align="center"></td></tr><tr>
    <td width="133" align="center" background="file:///C|/Documents and Settings/Paris/Desktop/Moral_Felicity/nav1_bg.jpg"><a href="">Link here</a><br>
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>       
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>
    </td>

    <td width="464" align="center">
                     Thoughts of being over you are the only way out, pretending you're gone is my only route. Every time I hurt, I change the subject...
                     never thought that I would reject, the thought that you'd be back. Hold me back? Please dont come back.... Sorrow is all I have, my love wont die...
                     nor will I. And I know that you know Im still in love, you dont need a sign from above....Im not over you. Again...and again...through
                     and through....Dont wannna say it, but Im still in love with you.
                     <br>
                     <br>
                     -Give me hope...give me peace...give me Moral Felicity.
    </td>

    <td width="133" align="center" background="file:///C|/Documents and Settings/Paris/Desktop/Moral_Felicity/nav2_bg.jpg"><a href="">Link here</a><br>
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>       
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>
                    <a href="">Link here</a><br>
    </td>
    <td width="7" align="center"></td>
  </table>
  <table align="center">
    <td width="750" height="189" background="file:///C|/Documents and Settings/Paris/Desktop/Moral_Felicity/footer.jpg">&nbsp;</td>
   
</table>
</table>
</body>
</html>



Here is what Im talking about:


See, the columns are just not aligning properly, ive tried many different things to get them to align but nothing seems to work.

Also, I was wondering if someone could tell me how to make transparent tables, tables with no background, just text and align them anywhere on the page without disturbing the other tables and moving them. I need this info for my welcome box and footer at the very top and bottom of the layout.

Thanks for your help.


mcarp555

If nothing else, adding up the width of all those TDs comes to 752, not the 750 as specified in the table width statement.

tangles

Not sure about floating tables but u can put in a layer that will be resizable and can be moved anywhere.

Insert/Layout Objects/Layer

Not sure if that helps you

Paris

I fixed the td width problem (the content area width was 2 pixels too many) that didnt change anything at all. Thanx though. And thanx for the layer insert tip....that totally solved that problem. I was just hoping someone could look over my code and tell me what in my coding isnt right and how to fix it.

sixthcrusifix

if you must use tables use percentages for width and NOT absolute values. Easier to do the math anyway and it's more scaleable.
Visite me website at http://www.sixthcrusifix.com