Nice boxes with shadows using tables!

how to do it with divs?

[fischermx]

I recently found a site which had a nice boxes for content with inside shadows. I streaped the code and find out they were using a table for content inside a table, in which the latest has the pics for the "shadow" as background for thir cells on top, left, right and bottom ...
The resulting HTML is somehow clean since all this is done in the CSS.
I'm trying to do this using pure DIVs instead of tables, but can't find a clear approach to do it.
Does anyboy has an example of this kind?

[createErrorMsg]

Does anyboy has an example of this kind?

Search for an article "Custom rounded corners" by Soren Madsen. The shadows in his example are outside drop shadows, not inner ones, but if you're using graphical shadows, it shouldn't matter. The article was once published on ALA. He also hosts a version on his own site Picment [picment.com].

Post back if you run into any trouble with the article or adapting his code to your application.

cEM

[fischermx]

Thanks for your advise, the article and site is very usefull.
The only problem I see, and that's why I ended here, is that any sample I found are over complex. I mean, I don't need rounded corners, and my aim here is to have a very simple HTML and put the box in pure CSS.
It would be wonderfull to have :

#shadowbox
{
width:257px;
height:100px;
background: url("box_top.jpg") top right repeat-x;
background: url("box_bottom.jpg") bottom right repeat-x;
background: url("box_left.jpg") left repeat-y;
background: url("box_right.jpg") right repeat-y;
}

But there's no way to specify "background side specific image" nor "border side specific background" ...

[createErrorMsg]

Sadly, no. One element can have only one background image. However, there are ways to creatively place background images in a way that, provided the details cooperate, can let you use plain, semantic markup to get the effect you want.

For instance, the code you just posted shows an explicit width and height for the element. In this case, you would only need two elements to attach styles to in order to surround it with a graphical border.

Say your box is a div with a heading and a paragraph inside (not an uncommon setup). That basic markup provides more than enough to create a shadow border. Start with two images. One for the top: 257px wide and about 20px tall, that includes the top and side borders to that height. The other at 257px wide and 100px tall with the bottom border and both side borders. Now use this mark up and CSS:

html:
<div id="shadowbox">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>

css:
#shadowbox{
background:url(path/to/bottom_image.gif) center bottom no-repeat;
}
#shadowbox h1{
background:url(path/to/top_image.gif) center top no-repeat;
}

Result, a drop shadow border around the whole box. The header's background image will overlap the divs, laying the top edge of the box right over the side borders.

If the height of the box will not be set, but can reasonably be expected to remain within a certain range, make the height of the bottom image as tall as what you expect the tallest box to be...say 1000px. The box can then vary in height depending on content, and will retain the border as long as the box doesn't get any taller than 1000px.

Soren Madsen's article details a way to get the same results with variable WIDTH boxes, which is much trickier and requires more hooks for the CSS, but with some creative thinking about what elements are involved, you can usually limit the number of "extra" elements needed to a very bare minimum.

cEM

[fischermx]

Thanks a lot!

I'm almost done with this approach, however, I think I hit a bug in IE.
If you can see the page in my profile I uploaded my experimental box, I'd really appreciate it.
Both divs for top and bottom has a gap between it and the content div!
I have no idea where this space is coming from.
Firefox looks good.

:(

[fischermx]

You know what, it seems that IE always one to have a minimum of 19 pixels height ...
I'll research on this.

[createErrorMsg]

I think the problem here is that you're trying to force seperate divs to line up correctly across browsers, and experience tells me (and reading in this forum tells me I'm not alone), that this is a nearly impossible feat. There are simply too many wonky things browsers can do to screw it up.

So instead of "stacking" divs, let's try nesting them, instead...

<div class="textHeader">
<h2>Lorem ipsum</h2>
</div>
<div class="boxTop">
<div class="boxFooter">
<div id="shadowbox">
<div class="textInShadowBox">
this is a cool box, yeah right with lots an dlots of text and more of dummy text
</div>
</div>
</div>
</div>

BoxTop has become the top level parent. Inside that, we've nested BoxFooter. Last, we nested shadowbox inside. Textheader remain s aseperate div above the others.

Now we'll shuffle the background images around a bit. The middle background image (the two side borders) will go on the top level element: boxTop. That's because we want the top border image and the bottom border image to sit on top of the side-border image, hiding the top and bottom 6px with the appropriate edge. The bottom image will go on the first nested element, boxFooter, positioned at the bottom. The top image will go on the inner most element, shadowbox, so that it sits on the very top of the heap.

Here's the css...

.textHeader, .textHeader h2
{
font-size:1.0em;
width:257px;
clear:both;
margin:0px;
padding: 0px;
background: url(box_top_bg.jpg) top repeat-x;
}

.boxTop
{
margin: 0px;
padding: 0px;
width: 257px;
background: transparent url(widebg.jpg) repeat-y;
}
#shadowbox
{
width:257px;
height:200px;
margin: 0px;
padding: 0px;
background: transparent url(wideTop.jpg) top no-repeat;
}

.boxFooter
{
margin: 0px;
padding: 0px;
width: 257px;
background: transparent url(wideBottom.jpg) bottom no-repeat;
}

Note that the heights have been removed from boxTop and boxFooter. They're not necessary. In fact, we want both of those elements to stretch the full height of the box.

Also note that the contents of textHeader must have margins and padding removed in order to make that box adjacent to the other.

This box appears identically between FF, IE6 and Opera.

cEM

PS: Deliver compliant browsers a min-height of 200px (on #shadowbox) and IE a height of 200px. The result will be a box that is at least 200px tall, but resizes, and takes the graphical box borders with it, when needed...

#shadowbox
{
width:257px;
min-height:200px;
_height:200px;
margin: 0px;
padding: 0px;
background: transparent url(wideTop.jpg) top no-repeat;
}

[MatthewHSE]

I'm not sure if this will do what you want, but there's some pretty neat stuff going on here [techpatterns.com] that you might want to check out.