[thelist] Content area with book borders?

John.Brooking at sappi.com John.Brooking at sappi.com
Wed Oct 20 16:56:03 CDT 2004


Hi, all,

   Here's a question of the standard "Is this possible?" variety. I'm
offering to put up a photo album site for my high school class, for pictures
of our recent reunion. For a variety of reasons which I will recount if you
really want me to, I'm taking the approach of coding it myself rather than
go with a service or package. (It should be pretty simple.) The home page[0]
will be a picture of our yearbook, clicking on which takes you "inside" the
book. For the inside pages, I want to design a template with these
characteristics:
   
   * Is fluid in both width and height, expanding to fill the screen width
and content height;
   
   * Has a "book" border to give the content the appearance of being inside
a book.
   
   I have a example page here[1], but it's got a few problems. As you can
see if you view the source, I'm reverting back to the stone age of
table-based layouts, because it seemed easier than CSS (I know, I know, this
is just because I don't know CSS as well) and I don't want to spend a lot of
time on it. (However, CSS-based suggestions are certainly welcome.) Because
of where I want the content area to be, I had to do some colspan / rowspan
tricks, and I think that's making the spacing not work well. You can see
that the center binding image at the top and bottom is not centered. Also,
if you make the width small enough, the height of the row containing the
"Contents" tab grows larger than the image, leaving a gap.
   
   I have posted an image[2] of how I set up the table rows and columns. The
tricky part is I want the content area (the cell labeled R2-3C2-6) to go
right up to the left and right edges of the book image, including over the
page turn images at the bottom. This required that the content area span
multiple columns, and I think this is ruining the centering of the binding
images in column 4. Also, the contents tab requires that the content area
span rows, which is probably causing the gapping problem there.
   
   So my "simple" table-based layout is getting unwieldy. (I know, you told
me so!) So, what advice:
   
      1) Forget tables, use CSS
      2) Or is there a table solution, perhaps made possible by simplying
the design somewhat?
      3) Or can you recommend a package or service, free or very
inexpensive, that would produce this effect for me?
   
   Thanks for any advice.
   
[0] http://www.shoestringcms.com/personal/Tatler84/
[1] http://www.shoestringcms.com/personal/Tatler84/try2/photopage.html
[2] http://www.shoestringcms.com/personal/Tatler84/try2/LayoutPlan.jpg


- John

This message may contain information which is private, privileged or
confidential and is intended solely for the use of the individual or entity
named in the message. If you are not the intended recipient of this message,
please notify the sender thereof and destroy / delete the message. Neither
the sender nor Sappi Limited (including its subsidiaries and associated
companies) shall incur any liability resulting directly or indirectly from
accessing any of the attached files which may contain a virus or the like. 


More information about the thelist mailing list