The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Grab code

Hi.

I would like to create a box like this one with the shadows on this page here.
I have created my own graphics but I would like to set it up as they have done. However, the code is quite complex, so I'm unable to see how they have done it. It seems to be a mix of divs and tables. Can anybody help me getting the code for this box?

Hi Step and welcome to Sitepoint.
The way these particular people have done it, is first laid it out in a table... and placed an image in the 'left table cell', the 'bottom left table cell', and the 'bottom table cell'.
The one on the left is set to 100% height, the bottom left is a corner so it is left alone, and the one on the bottom is set to 100% width. If you right click to view the background image on the shadow, you can see the original is only 1px high before they elongated it.
Hope that was what you were after.

'how it works'
By constantly layering one DIV atop another, the images get depth-sorted atop each-other. This let's the corner images 'overwrite' the tiled images, which we use the background-position to place instead of floats and/or table elements. We then just have to pad the innermost div BEFORE the content one to push the content in from the shadows. You SHOULD in theory be able to do the same using margins on the content to push it in, but for some reason Opera and FF ignore bottom-margin for SIZING DIV's unless they are position:relative (though it DOES pay attention for spacing them - ARGH!!!)... rather than add position:relative and making even MORE code, I opted for the padding instead.

I think using a 'sliding doors' technique might let you reduce the number of images involved, perhaps all the way down to one, but more likely with just two images... Personally I'd probably make it three images, but make code to allow borders on all four sides... one image would have all four rounded corners in it, while another would be the repeat-y images, and another the repeat-x... in that case you'd have to assign a background to the content area, otherwise the extra borders would show through.

If I have some time tomorrow, I'll toss together an example of that way and pop it onto my server.

SUCKS to nest DIV's that deep, but it beats using 3-6k in images on sliding-doors to pull off what 1k of images can do... to do something with NEITHER tables nor floats, and it's always nice to be FULLY dynamic letting you make your content any size you like.