Cleanest way to build boxes with rounded edges, borders/dropshadows and gradients — OZONE Asylum, home of the Mad Scientists

CSS - DOM - XHTML - XML - XSL - XSLT

Cleanest way to build boxes with rounded edges, borders/dropshadows and gradients

This page's ID: 31025

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hi, I've been working on a site the last week or so and I'm beginning to feel that I'm going about things the wrong way to build these panels that I've had from my design. [img]http://i41.tinypic.com/2ymsuuo.jpg[/img] Here is an example panel, the content that fits inside can grow in length, so the width of the panel will be fixed, but not the height. usually I would crop the image into two parts, a large top part, and a small bottom part, that would include the curves only, if necessary I would add a backround colour to match the end point of the gradient. The problem here is that this involves a drop shadow and sits on a background that includes a gradient as well (may not in this screenshot), so I want to use a png to work best with the drop shadow on the box and the anti-aliasing on the curves, however this will cause me problems with IE6. In any case here's a sample of what my current code looks like pretty much [code]<div class="panel"> <div class="innerPanel"> <p>This is the content inside my panel</p> </div> </div[/code] [code] div.panel { background: url("../images/bg_panel_bottom.png") no-repeat 0 100%; padding: 0 0 5px; } div.innerPanel { background: url("../images/bg_panel_top.png") no-repeat 0 0; padding: 5px 5px 0; } [/code] Witht he code above I would use a large extended [i]bg_panel_top.png[/i] so that if the panel grew it would mange, the problem here is that the gradient would lose its visual appeal, and it's posible with excessive content that the background would eventually run out and look broken. Now I've no phobia of adding mroe divs, but I do want the code to be clean and slick, so it is easiy readable and rewritable, I also don't want to rely on any kind of JavaScript solution, so, has anyone got any ideas or points they'd like to raise, any suggestions on how to improve this? [url=http://www.alebie.com][img]http://www.geocities.com/blaise69dude/images/BlaiseSig.gif[/img][/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu