Rounded content Box

Posted under » CSS on 22 June 2010

Its best to use the purely CSS method because it is simple but there are times the client uses an older browser so it won't work. You can't go wrong with graphics.

Lets get to work. Put this on the CSS.


.con_topleft, .con_bottomleft { float:left; } 
.con_topright, .con_bottomright { float:right; } 

.con_topleft {
  background-image: url("../images/con_topleft.jpg");
  background-position:top;
  background-position:left;
  }
  
.con_topright {
  background-image: url("../images/con_topright.jpg");
  background-position:top;
  background-position:right;
  }
  
.con_bottomleft {
  background-image: url("../images/con_bottomleft.jpg");
  background-position:bottom;
  background-position:left;
  }

.con_bottomright {
  background-image: url("../images/con_bottomright.jpg");
  background-position:bottom;
  background-position:right;
  }
  
.con_topleft, .con_bottomleft, .con_topright, .con_bottomright  { 
	margin:auto;
	background-repeat:no-repeat; 
    } 

#bottom { height:10px;}

Then put this on the body.



$kontent

You will note that I have to create id=bottom which is not necessary for ie or firefox. However Safari needs this because otherwise the height will be taller at the bottom.

There will be times when it just doesn't look straight, so you have to go back to the old days where you put images instead of css. Works with fixed width pages.


web security linux ubuntu GIT svn Raspberry apache mysql php drupal cake symfony javascript Ajax css