Expandable Table Cell 1

[AGP]

I have created a webpage using a table to design the layout. The page is made up of one left table cell for the navigation menu and one right table cell for the page content. However, because I am placing dynamic text in the page content cell, whenever there is a lot of text it expands/distorts my navigation menu images. I tried fixing the height of the navigation cell and adding another empty cell with an unspecified height below + setting content cell to rowspan=2. But this still does not work! Does anyone know (possibly using css) how to create an expanding table cell for this particular situation? I do not wish to use frames or create separate tables for each part of the page. I should mention that I have tried using css and a repeating vertical background image in the empty cell, but with no joy! Is this even possible? Either way any suggestions would be very much appreciated.
many thanks.

 

[mwolf00]

If you use a transparent gif (1 pixel x 1 pixel), you can increase the size of the image as needed

<img src=&quot;spacer.gif&quot; height=20 id=&quot;spacerImg&quot;>


document.getElementById(&quot;spacerImg&quot.height = 50

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 

[AGP]

thanks, I have to admit I would have never thought of doing it this way. My only problem is that the dynamic text inserted into the content cell is pulled from a database and contains html formatting plus images inserted into the text. How could I work out the height of this?

 

[mwolf00]

I'm guessing that the left cell is distorted when it's witdth changes. If you fix the width, does the problem go away?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

 

[AGP]

fixing the width of the left cell seems to make no difference, even though you think it would!

 

[EdwardMartinIII]

AGP,

Can you post a short sample of the layout code. Specifically, the table without content?

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[tviman]

I think I'd be more inclined to put my dynamic content into a table nested in my main table. This would keep your navigation menu intact regardless of what happened with the dynamic text.

Of course, you could also use frames or divs.

There's always a better way...

 

[EdwardMartinIII]

Yeah, you can always put your navigation cluster in a DIV. Then, in the CSS, just put the DIV wherever you want it. Upper left, upper right, middle, wherever.

Forcing tables to be layout tools is just, well, like hammering nails with a crescent wrench. It'll do the trick, but it's really not the right tool for the job.

I resisted CSS-based layout for the longest time, then decided one weekend to cram a buncha CSS stuff in my head and play around and now I'm a total convert. Plus, my sites are smaller and load faster and are waaaaaaay easier to maintain.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[AGP]

Sorry for the delay. First I would like to thank all of you for the help you have given me. I tried using a nested table but still to no avail! Likewise, CSS div tags are not really an option as I am using photoshop to create the page/html. I think my only option is to create separate tables for each part of the page. However, I did not want to do it this way because it involves a lot more work with reconfiguring the html table created by photoshop!

The code I was using was very similar to the following:

<table>
<tr>
<td height=&quot;fixed&quot;>navigation image menu</td>
<td rowspan=2>dynamic page content</td>
</tr>
<tr>
<td><img src=spacer.gif></td>
</tr>
</table>

Thanks once again.

 

[EdwardMartinIII]

Oh.

So you want something like this:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>HTML Sample</title>
  </head>
  <body>
    <form name=&quot;MainForm&quot;>
      <table border=&quot;1&quot;>
        <tr>
          <td valign=&quot;top&quot; width=&quot;50px&quot;>Navigation stuff -- fixed width</td>
          <td><p>a little bit of content</p></td>
        </tr>
      </table>
      <hr />
      <table border=&quot;1&quot;>
        <tr>
          <td valign=&quot;top&quot; width=&quot;50px&quot;>Navigation stuff -- fixed width</td>
          <td><p>A whole lotta content composed entirely of words, many of which are built using &quot;consonants&quot; and &quot;Syndicates&quot;, which is an ancient Spanish word meaning &quot;avocado hat&quot;.  Not many people are aware that avocados come from Spain (expect for the rare Spanish avocado growers), but the fact is, they were brought to California in 1965 for the first time by Fredrico Clinton, a distant relative of former President Bush.</p></td>
        </tr>
      </table>
    </form>
  </body>
</html>

You want the navigation cell to stay the same width regardless of the content of the right hand side?

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[AGP]

Yes, something like that, but the left hand navigation cell contains a number of images to make up the menu bar. As more content is added to the right hand column the images in my left hand cell are expanded and as a result whitespace appears between them! The obvious solution would be to place all the menu button images in a table nested within the left hand column and aligned to the top. However, because I am using Photoshop, which creates the html table for you, this is not as easy as it sounds.

 

[theocraticmind]

What version of photoshop? I use 6 and it can break images (I asume thats what your using it for) into div sections. If you willing to go absolute, it should work fine for you.

tip: if you change the code photoshop gives you so that the images are the background in the divs, it gives you more flex for content in them.

 

[EdwardMartinIII]

AGP,

Um, replace &quot;Navigation stuff -- fixed width&quot; with whatever you want and change &quot;50px&quot; to whatever value you like. The content can be an image, a frame, or a complete description of George W. Bush's thought processes regarding America's role in the world -- it'll do exactly what I think you want.

What in the world is changing the shapes of your images? Have you tried just plugging

<img src=&quot;Menu1.gif&quot; height=&quot;20&quot; width=&quot;45&quot; alt=&quot;Menu 1 option&quot;></img><br /><img src=&quot;Menu2.gif&quot; height=&quot;20&quot; width=&quot;45&quot; alt=&quot;Menu 2 option&quot;></img><br /><img src=&quot;Menu3.gif&quot; height=&quot;20&quot; width=&quot;45&quot; alt=&quot;Menu 3 option&quot;></img>

into that listing, instead of &quot;Navigation stuff -- fixed width&quot; and changing the px value?

You certainly don't need a nested table. In fact, table nesting is deprecated in the future.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[Genimuse]

To summarize some of the responses, you don't put

 width="fixed"

in your left table cell: you put an actual width, like

 width="150"

to tell the browser that the left column should always be rendered a certain width. The actual number should be whatever is required to fit all of your left column contents the way you want them to appear.

 

[EdwardMartinIII]

Putting just a number leads to unpredictable results. Use a number+unit. Such as &quot;50px&quot;.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[AGP]

thanks once again for all your suggestions. To answer one question, I am using Photoshop 5.5 and there does not seem to be the option to use DIV tags. After doing quite a lot of searching on the web, from what I gather this is a common problem with designing websites in this method and using Photoshop 5.5. I was looking for an easy solution, which I don't think there is. One solution, which I am quite comforatable with doing, is to split the page into a number of different tables i.e. heading, navigation and content. Thanks for all the help, it has been very much appreciated and while I have not found the easy solution I was looking for, I have learnt a lot in the mean time!

 

[EdwardMartinIII]

Photoshop is creating your page (yoicks!) or just the image/image slices?

curious,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[AGP]

I use photoshop to create a background image, which I then slice and use the 'Save Optimised' option to create a basic html page. I use this as the basis of my page, which I then have to slightly modify the layout and add content, sytles etc. Nothing wrong with this approach is there?

 

[EdwardMartinIII]

Well, I'd use Photoshop (and do) to create images, then use a text editor to create pages.

If you have some piece of software making your web page, you might not have as much control.

The result you seem to want is really quite simple to make with a text editor and there's no reason why code should stretch an image, unless something is using JavaScript (or something else like that) to go in and dynamically change image height/width settings.

This is not a difficult problem to solve. Can you post the table code you're using, including the links to your graphics. There's discussion and then there's solutions.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[AGP]

You asked for it! By the way I should mention that the only problem is with images stretching downwards.

<HTML>
<HEAD>
<TITLE>referrals</TITLE>
<META HTTP-EQUIV=&quot;Content-Type&quot; CONTENT=&quot;text/html; charset=iso-8859-1&quot;>
<!-- ImageReady Preload Script (referrals.psd) -->
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
referrals_06_over = newImage(&quot;images/referrals_06-over.gif&quot;
referrals_11_over = newImage(&quot;images/referrals_11-over.gif&quot;
referrals_19_over = newImage(&quot;images/referrals_19-over.gif&quot;
referrals_24_over = newImage(&quot;images/referrals_24-over.gif&quot;
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF ONLOAD=&quot;preloadImages();&quot; TOPMARGIN=0 LEFTMARGIN=0>
<!-- ImageReady Slices (referrals.psd) -->
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=31 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=22 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=14 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=22 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=7 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=6 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=27 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=13 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=14 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=14 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=22 HEIGHT=1></TD>
<TD>
<IMG SRC=&quot;images/spacer.gif&quot; WIDTH=587 HEIGHT=1></TD>
</TR>
<TR>
<TD COLSPAN=2>
<A HREF=&quot;default.asp&quot;>
<IMG SRC=&quot;images/referrals_01.gif&quot; WIDTH=53 HEIGHT=20 BORDER=0></A></TD>
<TD COLSPAN=10>
<IMG SRC=&quot;images/referrals_02.gif&quot; WIDTH=726 HEIGHT=20></TD>
</TR>
<TR>
<TD COLSPAN=12>
<IMG SRC=&quot;images/referrals_03.gif&quot; WIDTH=779 HEIGHT=60></TD>
</TR>
<TR>
<TD COLSPAN=12>
<IMG SRC=&quot;images/referrals_04.gif&quot; WIDTH=779 HEIGHT=59></TD>
</TR>
<TR>
<TD>
<IMG SRC=&quot;images/referrals_05.gif&quot; WIDTH=31 HEIGHT=14></TD>
<TD COLSPAN=4>
<A HREF=&quot;about.asp&quot;
ONMOUSEOVER=&quot;changeImages('referrals_06', 'images/referrals_06-over.gif'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('referrals_06', 'images/referrals_06.gif'); return true;&quot;>
<IMG NAME=&quot;referrals_06&quot; SRC=&quot;images/referrals_06.gif&quot; WIDTH=65 HEIGHT=14 BORDER=0></A></TD>
<TD COLSPAN=6>
<IMG SRC=&quot;images/referrals_07.gif&quot; WIDTH=96 HEIGHT=14></TD>
<TD WIDTH=587 ROWSPAN=12 VALIGN=TOP>
<!-- DYNAMIC CONTENT GOES HERE -->
******PAGE CONTENT**********************************
</TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC=&quot;images/referrals_09.gif&quot; WIDTH=192 HEIGHT=10></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC=&quot;images/referrals_10.gif&quot; WIDTH=67 HEIGHT=16></TD>
<TD COLSPAN=4>
<A HREF=&quot;services.asp&quot;
ONMOUSEOVER=&quot;changeImages('referrals_11', 'images/referrals_11-over.gif'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('referrals_11', 'images/referrals_11.gif'); return true;&quot;>
<IMG NAME=&quot;referrals_11&quot; SRC=&quot;images/referrals_11.gif&quot; WIDTH=62 HEIGHT=16 BORDER=0></A></TD>
<TD COLSPAN=4>
<IMG SRC=&quot;images/referrals_12.gif&quot; WIDTH=63 HEIGHT=16></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC=&quot;images/referrals_13.gif&quot; WIDTH=192 HEIGHT=23></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC=&quot;images/referrals_14.gif&quot; WIDTH=89 HEIGHT=17></TD>
<TD COLSPAN=5>
<IMG SRC=&quot;images/referrals_15.gif&quot; WIDTH=67 HEIGHT=17></TD>
<TD COLSPAN=2>
<IMG SRC=&quot;images/referrals_16.gif&quot; WIDTH=36 HEIGHT=17></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC=&quot;images/referrals_17.gif&quot; WIDTH=192 HEIGHT=24></TD>
</TR>
<TR>
<TD COLSPAN=6>
<IMG SRC=&quot;images/referrals_18.gif&quot; WIDTH=102 HEIGHT=17></TD>
<TD COLSPAN=2>
<A HREF=&quot;login.asp&quot;
ONMOUSEOVER=&quot;changeImages('referrals_19', 'images/referrals_19-over.gif'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('referrals_19', 'images/referrals_19.gif'); return true;&quot;>
<IMG NAME=&quot;referrals_19&quot; SRC=&quot;images/referrals_19.gif&quot; WIDTH=40 HEIGHT=17 BORDER=0></A></TD>
<TD COLSPAN=3>
<IMG SRC=&quot;images/referrals_20.gif&quot; WIDTH=50 HEIGHT=17></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC=&quot;images/referrals_21.gif&quot; WIDTH=192 HEIGHT=19></TD>
</TR>
<TR>
<TD COLSPAN=4 ROWSPAN=2>
<IMG SRC=&quot;images/referrals_22.gif&quot; WIDTH=89 HEIGHT=22></TD>
<TD COLSPAN=7>
<IMG SRC=&quot;images/referrals_23.gif&quot; WIDTH=103 HEIGHT=6></TD>
</TR>
<TR>
<TD COLSPAN=6>
<A HREF=&quot;contact.asp&quot;
ONMOUSEOVER=&quot;changeImages('referrals_24', 'images/referrals_24-over.gif'); return true;&quot;
ONMOUSEOUT=&quot;changeImages('referrals_24', 'images/referrals_24.gif'); return true;&quot;>
<IMG NAME=&quot;referrals_24&quot; SRC=&quot;images/referrals_24.gif&quot; WIDTH=81 HEIGHT=16 BORDER=0></A></TD>
<TD>
<IMG SRC=&quot;images/referrals_25.gif&quot; WIDTH=22 HEIGHT=16></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC=&quot;images/referrals_26.gif&quot; WIDTH=192 HEIGHT=74></TD>
</TR>
<TR>
<TD COLSPAN=11>
<IMG SRC=&quot;images/referrals_27.gif&quot; WIDTH=192 HEIGHT=59></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</BODY>
</HTML>