Hello all, I have looked around for a way to create round boxes using CSS and images but I'm not quite there yet. Looking around on the web, I came across lots of different techniques but I'm quite puzzled as to how to implement it because I have a very particular setup. Basically, I cannot change the HTML that is available for me to work with and it's limited to this :
<div class="box"> <div class="box-title"><h1>Title of the box</h1></div> <div class="box-content">Content of the box</div> </div> One of the techniques I came across is the following : http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/ It looks quite easy and very promising but I have a hard time applying it to my particular case. Here is the CSS I came up with so far : .box { margin-bottom : 10px; padding:0px 0px 0px 11px; background:url("img/tsr-l.png") top left no-repeat; } .box-title { background:url("img/tsr-r.png") top right no-repeat; margin:0; padding:8px 0px 0.5em 0px; background-color: #eeeeee; color: #eeeeee; font-family: arial, helvetica; font-size: .8em; text-transform: uppercase; text-align: left; font-weight: bold; /* A border at the bottom of the title to draw a "separation" between title and content */ border-bottom: 3px groove; } .box-content { background-color: #eeeeee; margin:0 0 0 -11px; padding-left:11px; background:url("img/tsr-l.png") bottom left no-repeat; } .box-title h1 { background:url("img/tsr-r.png") bottom right no-repeat; } The images are those from the site above but in the end, I can't get the things to display properly, there is always one corner that is not here, or the left and right borders of the box are missing. I would really prefer if javascript could be avoided altogether, but if there are no other options, I'll manage. I'll continue experimenting on my own, but if you could help me out, I would appreciate it very much. Regards Olivier ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
