CSS Flexible rounded corners box with one (single) background image

Here's my technique for rendering rounded corner boxes for Joomla. It's flexible, it can stretch both horizontally and vertically.

I use one large background image cleverly positioned in each of module's nested divs.

One image means one HTTP request, and this is as good as it gets for loading speed. The only limitation with this technnique is that a module cannot be infinitely large, it must be a bit smaller than the background image. The image i'm using is 775px wide x 1969px tall, so it should accomodate very large modules. It only weights 15.6KB

There are no IE hacks, it just works in all browsers(tested in Firefox, Opera 9, IE6, IE7).

So, let's get on to the CSS:

/*TeachMeJoomla's
flexible rounded corners module CSS*/
 /*image setup */
 div.module-green, div.module-green div{
 background:
url('images/rounded_green.jpg');
 
 }
 /*replaced with TeachMeJoomla's single image technique*/
 
div.module-green
 {
 padding: 0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
 background-repeat:no-repeat;
 background-position:bottom left;
 height:1%;
 width:auto;
 }
 
div.module-green div
 
 {
 margin:0px 0px 0px 13px;
 background-repeat:no-repeat;
 background-position: bottom right;
 
 padding: 0px 0px 13px 0px;
 width:auto;
 }
 div.module-green div div 
 {
 
background-position: top right;
 
margin: 0px 0px 0px 0px; 
 
padding: 0px 0px 0px 0px;
 }
 div.module-green div div div 
 {
 
margin:0px 13px 0px -13px;
 
background-position: top left;
 
padding: 13px 0px 0px 13px;
 }
 /*reset nested divs*/
 
div.module-green div div div div
 {
 padding:0px 0px 0px 0px;
 margin:0px 0px 0px 0px;
 
background:none;
 
background-image: none;
 
background-position: top left;
 
background-repeat: repeat;
 
background-color: transparent;
 
width:100%;
 }

Here's the HTML, generated from your template  by

  mosLoadPosition('module_position',-3)

or (Joomla! 1.5)

<jdoc:include type="modules" name="module_position" 
 style="rounded"   headerLevel="3" />

<div class="module-green">
 
<div>
 
<div>
 
<div>
 
<p>
 
Look! I'm a flexible rounded corners box 
 with 1 single background image!
 
here's more HTML
 
</p>
 
<ul>
 
<li>item</li>
 
<li>item</li>
 
<li>item</li>
 
<li>item</li>
 
</ul>
 
 
</div>
 
</div>
 
</div>
 </div>

And here's the final rendered box. 

Are you a Joomla/PHP/Web developer? You may want to check our freelance marketplaces list.

---

Give us some social love (it really works now)!

Comments (5)

Write Comment

Please keep the topic of messages relevant to the subject of the article. Please don't use comments to plug your web site. Links are rel='nofollow'-ed Please refresh the page if you're having trouble with the security image code
Name:
E-mail
Homepage
Title:
Comment:
Code:*