The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Darin McGrew
post Dec 8 2009, 07:29 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,999
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


--------------------
Darin McGrew
WDG Member since 1998
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: 4,282
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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,230
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,230
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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,230
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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 31st July 2014 - 06:40 PM