Ways to tackle a layout.

Hi,

I'm having one or two issues working out how to tackle the layout below.

I've found this post very useful for making sure the footer image always remains at the bottom:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

What I've managed so far:

1. Get the fade going as a repeated background in the body tag along with a background colour of the deepest purple so when the gradient image runs out it isn't white below.
2. Created the footer image (the one with the gradient background) and the header logo.
3. Created the frame which remains at 100% height.

The way the layout needs to work is as follows:

1. The text area must be expandable (with the white background).
2. The main centre graphic will change on each of the 5 pages.
3. The left menu is fairly standard with rollovers. If this needs to be sliced using the old way then that's fine. What's most important is that the rollover happens when you hover over any part of the rectangle its on (and not just the text link).
4. The thin vertical purple strips always go to the bottom of the screen along with the drop shadow.
5. Links at bottom are live text to keep the search engines reasonably happy.

The problem I'm having is working out how to frame it all. I'm thinking of having an inner column which is just the content and two outer columns which have a background of the fade, drop shadow and the vertical dark purple border and then placing the left hand menu over the top as a sliced up table and the right hand image overlap on the right as a separate one (so each main graphic would be split into two).

Is that the easiest way to tackle it?

Ideas very welcome...

Thanks,
Richard

 

There is probably a better way of handling this, but unless you've already done something similar in the past (or found a live example) then you will have to experiment on your own. That's the beauty of CSS programming and how you end up learning new things. My suggestion is to just do your best in achieving the look you want, and then later on, you might discover a new better method to do a specific thing.