Olivier Sannier wrote: > 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>
Hi Olivier, Try this: http://www.theholiergrail.com/tests/rctest/index.html (I've also included the source below.) Your HTML configuration was a little different than the example on 456BereaStreet, so I just wrote it based around your specific code. I tested it on IE6/WinXP, IE7/WinXP, Safari 3.1.1/WinXP, Opera 9.50/WinXP, Firefox 3/WinXP, Firefox 3/Ubuntu 8.04 and Opera 9.50/Ubuntu. They all seemed ok. IE6 is showing a weird redraw issue occasionally, even with the hasLayout and relative positioning applied, but I don't have any real answers (or concerns even really) about that. Let me know how it works out for you. --Bill <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <title>Template</title> <base href="http://www.theholiergrail.com/tests/rctest/";> <!--[if IE]></base><![endif]--> <meta name="author" content="Bill Brown"> <meta http-equiv="content-language" content="en-us" > <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="copyright" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="expires" content="0"> <meta http-equiv="last-modified" content="0"> <style type="text/css"> body {padding-top: 20px;} body * {margin-top: 0;} .box { background-image: url("img/rcBL.png"); background-position: 0 100%; background-repeat: no-repeat; margin-bottom: 10px; padding: 0 0 0 9px; position: relative; z-index: 1; zoom: 1; } .box-title { background-image: url("img/rcTR.png"); background-position: 100% 0; background-repeat: no-repeat; display: inline; float: right; margin-top: -9px; position: relative; width: 100%; z-index: 1; zoom: 1; } .box-title h1 { background-image: url("img/rcTL.png"); background-position: 0 0; background-repeat: no-repeat; margin-left: -9px; padding: 10px; position: relative; z-index: 1; zoom: 1; } .box-content { background-image: url("img/rcBR.png"); background-position: 100% 100%; background-repeat: no-repeat; padding: 10px; } </style> </head> <body> <div class="box"> <div class="box-title"><h1>Title of the box</h1></div> <div class="box-content"> Content of the box </div> </div> <div class="box"> <div class="box-title"><h1>Title of the box</h1></div> <div class="box-content"> Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box Content of the box </div> </div> </body> </html> -- /** * Bill Brown * TheHolierGrail.com & MacNimble.com * From dot concept...to dot com...since 1999. ***********************************************/ ______________________________________________________________________ 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/
