PDA

View Full Version : Liquid Web Design (Using Tables)


Fragg
12-08-2006, 07:17 PM
I've designed a few personal web pages both in FrontPage and as of a couple of years ago using Dreamweaver exclusively. I'm trying to improve my web page design flexibility so my web pages can display the two more common resolutions (1024 x 768) and (1152 x 864) given the monitor trends these days. I always designed for (1024 x 768) a never gave the other resolutions much design thought until I bought a new monitor and took a look at one of my pages in a different resolution (ugh!).

Even though I've done this before, I'm self-taught and still consider myself an amateur at this, so forgive what may be stupid questions. :roll:

I'm trying to design a web page with three columns, the center fixed column will have a graphic background that acts as a container for positioned layers containing an I-frame as well as a Java text scroller and a top header that will contain a layer with Flash content. Obviously, if the center frame resizes to fit a particular viewer resolution, all these pages elements will be scattered out of alignment with the background container. I know it may be possible to do without tables using CSS, but I would like to stick with tables for the moment.

I need to make the two side columns expand (or contract) to fit the browser window in response to different resolutions, but keep the center column fixed and centered in the browser so my positioned content does not go out of alignment.

Can anyone offer any guidance? I know this is probably simple to do, but some reason whatever I try does not work. Do I have to nest the center column inside another table or something? Any help with steps to follow would be much appreciated. A good website link on this topic to help me along would also be welcome.

Regards.

domedia
12-08-2006, 07:25 PM
welcome to the forums Fragg!

Tables or frames? You talk about both.

To define a width, simply use <element style="width: 300px;">

Fragg
12-08-2006, 07:29 PM
welcome to the forums Fragg!

Tables or frames? You talk about both.

To define a width, simply use <element style="width: 300px;">

My bad--no frames. Should have called it the center column. The way I thought up the design is to use three columns (just for formatting) and have the center column be wider to hold the content and the table columns on either side to expand or contract with resolution changes to fill the browser space. The center column with content remains fixed always.

Like this:

|<---Column 1 (variable)--->|<-----Column 2 (fixed width/centered always)------>|<---Column 3 (variable)---->|

domedia
12-08-2006, 10:24 PM
Did you try to just set a width for the center column?
My table skills are getting a bit rusty, but that what's the width property is for.

gmcrone
12-09-2006, 01:38 AM
It can be done using nested tables.
Main table set width to 100%
Inside this set up another table with 3 columns.
Left column set to for example 15%, center column a fixed width, right column at 15% or whatever.

Much easier to do with CSS.

Mike...

Fragg
12-20-2006, 12:51 AM
Yes--thanks. Ended up doing that and it works great (and resizes with browser window to a point). That's what I wanted.

Now is there a trick for nesting Flash content in the header frame? When I insert the flash banner I made, it does not show up inside my cell but lower down. I can't figure out why. I can't use a layer to hold the flash content, because the layer won't resize with the table, so it has to go inside the header table cell. Any ideas why when I insert it into the table in Dreamweaver it looks perfect, but when I tested in IE the flash content shows up lower (below the table cell that's supposed to house it)?

gmcrone
12-20-2006, 04:50 AM
Yes--thanks. Ended up doing that and it works great (and resizes with browser window to a point). That's what I wanted.

Now is there a trick for nesting Flash content in the header frame? When I insert the flash banner I made, it does not show up inside my cell but lower down. I can't figure out why. I can't use a layer to hold the flash content, because the layer won't resize with the table, so it has to go inside the header table cell. Any ideas why when I insert it into the table in Dreamweaver it looks perfect, but when I tested in IE the flash content shows up lower (below the table cell that's supposed to house it)?

Can you post a url so we can see the code ?