Changing template size depending on content

1

I was wondering how sites like these:
http://www.absolutecross.com

Stretch their templates according to their content amount? It seems like there is an image which repeats so it makes the template look longer when there is more content.

If you don’t know what i mean, go to different areas of the site, and then look at your scrollbar size. It changes, but the template looks the same, but there is more content :-\

ANyone know howta do this?? thanks!!

2

The “trick” is done using tiled background images within table cells for the sides, top and bottom edges so that they’ll expand and contract as needed.

Here’s the pertinent part of the source code, cleaned up a bit to be easier to read.


<table WIDTH="310" BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#F2F2F2">
  <tr>
    <td><img SRC="topleft.jpg" WIDTH="19" HEIGHT="29"></td>
    <td BACKGROUND="toptile.jpg"><img SRC="topmid_left.jpg" WIDTH="22" HEIGHT="29"></td>
    <td BACKGROUND="toptile.jpg" ALIGN="right"><img SRC="topmid_rt.jpg" WIDTH="109" HEIGHT="29"></td>
    <td><img SRC="toprt.jpg" WIDTH="26" HEIGHT="29"></td>
  </tr>
  <tr>
    <td BACKGROUND="sideleft.jpg" WIDTH="19">&nbsp;</td>
    <td COLSPAN="2" WIDTH="100%" VALIGN="top" BGCOLOR="#F2F2F2" CLASS="smaller-content">
      {text content here}
    </td>
    <td BACKGROUND="sidert.jpg" WIDTH="26">&nbsp;</td>
  </tr>
  <tr>
    <td><img SRC="botleft.jpg" WIDTH="19" HEIGHT="37"></td>
    <td BACKGROUND="bottile.jpg"><img SRC="botmid_left.jpg" WIDTH="22" HEIGHT="37"></td>
    <td BACKGROUND="bottile.jpg" ALIGN="right"><img SRC="botmid_rt.jpg" WIDTH="109" HEIGHT="37"></td>
    <td><img SRC="botrt.jpg" WIDTH="26" HEIGHT="37"></td>
  </tr>
</table>
3

thanks abzoid, but just to make sure i get this right i have a couple of quesiton :slight_smile:

Since i made my template in fireworks, i havta insert slices right. So where do i get the bottom tile and the top tiles? Do i just cut out the parts i want tiled, and save them seperately? thanks

4

Right, you cut a portion of the graphic from those top and bottom edge slices so that each will tile as desired when used as a background image within the appropriate table cells.

5

My advice would be to learn dreamweaver. It makes much cleaner sites. Fireworks can make life easy but the code it generates it pretty messy.

Just use Fireworks to output your images and build the site in Dreamweaver.

But if Fireworks does it for you, stick with it i guess. Just means you’ll be pretty limited in what you can do.

:slight_smile: