Re: suggestions needed for table alignment

Karen,

You need to do two things:

1)  Move to what I call a flexible table structure.
2)  Reajust your images to fit this structure.

Huh?  OK, gonna try and explain it with words and diagrams.  This is done 
from memory so if I flub, no warranties expressed or implied.

For this example, I am assuming a 150px navbar and a top header gif of 750px.

<.table border="0" cellpadding="0" cellspacing="0" width="100%">
<.tr>
<.td width="150"><img src="spacer.gif" height="1" width="150"></td>
<.td width="600"><img src="spacer.gif" height="1" width="600"></td>
<.td width="100%"><img src="spacer.gif" height="1" width="100%"></td>
<./tr>

<.tr>
<.td><img src="head1.gif" border="0" height="44 width="150"></td>
<.td><img src="head2.gif" border="0" height="44 width="600"></td>
<.td><img src="spacer.gif" border="0" height="1" width="1"></td>
<./tr>

<.tr>
<.td>-- insert nav table here --</td>
<.td>--insert content table here --</td>
<.td><img src="spacer.gif" height="1" width="1"></td>
<./tr>
<./table>


The first row locks in your cell width dimension for the table.  By making 
the third cell width set to 100 percent, you force the fixed width cells to 
the left hard against the left side of the window, while the right-most 
cell forces the table to full window width, regardless of the window size.

The second row requires you to split your header gif into two separate 
images.  I've actually done this with one large image, but I'm trying to 
avoid colspans in this table, for now.

The third row is where you insert a completed navigation table into cell 
one,  a page contents table into cell two and your spacer gif into cell 
three.  I suggest a fixed width for the contents table because you run the 
risk of having your contents run too far to the right in 1024 and larger 
resolutions.  Also, by using a contents table, you can create a 
cellpadding="x" to create whitespace around the content without having to 
resort to extra code.

The concept may be explained this way.  You have a bookcase with five 
shelves.  You fill each shelf with varying numbers of books, but each shelf 
is never more than two-thirds full and each shelf as it left-most book 
being one volume from your favorite encyclopedia  (your navbar).  Instead 
of using those funky L-shaped metal book holders to support the right-most 
books on each shelf, you use a gigantic spring to push all the book to the 
left.  If you add or remove books from the shelves, the springs keep the 
fixed-width books flush left, with all the free space to the right.  If you 
magically make the bookcase smaller (by width), all the books don't move 
(relatively speaking) while the free space changes in size.

This all make sense?

Dennis


At 19:33 2001-08-24 -0500, Noteworthy Web Designs wrote:
>I still need to get used to this. I need to make a site look uniform at
>800 as well as 1024 resolution. It looks great at 800, but the side
>graphic gets bumped off alignment at 1024.(Something I need to get in
>the habit of checking. One of my customer's family members pointed this
>out, embarrassing me,and rightly so.) Someone who was doing some
>programming on the shopping cart tried to fix the header in the store
>part for 1024, but then it looked funky at 800 and at 640 (which I
>should probably ignore). Any advice? I should probably use percentages,
>but that makes it challenging to get the image sections to align just
>right. I had a devil of a time the way it was!
>One page of the site is at http://www.waxstation.com/mothers.htm
>(The index page will be loaded last to keep anxious distributors from
>peeking til we're done!)
>
>--
>Karen Stafford
>Noteworthy Web Designs
>"Websites Composed with Jazz"
>Web Design,Hosting,Search Promotion
>http://www.noteworthydesigns.com


_________________________________________________________
Do You Yahoo!?
Get your free (at)yahoo.com address at http://mail.yahoo.com

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA