Preserved Topic: Slices & tables problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=20452" title="Pages that link to Preserved Topic: Slices &amp; tables problem" rel="nofollow" >Preserved Topic: Slices & tables problem\$

Author	Thread
Quarath Bipolar (III) Inmate From: Magna, UT Insane since: May 2000	posted 02-28-2002 03:10 I have created an image that is to act as a frame around th content of a web page. I am assembling it in essentially a 3 x 3 table inserting each corner image and the top and side images are set to the background of the table cell so they can tile and allow the illusion of the frame resizing. I have done this successfully before on a little less complex test but for some reason now I can't make it work. The table needs to be 100% both width and height. I have tried setting specific cells to specific pixel lengths so that the only cell that is dynamic is the center the corners are static and the top/bottom only expand horizontally and the left/right only expand vertically. I can post it somewhere later if needed just don't have time right now but any help would be greatly appreciated.
butcher Paranoid (IV) Inmate From: New Jersey, USA Insane since: Oct 2000	posted 02-28-2002 03:42 I'm sure a look at the code and images in question would allow everyone to help you much better. -Butcher-
jive Paranoid (IV) Inmate From: Greenville, SC, USA Insane since: Jan 2002	posted 02-28-2002 04:42 I think I have an idea about what your talking about but, I'm unclear as to what your problem is. (I know what you wan't to do, just don't know what problem your having.) Any links?
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 02-28-2002 04:55 This is the basic code that will do the trick. The top/right/bottom/left _bg images will need to tile in the direction they will need to stretch, of course - code: <table cellpadding=0 cellspacing=0 border=0> <tr> <td><img src="top_left.gif" width=3 height=3></td> <td width-="100%" background="top_bg.gif"> </td> <td><img src="top_right.gif" width=3 height=3></td> </tr> <tr> <td height="100%" background="left_bg.gif"> </td> <td width="100%" height="100%">...Your Text goes here... </td> <td height="100%" background="right_bg.gif"> </td> </tr> <tr> <td><img src="bottom_left.gif" width=3 height=3></td> <td width-="100%" background="bottom_bg.gif"> </td> <td><img src="bottom_right.gif" width=3 height=3></td> </tr> </table>
Quarath Bipolar (III) Inmate From: Magna, UT Insane since: May 2000	posted 02-28-2002 06:12 OK I posted it here http://www.finlinson.com/design/ I know I had similar thing that I did just for fun working before but I can't find it know. The problem is the cells will not stay a static size so the images drift apart when sized large.. This has couple extra cells but it still should work. DL - I will look at that closer tomarrow and see if will help. I don't remember it being to difficult before. I left the borders just to demonstrate the slices for the time being I will remove them later. Resizing the window My main concern is when maximized on a large res screen it comes apart.
silence Maniac (V) Inmate From: soon to be "the land down under" Insane since: Jan 2001	posted 02-28-2002 06:55 Okay, here's the problem. In your second <tr>, the first <td> has a height setting: code: <TD align=right background="Finlinson Design_files/l.jpg" height=281 Just remove the "height=281" and the page should work fine.
Pugzly Paranoid (IV) Inmate From: 127.0.0.1 Insane since: Apr 2000	posted 02-28-2002 08:22 Actually, set the height to 100%. I've made a few changes, including XHTML compliance, but this looks like what you're after: code: <html> <head> <title>Finlinson Design</title> <meta http-equiv="Content-Type" content="text/html;" /> </head> <body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%"> <tr> <td align="right" valign="bottom" height="131" width="111"><img src="tl-1.jpg" width="111" height="131" alt="" /></td> <td background="t.jpg" align="left" valign="bottom" height="131" width="101"><img src="tl-2.jpg" width="101" height="131" alt="" /></td> <td background="t.jpg" align="left" valign="bottom" height="131"></td> <td align="left" valign="bottom" height="131" width="110"><img src="tr.jpg" width="110" height="131" alt="" /></td> </tr> <tr> <td background="l.jpg" align="right" valign="top" width="111" height="100%"><img src="tl-3.jpg" width="111" height="81" alt="" /></td> <td colspan="2"> <div align="left"> </div> </td> <td background="r.jpg" width="110" height="100%"> </td> </tr> <tr> <td align="right" valign="top" width="111" height="110"><img src="bl-1.jpg" width="111" height="110" alt="" /></td> <td background="b.jpg" align="left" valign="top" width="101" height="110"><img src="bl-2.jpg" width="101" height="110" alt="" /></td> <td background="b.jpg" align="left" valign="top" height="110"> </td> <td align="left" valign="top" width="110" height="110"><img src="br.jpg" width="110" height="110" alt="" /></td> </tr> </table> </body> </html> [This message has been edited by Pugzly (edited 02-28-2002).]
Quarath Bipolar (III) Inmate From: Magna, UT Insane since: May 2000	posted 02-28-2002 16:23 I thought I had removed the height once I thought but maybe I missed it. Thanks a lot guys. Pugzly, Silence I'll give that try tonight after work
Quarath Bipolar (III) Inmate From: Magna, UT Insane since: May 2000	posted 02-28-2002 18:17 WOW! I haven't posted it yet but I cut n pasted and viewit on my machine and that is what I remember it doing before. I think I'll go to the /DIV for dummies thread now. It's amazing what one DIV Statement will do. Thanks Pugz [This message has been edited by Quarath (edited 02-28-2002).]

