Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expandable Table Cell 1

Status
Not open for further replies.
AGP

AGP

Programmer
Sep 11, 2001
97
GB
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.
 
Sort by date Sort by votes
Please post it between
Code: 
 tags -- or at least uncheck the "Process TGML" box.  You're using in your code a string that is a TGML command.

Cheers,


[monkey] Edward [monkey]

"Cut a hole in the door.  Hang a flap.  Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
AGP,

I put this code in a file and it seemed to behave perfectly normally. In both Mozilla and IE, no matter how I resized the browser window, the menu items on the left stayed the same size.

Are your images actually changing SHAPE or are you seeing space between them or what?

Cheers,


[monkey] Edward [monkey]

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door
 
Upvote 0 Downvote
Hi and thanks for looking at the code. Yes, the problem is white space appearing between the small menu image buttons. There is no problems with the width, just the height when I increase the amount of text in the content part of the page.
 
Upvote 0 Downvote
My electronics instructor, whenever I would bring my circuit to him for troubleshooting, would immediately rip all the wires out of the board. Then he would build the circuit. He would show me that the circuit worked. Then he would pull the wires back out and hand the thing back to me and say "Just do it like that".

I don't know what's generating your code (ImageReady = WebMessy?), but it's a bit of a mess. 11 columns?! What in the world do you need that for?!

What you need to do is build your table first (with a border of "1"), without images, but with image tags that have correct dimensions and ALT tags. Add a lot of bogus text to simulate various situations.

Near as I can tell, all your content can fit into a single table with two columns and four rows.

Like so:

Code: 
<HTML>
<HEAD>
<TITLE>referrals</TITLE>
<META HTTP-EQUIV=&quot;Content-Type&quot; CONTENT=&quot;text/html; charset=iso-8859-1&quot;>
</HEAD>
<BODY BGCOLOR=#FFFFFF TOPMARGIN=0 LEFTMARGIN=0>
<!-- ImageReady Slices (referrals.psd) -->

