Help - Search - Members - Calendar
Full Version: Help with tables
HTMLHelp Forums > Web Authoring > General Web Design
colinmc8
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.
Darin McGrew
You don't use colspan on the td that contains Main-area.jpg
Frederiek
And you should fix the markup errors: http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
colinmc8
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
colinmc8
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.
pandy
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.
colinmc8
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?
pandy
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.
colinmc8
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.
pandy
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
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.