Preserved Topic: Slices & tables problem\$

Author

Thread

Quarath
Bipolar (III) Inmate

From: Magna, UT
Insane since: May 2000

posted 02-28-2002 03:10

I have created an image that is to act as a frame around th content of a web page. I am assembling it in essentially a 3 x 3 table inserting each corner image and the top and side images are set to the background of the table cell so they can tile and allow the illusion of the frame resizing. I have done this successfully before on a little less complex test but for some reason now I can't make it work. The table needs to be 100% both width and height. I have tried setting specific cells to specific pixel lengths so that the only cell that is dynamic is the center the corners are static and the top/bottom only expand horizontally and the left/right only expand vertically.

I can post it somewhere later if needed just don't have time right now but any help would be greatly appreciated.

butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

posted 02-28-2002 03:42

I'm sure a look at the code and images in question would allow everyone to help you much better.

-Butcher-

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

posted 02-28-2002 04:42

I think I have an idea about what your talking about but, I'm unclear as to what your problem is. (I know what you wan't to do, just don't know what problem your having.) Any links?

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 02-28-2002 04:55

This is the basic code that will do the trick. The top/right/bottom/left _bg images will need to tile in the direction they will need to stretch, of course -

code:

<table cellpadding=0 cellspacing=0 border=0>

	<tr>

		 <td><img src="top_left.gif" width=3 height=3></td>

		 <td width-="100%" background="top_bg.gif">&nbsp;</td>

		 <td><img src="top_right.gif" width=3 height=3></td>

    </tr>

	<tr>

		 <td height="100%" background="left_bg.gif">&nbsp;</td>

		 <td width="100%" height="100%">...Your Text goes here... </td> 

		 <td height="100%" background="right_bg.gif">&nbsp;</td>

	</tr>		 

	<tr>

		 <td><img src="bottom_left.gif" width=3 height=3></td>

		 <td width-="100%" background="bottom_bg.gif">&nbsp;</td>

		 <td><img src="bottom_right.gif" width=3 height=3></td>

    </tr>

</table>

Quarath
Bipolar (III) Inmate

From: Magna, UT
Insane since: May 2000

posted 02-28-2002 06:12

OK I posted it here http://www.finlinson.com/design/

I know I had similar thing that I did just for fun working before but I can't find it know. The problem is the cells will not stay a static size so the images drift apart when sized large.. This has couple extra cells but it still should work.

DL - I will look at that closer tomarrow and see if will help. I don't remember it being to difficult before.

I left the borders just to demonstrate the slices for the time being I will remove them later. Resizing the window My main concern is when maximized on a large res screen it comes apart.

silence
Maniac (V) Inmate

From: soon to be "the land down under"
Insane since: Jan 2001

posted 02-28-2002 06:55

Okay, here's the problem. In your second <tr>, the first <td> has a height setting:

code:

<TD align=right background="Finlinson Design_files/l.jpg" height=281

Just remove the "height=281" and the page should work fine.

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted 02-28-2002 08:22

Actually, set the height to 100%. I've made a few changes, including XHTML compliance, but this looks like what you're after:

code:

<html>

<head>

<title>Finlinson Design</title>

<meta http-equiv="Content-Type" content="text/html;" />

</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table width="100%" border="0" cellpadding="0" cellspacing="0" height="100%">

  <tr> 

    <td align="right" valign="bottom" height="131" width="111"><img src="tl-1.jpg" width="111" height="131" alt="" /></td>

    <td background="t.jpg" align="left" valign="bottom" height="131" width="101"><img src="tl-2.jpg" width="101" height="131" alt="" /></td>

    <td background="t.jpg" align="left" valign="bottom" height="131"></td>

    <td align="left" valign="bottom" height="131" width="110"><img src="tr.jpg" width="110" height="131" alt="" /></td>

  </tr>

  <tr> 

    <td background="l.jpg" align="right" valign="top" width="111" height="100%"><img src="tl-3.jpg" width="111" height="81" alt="" /></td>

    <td colspan="2"> 

      <div align="left"> </div>

    </td>

    <td background="r.jpg" width="110" height="100%"> </td>

  </tr>

  <tr> 

    <td align="right" valign="top" width="111" height="110"><img src="bl-1.jpg" width="111" height="110" alt="" /></td>

    <td background="b.jpg" align="left" valign="top" width="101" height="110"><img src="bl-2.jpg" width="101" height="110" alt="" /></td>

    <td background="b.jpg" align="left" valign="top" height="110"> </td>

    <td align="left" valign="top" width="110" height="110"><img src="br.jpg" width="110" height="110" alt="" /></td>

  </tr>

</table>

</body>

</html>

[This message has been edited by Pugzly (edited 02-28-2002).]

Quarath
Bipolar (III) Inmate

From: Magna, UT
Insane since: May 2000

posted 02-28-2002 16:23

I thought I had removed the height once I thought but maybe I missed it. Thanks a lot guys.

Pugzly, Silence I'll give that try tonight after work

Quarath
Bipolar (III) Inmate

From: Magna, UT
Insane since: May 2000

posted 02-28-2002 18:17

WOW!

I haven't posted it yet but I cut n pasted and viewit on my machine and that is what I remember it doing before. I think I'll go to the /DIV for dummies thread now.

It's amazing what one DIV Statement will do.

Thanks Pugz

[This message has been edited by Quarath (edited 02-28-2002).]