SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast EspenA's Avatar
    Join Date
    May 2004
    Location
    Norway, Oslo
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would you build this layout?

    Howdy,

    I'm redesigning a webpage these days, but am now stuck with a problem I haven't faced earlier. I think this actually is quite simple to do, but I'm not able to figure how exactly it can or should be done at the moment. Input, please

    Code:
    <body>
        <div id="header"><h1>...</h1></div>
        <div id="site">
            <div id="menu"></div>
            <div id="content"></div>
        </div>
    </body>
    And:

    Code:
    body { background-image: url(leftmenubg.jpg); background-repeat: repeat-y }
    #header { height: 200px }
    #site { width: 900px }
    #menu { width: 200px }
    #content {width: 700px }
    The case is that the height of the content in #content varies, so the entire #menu should have the background-image defined in body. The reason I put this code in body was to make it independent of the content and thereby using it as a faux column.

    So far so good. But here's the problem: I'm going to add a rounded corner (located in an image) at the bottom left corner in the menu. The problem is that the image has to be fixed like you can do with background-attachment: fixed;, but that's not possible in this case.

    1) I've tried to have a layer absolutely positioned with a background image defined and background-attachment: fixed, but the combination didn't work well.

    2) The rounded corner can't be included in leftmenubg.jpg because you never know the height of the site.

    Any suggestions?
    Last edited by EspenA; May 5, 2007 at 04:16.

  2. #2
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would use a faux colum not in the body but in the menu.

    I would use #site to center the site if you want to center (I like to, very web 2.0)

    Anyway to get rounded corners on the bottom, I leave the #menu with a solid bg color and then at the end of the #menu div, I use sliding doors to allow for rounded corners for fluid width.
    The Internet is prettier on a Mac.

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want the corner background image to be at the bottom of what appears to be the left column regardless of whether #menu really extends that far?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #4
    SitePoint Enthusiast EspenA's Avatar
    Join Date
    May 2004
    Location
    Norway, Oslo
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    psychedelic: But I want the background image in the menu to cover the whole available height, and not just the height of #menu, so placing the image in #menu won't work.

    Kravvitz: Exactly. I want the background image in the menu to always cover the whole height, and then add the rounded corner at the bottom. Even if you scroll, the rounded corner should not move.

  5. #5
    SitePoint Enthusiast EspenA's Avatar
    Join Date
    May 2004
    Location
    Norway, Oslo
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Case closed I used one of the examples from &#171;3 equalizing col layout +header +footer&#187; in this forum and changed a few things Thanks for your replies.


Bookmarks

Posting Permissions

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