ID:185964
 
As part of my coursework in school, i've been asked to make a website on a topic of my choice. The topic i've chosen is Celtic, which are a football team. Anyway i've been trying to get this layout to work correctly with no success, the problems are as follows:

1. Tabs at the top (under the banner) aren't close enough, and are too much down from the banner itself.

2. The tables under "Main Content" move to right making it look out of position. (This problem doesn't seem to occur when i preview it in Microsoft Frontpage, however upon viewing it in a browser it is visible)

3. I don't even know where to begin with the poll.

You can see my errors in the screenshot below.

http://img317.imageshack.us/img317/6796/celtic5hg.jpg

Would anyone be willing to help me, as i'd really appreciate it. (You can download the files below)

http://homepage.ntlworld.com/g.gilligan/1888.zip

Cheers
I was looking at the source, and I notice that the data cell (TD) that contains the menu buttons (directly under the "START OF GREY HEADER BAR" comment) has a height of 44, but your button images have a height of 33... So, you've got an extra 11 pixels that it needs to fill up, which is why you've got too much space between the green header, and the buttons...

Changing that to a height="33" squishes the buttons up against the green graphic, but it also moves the content area right up under the buttons... If that's what you want, then there's your fix, just change the height="44" to a "33"...

It will look like this:



However, my guess is that you'd like a bit of space between the bottom of the menu tabs, and the content box... If so, leave the height at 44 (or adjust it to whatever you want, as long as it's above 33), but add in a valign="top" attribute to that TD... This will make it display all of the cell's contents pushed up against the top of the cell, instead of centered vertically...

That will look like this:



They look too far apart because the width's of the cells they are each in do not match the image widths themselves... It seems that each one is 2-3 pixels wider than the image, which is what is leaving those gaps between them...

As for problem number 2, it is because your maincontent title image isn't as wide as the page... In larger resolutions, the content cells are wider than the image, and it causes them to look like they're sticking out farther than the bar...

You could set them all to a fixed width, that being of your maincontent.jpg image, but for a more flexible approach (and one that will resize nicely), you should cut your maincontent.jpg into two new images... One of which is the place where it says "[G] MAIN CONTENT" (like my text approximation of the green square? lol)... Cut out that section of the graphic, from top to bottom, like so:



Next, cut a small strip from top to bottom out of the empty part of the image... The width of this slice is arbitrary, it can be one pixel if you want it to, but I just cut out whatever width I happened to select... Like this:



Now, what you do is take the strip image, and set it as the background of that cell... Then, you take the title image, and place it in the cell, aligned to the left (left alignment is default, so nothing extra needs to be done)...

Now, when your cells are resized, the title bar cell will resize with them, and the background gradient will be applied along the full length, to fill any width...

It will look like this:



For the poll, check out how to set up HTML forms ( http://htmlgoodies.com has a nice tutorial)... The basic way to do it is to have it sent to your e-mail address, where you'd have to tally the votes, and update the results manually... However, for the usual poll, where it will automatically display the results to the viewer after their vote is cast, you need a few things going in the background, like a PHP or CGI script, a database, etc...

Look around for tutorials on making polls, and you should find something useful (perhaps even premade code to handle them, which you can use like a "library", and make the changes you need to fit it to your site...
In response to SuperSaiyanGokuX
Cheers mate, really appreciate all your help