Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    18
    Thanks
    11
    Thanked 0 Times in 0 Posts

    CSS - Bustin out! Trying something new...Gah!

    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.

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Four sections (divs) in this case:
    1. header
    2. navigation
    3. content
    4. footer

    …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.

  • Users who have thanked VIPStephan for this post:

    capoeirista (09-16-2007)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •