Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    expanding tables

    Hi guys,

    I can normally cope with them but im stumped on how to do this...

    Ok im trying to make the section where "main.jpg" (line 22) is to extend with more text. but i cant do it without distorting the other images on the left


    Code:
    <html>
    <head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <center>
    <body bgcolor="#62614d" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (index.psd) -->
    <table id="Table_01" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="7">
    			<img src="images/index_01.jpg" width="766" height="71" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="71" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="10">
    			<img src="images/index_02.jpg" width="40" height="679" alt=""></td>
    		<td colspan="4">
    			<a href="#">
    				<img src="images/logo.jpg" width="238" height="41" border="0" alt=""></a></td>
    		<td rowspan="8" hight="1000" background="images/main.jpg" valign="top" style="padding:10px,10px,10px,10px;">
    			test<br>test<br>test<br>
    		</td>
    
    		<td rowspan="10">
    			<img src="images/index_05.jpg" width="74" height="679" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="41" alt=""></td>
    	</tr>
    
    	<tr>
    		<td colspan="4">
    			<img src="images/index_06.jpg" width="238" height="139" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="139" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="8">
    			<img src="images/index_07.jpg" width="69" height="499" alt=""></td>
    		<td>
    			<img src="images/01.jpg" width="147" height="79" alt=""></td>
    		<td colspan="2" rowspan="2">
    			<img src="images/index_09.jpg" width="22" height="85" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="79" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/index_10.jpg" width="147" height="6" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/02.jpg" width="148" height="80" alt=""></td>
    		<td rowspan="6">
    			<img src="images/index_12.jpg" width="21" height="414" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="80" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/index_13.jpg" width="148" height="5" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2">
    			<img src="images/03.jpg" width="148" height="80" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="80" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="images/index_15.jpg" width="148" height="249" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="38" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/mainb.jpg" width="414" height="5" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/index_17.jpg" width="414" height="206" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="206" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/spacer.gif" width="40" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="69" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="147" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="414" height="1" alt=""></td>
    		<td>
    			<img src="images/spacer.gif" width="74" height="1" alt=""></td>
    		<td></td>
    	</tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>
    I hope someone can sort me out here, its driving me mad

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hello and welcome to the forums!

    This is a totally sideways response to your question but a direct answer doesn't make any sense here -- there's really no point because the whole thing needs to go anyway.

    You have a few items of interest in your code. First and foremost it looks like you are using tables for basic HTML layouts. If so, you are best off to stop right now and switch to using <div> elements with CSS padding, margins, and positioning to create your layout. The reasons for this are many, but paramount among them are: much greater flexibility and ease of design changes, vastly smaller page sizes, faster loading with less bandwidth wasted, and better accessibility for the disabled.

    If you need some basic starter material check these out:
    http://www.csszengarden.com/
    http://matthewjamestaylor.com/blog/p...liquid-layouts
    http://www.cssplay.co.uk/layouts/

    There is a small learning curve but a lot of benefit to doing page layouts this way. Making one <div> expand with new text won't wreck the others. So, that's it -- my sideways answer.

    Next I see that you have not used an HTML "DOCTYPE" for your page. It is important for page presentation - ESPECIALLY CROSS-BROWSER - that you use and adhere to the rules of a DOCTYPE. Personally, I use XHTML 1.0 strict, but some people on these fora will push you toward HTML 4.01 strict.

    This is what a blank document with those doctype declarations would look like:

    XHTML 1.0 strict:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>title here</title>
    </head>
    <body>
    
    <div>page content starts here...</div>
    
    </body>
    </html>
    HTML4.01 strict:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>title here</title>
    </head>
    <body>
    
    <div>page content starts here...</div>
    
    </body>
    </html>
    Either will work, just so long as you stick with it (you can also pick a different charset if you prefer). Once you have adopted a doctype you should validate your code often using this free online tool. With a valid doctype and valid HTML code to back it up, your page will take a huge leap forward in the cross-browser presentation.

    Aside from that I also notice a syntax error in your inline CSS right here:
    Code:
    <td rowspan="8" hight="1000" background="images/main.jpg" valign="top" style="padding:10px,10px,10px,10px;">
    	test<br>test<br>test<br>
    </td>
    The highlighted part should read like so:
    Code:
    padding:10px 10px 10px 10px;
    Or more simply, like this:
    Code:
    padding:10px;
    Check out http://www.w3schools.com/ for free HTML and CSS tutorials to brush up on these skills.

    I'll get off of my soapbox now...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    RandomJim (06-03-2009)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the quick response

    This was made in photoshop then sliced, so i did not code it, the only bit i did was the adding the images to the background of the <td>
    i know a little html, but not alot that is why i used photoshop

    so is there no way to make it do what i want ??

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    When I load it up with dummy images nothing distorts for me when I add/remove text from the main section. The images have a set size so they never warp at all. The table cells get bigger with more text in the main section, but this just leaves space around the images rather than forcing them to resize. This is one of the limitations of table layouts (which are commonly produced by "what you see is what you get" editors).

    You have rowspan="8" for this table cell which means that the 8 rows to the left and right of this section will expand to stay the same total height as this "main" area. Similarly, if you load content into one of the side cells instead of the main area, this main area will grow to meet the same overall height as the rest of the 8 rows combined. There is also a typo in the height attribute (spelled as "hight" by mistake).

    Honestly, I don't have the time to figure this one out. This is a direct example of the restrictive nature of table layouts and how inflexible design changes, such as changing the height of one cell, can take tons of work to implement.

    So, yes, there is probably a solution and you could take a few hours toying around with the table attributes to find it or you could invest that time in learning the <div> method and be done with it. It looks like you are just using a basic 3-column fixed-width layout, a free base of which can be found here:
    http://www.dynamicdrive.com/style/la...d-fixed-fixed/
    or here:
    http://www.cssplay.co.uk/layouts/fle...-flex-fix.html

    I hate to beat a dead horse, but why not at least try to customize one of these for your site?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cheers again mate

    i will have a tinker with those CSS ones and see what i can come up with.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •