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!
