Solved

HELP!! Image will not stretch to be 100% of page/cell/table...

Posted on 2006-11-07
16
259 Views
Last Modified: 2010-04-25
I am trying to create a table whereby all the cells are a fixed size except for one, all cells have an image in them to create a top navigation and left-hand side navigation for the page.  The one cell that isn't to be a fixed size I want to expand and contract depending on the content within the table.

Here is my design:

*******************************************************************************************************************
TABLE: Height = 100%  Width = 100%

ROW 1 COLUMN 1: Height = 100px  Width = 100px
ROW 1 COLUMN 2: Height = 100px  Width = 698px

**The rest of column 2 is merged across the following 3 rows to create the area for the main content to go.**

ROW 2 COLUMN 1: Height = 167px  Width = 100px

ROW 3 COLUMN 1: Height = 100%  Width = 100px  **This cell and the image in it is the one I want to resize vertically depending on the amount of content.**

ROW 4 COLUMN 1: Height = 362px  Width = 100px
*******************************************************************************************************************

At the moment if I set the image in ROW 3 COLUMN 1 to HEIGHT = 100% then it increases the height of the image, but nowhere near the size it should be to complete the page which is giving me lots of white space in the last two rows on the left.

I hope this makes sense, any help is GREATLY appreciated!!

Thanks...
0
Comment
Question by:SquareOneResources
  • 5
  • 4
  • 3
  • +1
16 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17892285
Hi SquareOneResources,

Can you post the HTML code for the above?  I'd like to test it, but I don't want to code it myself...
0
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 17895744
Did u try removing the height property for that row?

Don't set the height property for that row. But set the height for all the rows.
0
 
LVL 1

Author Comment

by:SquareOneResources
ID: 17896571
Here is the code from the <body> tag:

<body>
<table border="0" cellspacing="0" cellpadding="0" height="100%" width="793">
  <tr>
    <td align="right" valign="bottom" height="100" width="100"><img src="Top Left 100x100.gif" width="95" height="96" /></td>
    <td height="100" width="698"><img src="Top Bar 698x100.gif" width="698" height="100" /></td>
  </tr>
  <tr>
    <td height="167" width="100"><img src="Left Bar Top 167x100.gif" width="100" height="167" /></td>
    <td rowspan="3" height="100%" width="698">&nbsp;</td>
  </tr>
  <tr>
    <td height="100%" width="100"><img src="Left Bar Spacer 20x100.gif" width="100" height="100%" /></td>
  </tr>
  <tr>
    <td height="396" width="100"><img src="Left Bar Bottom 396x100.gif" width="100" height="396" /></td>
  </tr>
</table>
</body>

Hope this helps.
0
 
LVL 1

Author Comment

by:SquareOneResources
ID: 17896580
Cyberweb,

Yes I've tried removing the height propery from several rows/images in an attempt to get it to work.  At present if I resize the browser to full screen the table sits some way off the bottom of the window so it isn't even resizing as I want it to.
0
 
LVL 16

Accepted Solution

by:
CWS (haripriya) earned 168 total points
ID: 17896625
If you want the table to resize according to the browser, then you should use only % for the width and height. Whereas you have used both % and pixels.

First change all the width and height to % and then for the 3rd row, remove the height.
0
 
LVL 1

Author Comment

by:SquareOneResources
ID: 17896921
Here is my new code removing the heights and widths of the cells so that they are controlled by the images in them, I did not change them to % as I do not have the time at convert the px to %.

<body>
<table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%">
  <tr>
    <td height="100%" width="100%">
      <table border="0" cellspacing="0" cellpadding="0" width="793" align="center">
        <tr>
          <td align="right" valign="bottom"><img src="Top Left 100x100.gif" width="95" height="96" /></td>
          <td><img src="Top Bar 698x100.gif" width="698" height="100" /></td>
        </tr>
        <tr>
          <td><img src="Left Bar Top 167x100.gif" width="100" height="167" /></td>
          <td rowspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td><img src="Left Bar Spacer 20x100.gif" width="100" /></td>
        </tr>
        <tr>
          <td><img src="Left Bar Bottom 396x100.gif" width="100" height="396" /></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

If I type content into the merged cells on the right hand side, and the content exceeds the height of the table, then rather than the image in row 3 expanding, all three rows expand leaving the images in their original sizes surrounded by lots of whitespace.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17901966
>> I did not change them to % as I do not have the time at convert the px to %.

There is a button on the Properties Panel that does it for you...
0
 
LVL 1

Author Comment

by:SquareOneResources
ID: 17904951
Jason1178,

But wouldn't changing the table cell sizes to %'s mess up the page layout when the table resizes but the images don't (as they are fixed sizes)?  I need all the images to stay fixed size except for one which should resize with browser window.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 166 total points
ID: 17908226
There is a more basic problem...images don't resize dynamically in straight HTML.  I assume you want Left Bar Spacer to change along with the table?  

This isn't the best way to design.  You really should switch from a table based design to a CSS based design.  You will then not need to use spacer images to preserve formatting.
0
 
LVL 1

Author Comment

by:SquareOneResources
ID: 17913293
I agree that CSS is the better way to go but I've been asked to design a simple web page for that is to be used by a non-technical person that is simple for them to update as necessary, including the template design by replacing images etc...  CSS is going to be a little out of their league.

Is there any way you can suggest other than CSS that I can achieve this?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 17916201
Don use left bar spacer as a regular image.  Make it a repeating background.

0
 
LVL 29

Assisted Solution

by:matrixnz
matrixnz earned 166 total points
ID: 17945891
Hi SquareOneResources

First you need to make sure you're using quirks mode for the height tag to work correctly so
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
should be changed to
<html>
Secondly you need to use a nested table for the navigation on the left to make it work correctly.

Here's a basic page layout.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
      margin: 0px;
      padding: 0px;
}
#Main {
      height: 100%;
      width: 798px;
}
#TL {
      height: 100px;
      width: 100px;
}
#TB {
      height: 100px;
      width: 698px;
}
#LBT {
      height: 167px;
      vertical-align: top;
}
#LBS {
      height: 100%;
      background-image: url(Left%20Bar%20Spacer%2020x100.gif);
      background-repeat: repeat-y;
      vertical-align: top;
}
#LBB {
      height: 396px;
      vertical-align: bottom;
}
#Content {
      font:Verdana, Arial, Helvetica, sans-serif;
      text-align: left;
      vertical-align: top;
      padding: 20px;
}
-->
</style>
</head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="Main">
  <tr>
    <td id="TL"><img src="Top Left 100x100.gif" width="100" height="100" /></td>
    <td id="TB"><img src="Top Bar 698x100.gif" width="698" height="100" /></td>
  </tr>
  <tr>
    <td><table width="100" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td id="LBT"><img src="Left Bar Top 167x100.gif" width="100" height="167" /></td>
      </tr>
      <tr>
        <td id="LBS"><img src="Left Bar Spacer 20x100.gif" width="100" height="100" /></td>
      </tr>
      <tr>
        <td id="LBB"><img src="Left Bar Bottom 396x100.gif" width="100" height="396" /></td>
      </tr>
    </table></td>
    <td id="Content"><p>&nbsp;</p></td>
  </tr>
</table>
</body>

</html>
0
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 18106714
Hello mrichmon,

I agree with split points.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now