Building a 3-piece, expandable box

[rnordvik]

Hi all,

I am trying to come up with the most semantic way to create an expandable box, with a semi-transparent background image (for the shadow around the box). I came up with the following, which works in all the major browsers, (PNG backgrounds had to be replaced with GIFs for IE6):

HTML:

Code:

Lorem ipsum

**CONTENT HERE**

**MORE CONTENT HERE**

Return to top

CSS:

Code:

#content, #footer {width: 658px; margin: 30px auto;}
#content h1 {background: url(_images/box_top.png) top center no-repeat; padding: 20px 0 0 36px;}
#boxContent {background: url(_images/box_sides.png) top center repeat-y;}
#boxContent p {padding: 0 36px 16px 36px;}
#content p.return {background: url(_images/box_bottom.png) bottom center no-repeat; padding-bottom: 32px;}
#boxContent img {float:left; margin: 10px 36px;}

A demo of the above can be seen here: http://webtest.doubleswirl.com/3sidebox/index.php

Can anyone suggest a better (more semantic, yet still cross-browser compatible) way to do this? I would prefer to stay away from a Javascript solution, and stick with an XHTML/CSS valid solution only.

By the way, Chris, thanks for the wonderful site, and all your fantastic information and tutorials!

Thanks, in advance, for any suggestions you may offer.

-Rob

[jlknauff]

I took a quick look but fail to see why you need a png/gif. It looks like you should be able to do what you’re looking for with 2 divs and some jpgs. Let me know if you’re still having problems.

[rnordvik]

"jlknauff" wrote:

I took a quick look but fail to see why you need a png/gif. It looks like you should be able to do what you’re looking for with 2 divs and some jpgs. Let me know if you’re still having problems.

Thanks for the response.

The reason I need PNG/GIF, is to be able to place this over an image background. The demo page is simply a "proof of concept" to see if I could work out the code, and make it as semantic as possible.

I have updated the demo page http://webtest.doubleswirl.com/3sidebox/index.php, with a background, to better illustrate my point.

Thanks again,
-Rob

[jlknauff]

The dropshadow is subtle, so you really should be able to do it with jpgs anyway.

Here’s the thing; it can be done with pngs, and there is a java script that will make pngs display properly in IE6 – but you can’t make that hack work with bg images.

Try this: cut your jpgs right to the edge of the shadow and try it out, see how it looks. You might be surprised how much you’re over thinking this. If you still can’t get the result you’re looking for, post your raw PSD file on your server and I’ll give you a hand w/ it.

[rnordvik]

Hello, and once again, thank you for your reply and offer of help.

However, I think you are missing the point. This is simply a proof-of-concept, to develop the best, most semantic and compatible technique to add a clean shadow/glow/etc to an expandable box. Just because the shadow on the demo page is subtle does not mean that it will always be that way. I am only using this is a test to develop the technique, as cleanly as possible, so that when I want/need to add it on a client’s site, I don’t have to develop the technique while on a time schedule.

My concern is not whether to use JPEGs or PNGs, as I already know I will be using PNGs. The initial and follow-up questions are simply whether there is a more semantic way to code the page (whether XHTML or CSS), that would still provide the same effect.

If it will make my intentions more clear, I’d be happy to add a huge glow/shadow to the demo page, to better illustrate the point. Otherwise, I hope you will take this for what it is, which is, again, a request for comments on the code/technique, not the actual demo page.

Finally, I am unfortunately aware of the IE6 PNG-background issues, which is why I chose to try GIFs, rather than PNGs for IE6. I think that I’d rather have the shadow/glow/whatever dithered in IE6, than blue/gray. Plus, I’d like to steer away from any solution that requires Javascript, as I mentioned in the initial posting.

Again, while I sincerely appreciate your response and your attempts to help, it seems as though you are not understanding my request.

-Rob

[jlknauff]

Well, there is no way to get around the javascript issue because you need it for the pngs to display properly in IE6, so if you’re requirement is to have no js, then you are dead in the water on this one.

The short answer is, yes, it is possible to create an expanding box using pngs.

Maybe I’ll work up an example this weekend.

[Author]

Posts