4 corner liquid box issue sample...

[ArtphotoasiA]

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

[macneato]

Why wouldnt you use sprites? Then have one generic class. E.g.

/* Generic corners */
.rounded_corners {
background: url(../images/corners.png) no-repeat;
width: 5px
height: 5px;
position:absolute;
}

/* Specific Corners */
.top_left_c {
top:0;
left:0;
background-position: 0 0;
}

.top_right_c {
top:0;
right:0;
background-position: 0 -5px;
}

.bottom_left_c {
bottom:0;
left:0;
background-position: -5px 0;
}

.bottom_right_c {
bottom:0;
right:0;
background-position: -5px -5px;
}

Then all you have to do is position your container class relative. If your container has a border, just make your left/right, top/bottom: -1px

[ArtphotoasiA]

Thanks... I will note...