Solved

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

Posted on 2006-11-07
16
273 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

 
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
 
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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
This is a high-level webinar that covers the history of enterprise open source database use. It addresses both the advantages companies see in using open source database technologies, as well as the fears and reservations they might have. In this…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

691 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