<table border=&quot;1&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
  <tr>
    <td colspan=&quot;2&quot;><A HREF=&quot;default.asp&quot;><IMG SRC=&quot;images/referrals_01.gif&quot; WIDTH=53 HEIGHT=20 BORDER=0 alt=&quot;referrals_01.gif&quot;></A><IMG SRC=&quot;images/referrals_02.gif&quot; WIDTH=726 HEIGHT=20 alt=&quot;referrals_02.gif&quot;></td>
  </tr>
  <tr>
    <td colspan=&quot;2&quot;><IMG SRC=&quot;images/referrals_03.gif&quot; WIDTH=779 HEIGHT=60 alt=&quot;referrals_03.gif&quot;><br /><IMG SRC=&quot;images/referrals_04.gif&quot; WIDTH=779 HEIGHT=59 alt=&quot;referrals_04.gif&quot;></td>
  </tr>
  <tr>

    <!-- menu items -->
    <td valign=&quot;top&quot;>
      <IMG SRC=&quot;images/referrals_05.gif&quot; WIDTH=31 HEIGHT=14 alt=&quot;referrals_05.gif&quot;><A HREF=&quot;about.asp&quot;><IMG NAME=&quot;referrals_06&quot; SRC=&quot;images/referrals_06.gif&quot; WIDTH=65 HEIGHT=14 BORDER=0 alt=&quot;referrals_06.gif&quot;></A><IMG SRC=&quot;images/referrals_07.gif&quot; WIDTH=96 HEIGHT=14 alt=&quot;referrals_07.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_09.gif&quot; WIDTH=192 HEIGHT=10 alt=&quot;referrals_09.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_10.gif&quot; WIDTH=67 HEIGHT=16 alt=&quot;referrals_10.gif&quot;><A HREF=&quot;services.asp&quot;><IMG NAME=&quot;referrals_11&quot; SRC=&quot;images/referrals_11.gif&quot; WIDTH=62 HEIGHT=16 BORDER=0 alt=&quot;referrals_11.gif&quot;></A><IMG SRC=&quot;images/referrals_12.gif&quot; WIDTH=63 HEIGHT=16 alt=&quot;referrals_12.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_13.gif&quot; WIDTH=192 HEIGHT=23 alt=&quot;referrals_13.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_14.gif&quot; WIDTH=89 HEIGHT=17 alt=&quot;referrals_14.gif&quot;><IMG SRC=&quot;images/referrals_15.gif&quot; WIDTH=67 HEIGHT=17 alt=&quot;referrals_15.gif&quot;><IMG SRC=&quot;images/referrals_16.gif&quot; WIDTH=36 HEIGHT=17 alt=&quot;referrals_16.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_17.gif&quot; WIDTH=192 HEIGHT=24 alt=&quot;referrals_17.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_18.gif&quot; WIDTH=102 HEIGHT=17 alt=&quot;referrals_18.gif&quot;><A HREF=&quot;login.asp&quot;><IMG NAME=&quot;referrals_19&quot; SRC=&quot;images/referrals_19.gif&quot; WIDTH=40 HEIGHT=17 BORDER=0 alt=&quot;referrals_19.gif&quot;></A><IMG SRC=&quot;images/referrals_20.gif&quot; WIDTH=50 HEIGHT=17 alt=&quot;referrals_20.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_21.gif&quot; WIDTH=192 HEIGHT=19 alt=&quot;referrals_21.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_22.gif&quot; WIDTH=89 HEIGHT=22 alt=&quot;referrals_22.gif&quot;><IMG SRC=&quot;images/referrals_23.gif&quot; WIDTH=103 HEIGHT=6 alt=&quot;referrals_23.gif&quot;><br />
      <A HREF=&quot;contact.asp&quot;><IMG NAME=&quot;referrals_24&quot; SRC=&quot;images/referrals_24.gif&quot; WIDTH=81 HEIGHT=16 BORDER=0 alt=&quot;referrals_24.gif&quot;></A><IMG SRC=&quot;images/referrals_25.gif&quot; WIDTH=22 HEIGHT=16 alt=&quot;referrals_25.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_26.gif&quot; WIDTH=192 HEIGHT=74 alt=&quot;referrals_26.gif&quot;><br />
      <IMG SRC=&quot;images/referrals_27.gif&quot; WIDTH=192 HEIGHT=59 alt=&quot;referrals_27.gif&quot;><br />
    </td>

    <!-- body content -->
    <td valign=&quot;top&quot;>
      ******PAGE CONTENT****************************************PAGE CONTENT****************************************PAGE CONTENT**********************************<br />
      ******PAGE CONTENT****************************************PAGE CONTENT****************************************PAGE CONTENT**********************************<br />
      ******PAGE CONTENT****************************************PAGE CONTENT****************************************PAGE CONTENT**********************************<br />
      ******PAGE CONTENT****************************************PAGE CONTENT****************************************PAGE CONTENT**********************************<br />
      rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />
      rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />rooty-tooty-toot!<br />
    </td>
  </tr>
</table>

</BODY>
</HTML>

I removed the JavaScript stuff because all the acid I took in the 60's made it swim around in front of my eyes, but you can just add the events back in where you want 'em. Don't break lines!

This does what I think you want with the images you supplied. I tried to preserve as much of the code as possible, but you might want to take a look at including alt tags, closing img tags, etc.

Cheers,


[monkey] Edward [monkey]

&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
 
Upvote 0 Downvote
Edward, your an absolute star! I honestly did not believe there was a way to do this, but this solution is much cleaner/better than my original approach. Anyway, your time and effort has been very much appreciated. Thanks once again. agp.
 
Upvote 0 Downvote
Yoda: &quot;And that is why you fail&quot;. [lol]

There's always a way.

Oh, I almost forgot.

Change border=&quot;1&quot; to border=&quot;0&quot; to drop out of Troubleshooting Space.

Cheers,


[monkey] Edward [monkey]

&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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
493
spamjim
spamjim
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
87
vacunita
vacunita
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
100
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
98
PeDa
PeDa
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
102
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top