html table layout help

[VHPirie]

Hi,

I've used photoshop to make a simple template. I sliced it up so the centre of it I could chuck the page content in. The problem I'm having is when the content makes the frames bigger then they originally were, big gaps are forming. I'm tried making the height 100% for the images which I want to stretch, but there's still a gap on the right and it's doing my head in!

 

Anyone know what's goin on?

 

I've attached a screenshot of my problem, and below is the code for the tables. "GARDEN_TEMPLATE_04.png" and "GARDEN_TEMPLATE_05.png" are the images on each side which are suppose to stretch, but only the left side is??

 

 

 

<table id="Table_01" width="851" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
	<td colspan="3">
		<img src="templates/GARDEN1/images/GARDEN_TEMPLATE_01.png" width="850" height="99" alt=""></td>
	<td>
		<img src="templates/GARDEN1/images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
<tr>
	<td>
		<img src="templates/GARDEN1/images/GARDEN_TEMPLATE_02.png" width="108" height="120" alt=""></td>
	<td rowspan="3" background="templates/GARDEN1/images/GARDEN_TEMPLATE_03.png" width="637" height="100%">

*PAGE CONTENT HERE*

      </td>
	<td rowspan="2" height="100%">
		<img src="templates/GARDEN1/images/GARDEN_TEMPLATE_04.png" width="105" height="100%" alt=""></td>
	<td>
		<img src="templates/GARDEN1/images/spacer.gif" width="1" height="120" alt=""></td>
</tr>
<tr>
	<td rowspan="2" height="100%">
		<img src="templates/GARDEN1/images/GARDEN_TEMPLATE_05.png" width="108" height="100%" alt=""></td>
	<td>
		<img src="templates/GARDEN1/images/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
	<td rowspan="2">
		<img src="templates/GARDEN1/images/GARDEN_TEMPLATE_06.png" width="105" height="222" alt=""></td>
	<td>
		<img src="templates/GARDEN1/images/spacer.gif" width="1" height="106" alt=""></td>
</tr>
<tr>
	<td colspan="2">
		<img src="templates/GARDEN1/images/GARDEN_TEMPLATE_07.png" width="745" height="116" alt=""></td>
	<td>
		<img src="templates/GARDEN1/images/spacer.gif" width="1" height="116" alt=""></td>
</tr>
</table>

 

 

[attachment deleted by admin]

[cssfreakie]

I am not a real fan of tables because they are often used for things they are not meant for. (like layout)

 

The layout you have here can be made much easier by using other things than tables. If you like help with that let me know. I rather not spend time on tabular design. Got this design somewhere online so i can have a look at it?

[VHPirie]

I don't do a great deal of web design so not really up with the latest sort of ways lol. I did try and search a few things on google and I've found out that tables are ol-skool and div tags and css are the way to go these days. Started reading up on them but haven't gotten very far. Any help would be greatly appreciated!

 

It's not online at the moment. What I'm making is a simple program to make ebay templates. The user logs in, which takes them to a page with a form on it where they enter details, submit it and it takes them to the page above and outputs the results as a preview, and at the bottom of the page it shows the html ready to copy into onto the ebay page.

 

I can upload it if ya want...will just have to wait till I get home from work in a few hours.

[cssfreakie]

you load it  up, it's easier to fix stuff that way, since we have to guess the dimension of the images here otherwise And we can use nifty tools to inspect it.

 

And as far as tabular design yes old school( 1997) they are indeed.

[VHPirie]

Here ya go mate.

http://www.kerrbrosracing.com/uploads/dkdesigns/index2.php

 

Removed the password and email change pages just incase someone wants to play funny buggers lol. Don't laugh at the messy code. I'll neaten it up when it's completed. And yeah there's bits and pieces everywhere, still got lots to do, but been tryin to sort out this design problem.

[cssfreakie]

Your making this design much more difficult than needed. Your template if you look closely can be split up in 3 parts

a header a middle piece and a footer. see attached image

 

Also your tables use inline images that do not increase if the table cells increase. I am not sure what this ebay template is about, but if your allowed to use something different than tables (div's for instance) i would go for that.

a much simpler mark  up for this design could be

 

    <div id="wrapper"> 
            <div id="header"></div>           
            <div id="middle">
                <h2>description</h2>
                <p></p>
                <h2>pictures</h2>
                <p></p>
                <h2>postage</h2>
                <p></p>
                <h2>policy</h2>
                <p></p>
            </div>
            <div id="footer"></div>       
    </div>

 

[attachment deleted by admin]

[VHPirie]

Thx for that mate. Been reading a few CSS tutorials and just can't seem to get anywhere. I've managed to suss out how to change colours of stuff, backgrounds and fonts, but when trying to layout stuff with it, I just can't get me head around it.....might stick to tables for a while longer maybe lol.

[cssfreakie]

than I hope your not making money with it, tabular design is more for old school (1997) 'pr0n' websites.  with crap loads sliced of images 

[VHPirie]

Not yet I'm not, the project might not even get that far lol.

 

With tables ya can centre them, and place however many columns and rows within them, which I've nearly got down pat, but with CSS I can't seem to work out how to do it. The CSS tutorials have shown how to do place boxes where ever ya want, but what if the users page varies, it might be centered on mine, but off centre on there's if ya know wat I mean?? I know they'd be a way around it all, I'm just having trouble getting it to sink in.

 

Might give it another shot, see wat happens.....might have to try and find some better tutorials, can u recommend any?

[cssfreakie]

yes a book, online tutorials are to brief to get the concept. Now a book seem horrible, but trust me within a few days you can do anything you dreamed of(well almost). just google, for some books I bet that these days it's rather easy to get yourself a copy. although i recommend a paper back

[VHPirie]

Just downloaded "HTML, XHTML & CSS for Dummies" so will have a looksy through that.