SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed content area with drop-down shadow - problem with rounded corners

    Hello!

    I'm currently working on a website that you'll find at danielnorstrom DOT net. As you can see, it's based on a centered 780px wide content area with a drop-down shadow around it. The entire document is supposed to have a minimum-width of 800px - including the shadow areas - which means that if you resize your browser window to exactly 800px in width, it should only show the 780px content area in the middle, and 10px of the shadows on either side.

    The current way I've decided to go about doing this is by layering a bunch of DIVs and position a header, middle and footer shadow image in one layer each - probably the standard way of doing this.

    However.........

    Upon finishing the site I realize that the rounded corners of the dropdown-shadow cuts into the middle part of the document, and I realize that on both the top and bottom parts of the site, the rounded corners continue into the central area by about 33px.

    My question to you is, how do I place these 33px continuations of the rounded corners in the middle shadow area without creating a darkened overlay effects due to overlapping images?

    To give you a better idea of what I'm trying to do, here's a piece of art by yours truly describing the problem:

    www DOT danielnorstrom DOT net SLASH help.png

    I'd REALLY appreciate any help I can get on this. I've asked all of my web-savvy friends but they couldn't think of a good solution.

    Thanks in advance!

  2. #2
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello! I finally managed to solve this. What I did is I made two separate horizontal areas above and below the content area, then used negative margin to position the content area correctly.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Glad you managed to solve it yourself and sorry that we were too slow today


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
  •