Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Help with tables

Posted by: colinmc8 Dec 8 2009, 06:23 PM

Hi everyone,

Iīm the type who likes to do things myself, when I get stuck I google a solution.
In this case I canīt see what Iīm doing wrong.
So heres the situation, I made a webpage in photoshop, the header, buttons, images etc. and sliced them into seperate images.
After alot of googling I decided to arrange the page with tables, one central table that will hold all the images together.
bit by bit it all came together except the last piece of course, anyway heres the code and website link:

http://colincampbell.t35.com/Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>COLIN CAMPBELL</title>

<style type="text/css">

img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

#Table{
position: absolute;
top: 100px;
left: 50%;
margin-left: -375px;
}

table
{
width:750px;
height:400px;
}

</style>
</head>
<body>

<img src="/Images/BG.jpg"

alt=""

id="bg"


<div id="Table">
<table cellpadding="0" cellspacing="0" table border="0">
<tr>
<td rowspan= "2"><a href="Index.html"><img src="/Images/Header.jpg" /></a></td>
<td colspan="4" align= "left"><img src="/Images/Bespoke.jpg" /></td>
</tr>
<tr>
<td><a href="colincampbell.t35.com"><img src="/Images/Home-button.jpg" /></a></td>
<td><a href="colincampbell.t35.com/profile"><img src="/Images/Profile-button.jpg" /></a></td>
<td><a href="colincampbell.t35.com/portfolio"><img src="/Images/Portfolio-button.jpg" /></a></td>
<td><a href="mailto:my email@blah.com"><img src="/Images/Contact-button.jpg" /></a></td>
</tr>
<tr>
<td><img src="/Images/Main-area.jpg" /></td>
</tr>
</table>
</div>


</body>
</html>

As you can see the cell to the top right of the table is sitting on the edge along with the four columns. Why donīt they go beside the header?
any help or suggestions will be greatly appreciated.

Posted by: Darin McGrew Dec 8 2009, 07:29 PM

You don't use colspan on the td that contains Main-area.jpg

Posted by: Frederiek Dec 9 2009, 02:35 AM

And you should fix the markup errors: http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//colincampbell.t35.com/Index.html&warnings=yes&input=yes

Posted by: colinmc8 Dec 9 2009, 03:29 AM

QUOTE(Darin McGrew @ Dec 9 2009, 01:29 AM) *

You don't use colspan on the td that contains Main-area.jpg


I didn't, I only used it on bespoke.jpg

Posted by: colinmc8 Dec 9 2009, 03:32 AM

by the way I'm a self taught novice, I realize there is probably lots of mistakes and things missing. I just fix things as I find them. Thanks for the replies so far.

Posted by: pandy Dec 9 2009, 06:19 AM

QUOTE(colinmc8 @ Dec 9 2009, 09:29 AM) *

QUOTE(Darin McGrew @ Dec 9 2009, 01:29 AM) *

You don't use colspan on the td that contains Main-area.jpg


I didn't, I only used it on bespoke.jpg


I think you misunderstood Darin. You need to use colspan in the last row.

Posted by: colinmc8 Dec 9 2009, 12:52 PM

QUOTE(pandy @ Dec 9 2009, 12:19 PM) *

I think you misunderstood Darin. You need to use colspan in the last row.



Can you show me what you mean? What value do I put?

Posted by: pandy Dec 9 2009, 01:41 PM

I see now that there are more problems. But when you use colspan and rowspan it must add up. The row with the most cells decides how many columns there will be. In your table that's 4. If you want to melt all cells in one row together you need to use colspan="4" with the single remaining cell.

But the link buttons are in a raw below the logo, which messes things up. Move them up in the same cell as the bespoke image. I think you want something like this.

HTML
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><a href="Index.html"><img src="/Images/Header.jpg" alt= "Header"/></a></td>
<td><img src="/Images/Bespoke.jpg" alt= "Bespoke"/><br><a href="Index.html"><img src="/Images/Home-button.jpg" alt= "Home"/></a><a href="colincampbell.t35.com/profile"><img src="/Images/Profile-button.jpg" alt= "Profile"/></a><a href="colincampbell.t35.com/portfolio"><img src="/Images/Portfolio-button.jpg" alt= "Portfolio"/></a><a href="mailto:colinmc2@live.com"><img src="/Images/Contact-button.jpg" alt= "Contact"/></a></td>
</tr>
<tr>
<td colspan="2"><img src="/Images/Main-area.jpg" /></td>
</tr>
</table>


A little warning about using mixed case for file names. If your server isn't a Windows one, and most server aren't, it will be case sensitive and Index.html and index.html are two different files as are Portfolio-button.jpg and portfolio-button.jpg. There's nothing wrong with mixed case. It just makes it very easy to screw up.

Posted by: colinmc8 Dec 9 2009, 04:15 PM

I only have one thing to say....WOW! ohmy.gif and not to forget THANKYOU! laugh.gif I just copied and pasted the code and its perfect. Thank you so much.
I understand what you mean by using mixed case, I've had a few instances where i've put index instead of Index. Thanks again for all the advice.
I'm sure you'll be seeing more of me on here.

Posted by: pandy Dec 10 2009, 01:01 AM

Forgot to say, use borders on the table while you work with it. Makes it a lot easier to see where things are and what's really wrong. And you are welcome. smile.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)