The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Help with tables
colinmc8
post Dec 8 2009, 06:23 PM
Post #1





Group: Members
Posts: 9
Joined: 8-December 09
Member No.: 10,533
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies(1 - 9)
Darin McGrew
post Dec 8 2009, 07:29 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
You don't use colspan on the td that contains Main-area.jpg
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 9 2009, 02:35 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
And you should fix the markup errors: http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
colinmc8
post Dec 9 2009, 03:29 AM
Post #4





Group: Members
Posts: 9
Joined: 8-December 09
Member No.: 10,533
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
colinmc8
post Dec 9 2009, 03:32 AM
Post #5





Group: Members
Posts: 9
Joined: 8-December 09
Member No.: 10,533
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2009, 06:19 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
colinmc8
post Dec 9 2009, 12:52 PM
Post #7





Group: Members
Posts: 9
Joined: 8-December 09
Member No.: 10,533
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?

This post has been edited by colinmc8: Dec 9 2009, 12:54 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 9 2009, 01:41 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
colinmc8
post Dec 9 2009, 04:15 PM
Post #9





Group: Members
Posts: 9
Joined: 8-December 09
Member No.: 10,533
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 10 2009, 01:01 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 02:14 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC