Table structure for image slices

Is this the best way to go at it?

[scott]

I have an "inverted L" shaped graphic I want to use for a banner and navigation on a site. I WAS just making a huge graphic and making it the background image, and overlaying buttons down the left side.

I decided to give the image slicer a try. (Photoshop 6)

It generated the table and all automatically, but I'm having trouble nesting a table within that one to place the page content into. I' wondering what the "overall plan" or "layout" should be for this type of thing. Should I be using tables in tables, or is there an easier method for this?

[BoneHeadicus]

If you're using Dreamweaver try the "designing with layers" method and then convert "layers to tables".

[oilman]

I nearly always build one large image and slice it up but I usually build my own tables after the fact.

[scott]

I can do that as well. I don't NEED the software to build the tables. It's just convenient.

My real question here is what the table structure is. I can't seem to get the tables to lign up properly to get teh graphics to display right.

Once I start adding content to the page, things start to change. So I figure I try assigning fixed values. But when I do that, I have issues with the page content displaying properly.

Was looking for a sort of guide....something like:

Table 1 left div'd left top position with 2 columns containing graphics. Insert Table 2 in cell ? of Table 1 and fix width to...etc...

I thought there might be a sort of "template" for this sort of thing.

If not, I guess I'll keep at it till I find something that works.

[tedster]

I've never found a "formula" that always works cross browser. Netscape 4.x on the PC is so quirky about how it prioritizes table attributes that several times I've had to think and re-think the possibilities.

The problems I run into are often in the bottom-most row of slices, where Navigator sometimes refuses to bump the slices together vertically, even using valign="top". Spaces or line breaks in the code are often the reason for this bug, but even eliminating doesn't doesn't take care of every case.

So it's I find its a trial and error thing to get Netscape-compatible code.

[tedster]

>> Should I be using tables in tables, or is there an easier method for this?

I'm having lot of success using external CSS stylesheets to create the inverted L for a re-design I'm working on. I really like the way the HTML slims down, and I can put the content section right at the top of the HTML, even though it starts displaying at (150,200) or wherever. The pages I've redone using CSS are getting better rank on several SEs, and they load and render a lot faster than before. Browsers (especially Netscape) take a long time to figure out table structures, but CSS just thunders onto the page.

I think it's time to plan on moving away from tables for layout, as much as is practical. Tables were always intended to be logical, not visual, so there are a lot of browser irregularities to cope with.

Not that CSS support is without bugs (LOL), but at least it's a tool designed for the job.

[knighty]

I still use tables and can usually get them to do pretty much what i want.

If the vertical part of the l shape is just one colour you can use CSS to tile an image vertically and then place the table on top. I have actually done this on a site and nested tables within the L shape with no problems on Explorer, Netscape on both Mac and PC.

Layers are OK but I always have a knighty-mare of a time trying to make them do what i want cross platform and browser.

[BoneHeadicus]

A really comprehensive guide to css is 'Cascading Style Sheets: Designing For The Web' by Hakon Wium Lie and Bert Bos

ISBN 0-201-59625-3