4 corner liquid box issue sample...

Waiting for CSS version 3 (I read that probably we need to wait several years) we all poor webdesigners / webmaster are forced to get mad for the 4 round corner box issue.

- 1 it is possible do the box layout base with tab tag
- 2 it is possible do the box layout base using div tag and no table


Case 1 - is probably easier to work with specially if you have never done that before but is not recommended
Case 2 - actually you do not save much code in the page using div instead of tab but is much better for consistency and for future development


In both cases basically must add a set of corner's images (of the due color), can be 2 or 4 images x box depending if the box have a fix width or a width 100% ===> the liquid case

Today i have just made some of those liquid boxes so I wish to share where the problem is worst, where you need all 4 corners images, and of course you need 4 XHTML elements in order to look them up.

Please note that:
- I have not used a background-color option because the color to be used for my customer was a pantone color not web safe, so no way to make a # color code but need to work with a background-image option _zzz.png
- The 4 corner images are:
_aaa.png _bbb.png _ccc.png _ddd.png







So here comes the CSS...

<!-- main liquid box -->

.minibox {
background-image:url(../images/_zzz.png);
width:100%;
}




<!-- link text image all content style -->

.imgminibox
{
border: #660033 solid 1px;
 }
.textminibox {
text-align:left;
padding:10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
}
a.linkminibox  {
font:Arial, Helvetica, sans-serif; 
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-decoration: underline;
}
a.linkminibox:hover  {
font:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}



<!-- here are the 4 cornes -->


.roundaaa {
background-image:url(../images/_aaa.png);
background-repeat:no-repeat;
background-position: left top;
 }
.roundbbb {
background-image:url(../images/_bbb.png);
background-repeat:no-repeat;
background-position: right top;
 }
.roundccc {
background-image:url(../images/_ccc.png);
 background-repeat:no-repeat;
background-position: left bottom;
 }
.roundddd {
background-image:url(../images/_ddd.png);
background-repeat:no-repeat;
background-position: right bottom;
 }

so here comes XHTML...

<div class="minibox">
               <div class="roundaaa">
            <div class="roundbbb">
            <div class="roundccc">
            <div class="roundddd">
             <div class="textminibox"> 
 

                CONTENT WITH TEXT IMG LINK GOES HERE



             </div>
             </div>
            </div>
            </div>
            </div> 
</div>

Hope you like

Or, you could try this method:

<!-- begin rounded box -->
<b class="rtop">
<b class="r0"></b><b class="r1"></b><b class="r2"></b>
<b class="r3"></b><b class="r4"></b><b class="r5"></b>
</b>


/* by use of margins, the following curves the edges the menu boxes */
b.btop {
margin-top: 0px;
display: block;
background: transparent;
}
b.btop b {
display:block;
height: 1px;
overflow: hidden;
background-color: #ffe1c1;
}

b.btop {
margin-top: 0px;
display: block;
background-color: transparent;
}
b.btop b {
display:block;
height: 1px;
overflow: hidden;
background-color: #ffe1c1;
}

b.r0 {
margin: 0 8px;
background-position: 0px;
}
b.r1 {
margin: 0 6px;
background-position: 1px;
}
b.r2 {
margin: 0 4px;
background-position: 2px;
}
b.r3 {
margin: 0 3px;
background-position: 3px;
}
b.r4 {
margin: 0 2px;
height: 2px;
background-position: 5px;
}
b.rtop b.r5, b.btop b.r5{
margin: 0 1px;
height: 2px;
background-position: 7px;
}

Works pretty well too.

Thanks LadynRed ... did not know that!