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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    making table rows "liquid"

    I am working on my first website (not having had any training) using Dreamweaver and I would like to ask this question. Firstly my homepage consists of 6 table rows (hand drawn in Layout mode). Four of these table rows I have made autostretch which means the they look good when viewed at any screeb resolution.

    Two of the rows in the middle of the page however I have divided into five columns of 150px each in width - the first row to hold images and the second row to hold a name (which will become a link) related to the image above it. I have 5 columns of 150px each. These two rows obviously do not stretch with the others when resizing the browser.

    Can someone please tell me how I can make these two rows with colums stretch?

    Thanks - Julie

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Percentage width

    Without looking at the actual markup it's still guessing, but it sounds like these two rows you added later are in a table of their own.

    Anyway: with pixel values, your rows are never going to stretch; you either need to remove these width settings altogether, letting the content determine the needed width, or use percentage widths.
    In the latter case, you'll need to assign a percentage width to the table that hold these rows as well.

    Still, because the images of course won't stretch themselves, they will always dictate the minimum width of the cell that holds them.

    And, lastly, tables aren't the proper way to mark up things like this; with CSS floats, you could make your images with related text line up horizontally in any number that would fit the available window width.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for your reply Ronald.

    Forgive me if I'm not ready to look at CSS yet but I figure from what I've read that I should be able to set up a simple web page using tables. I only have a flimsy understanding of HTML let alone CSS.

    Instead of drawing cells in Layout view I went to Standard view and used Insert TAble - main table is 100%, then within that main table I introduced another - all rows at 100%. As you will see from the code I inserted the size image I intend to place in the 5 columns and in Dreamweaver all looks good. When I preview the page in a browser at 800x600 it is perfect (feel like I'm getting somewhere now) but at 1024xx768 the first cell holding the image (in the row of 5 columns each holding an image) is way wider than the remaining cells. I thought the purpose of making a table 100% was so it would shrink/stretch for the different viewing resolutions.

    Here is my code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Tribute</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body bgcolor="#000000">
    <table width="100%" height="650" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td valign="top"><table width="100%" height="650" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td height="148" colspan="5"><div align="center"><img src="file:///E|/Five%20Women1/Images/Tribute.gif" width="533" height="110"></div></td>
    </tr>

    <td height="22" colspan="5">&nbsp;</td>
    </tr>
    <tr>
    <td width="100%" height="159"><img src="file:///E|/Five%20Women1/Images/julie_homepage_final.jpg" width="150" height="159"></td>
    <td width="100%" height="159"><img src="file:///E|/Five%20Women1/Images/julie_homepage_final.jpg" width="150" height="159"></td>
    <td width="100%" height="159"><img src="file:///E|/Five%20Women1/Images/julie_homepage_final.jpg" width="150" height="159"></td>
    <td width="100%" height="159"><img src="file:///E|/Five%20Women1/Images/julie_homepage_final.jpg" width="150" height="159"></td>
    <td width="100%" height="159"><img src="file:///E|/Five%20Women1/Images/julie_homepage_final.jpg" width="150" height="159"></td>
    </tr>
    <tr>
    <td width="100%" height="70">&nbsp;</td>
    <td width="100%" height="70">&nbsp;</td>
    <td width="100%" height="70">&nbsp;</td>
    <td width="100%" height="70">&nbsp;</td>
    <td width="100%" height="70">&nbsp;</td>
    </tr>
    <tr>
    <td height="160" colspan="5">&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </body>
    </html>

    Thanks again, Julie

  • #4
    New Coder
    Join Date
    Jan 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Apologies, I should have made the columns 20% and when I did that all was well. The page looks good on both sizes.

    Julie


  •  

    Posting Permissions

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