View Full Version : CSS - Bustin out! Trying something new...Gah!

08-02-2007, 06:33 PM
Hi There -

Most of my CSS has been pretty pedestrian. Now I've been assigned a layout that is a bit more adventurous and I'd really like to try it. You can see it here (http://www.leevodra.com/layout7.gif).

Briefly, there's a vertical nav that is semi-transparent and sits above the other divs. It needs to be a fixed width, but with the option of having it be flexible width.

The main content container sits behind the nav and has a left margin of a percentage. (The same percentage as the right nav div.) It lives underneath the nav div and goes all the way over to the right.

It's better to look at the picture.

How do I approach this? Instead of a header and footer that go all the way across, there's a big vertical stripe that cuts off everything else.

How do I make the text in the main content container be sensitive to the vertical nav? If the vertical nav's flexible, (doubt I can get away with that since it needs to be fixed) then I can have a percentage from the edge. But what if it's fixed width? Do I need a separate text div on the same z-index as the nav? Is there a way to add pixels to a percentage? Do I just cheat and give it its own div with a max-width?

Any help getting started or with the finer points of this layout will be greatly appreciated.

08-02-2007, 08:42 PM
Four sections (divs) in this case:


…all wrapped in a relatively positioned container.
The container would be 100% high, as would be the navigation div which will be positioned absolute, hence being out of the regular flow of elements and just residing on top of everything. The semi-transparency could be achieved with a 2x2 px transparent PNG (workaround for IE 6 required or just ignore transparency there).
The width could be relative with percents.

The other three sections will get a right padding of as much as is needed to make the content of them stay out of the way of the navigation.

Hope that makes sense?

Oh and welcome. :) Nice to have a capoeirista here that is doing web development, too. :D