Rounded boxes by using one single image, CSS and some HTML statements.
The original idea is from the Website of Francky Kleyneman
See the sample file "sample.php" and its source code.
Generate Image and CSS using the wb
WORKBENCH
 

Finediv is a PHP solution to show boxes with rounded corners using css and only one image. The image is about 1k in GIF format. Cross Browser compatible. NO JAVASCRIPT needed. Simply HTML and CSS. The boxes may have a border. Using the GIF format, the background part of the rounded corners are transparent, allowing to scroll the box over a fixed background.
The approach is rather complex, there are several steps to follow:



What does the install routine FineDiv::install() do?



 

  1. It gives a name to the image and the stylesheet. This name is an ugly md5 hash over the attributes of the image. If you change any of the class attributes, the resulting md5 name for the image will change.
  2. It includes the css file into the page using a <link> - tag.
  3. It tests if the md5 named image file already exists.
    • If the image already exists, then it does nothing else.
    • If the file does not exist yet, then
      1. Creates the image and saves it.
        At the moment the result is far from being perfect and should be reworked by hand for quality websites.( see the lower left curves )
      2. Creates the style sheet and saves it



How does the resulting HTML Code look like?




...
<div class="bfa3f616f58cee66a666875820542c19-top-left"></div><div class="bfa3f616f58cee66a666875820542c19-top-right"></div>
<div class="bfa3f616f58cee66a666875820542c19-inside">
<p class="bfa3f616f58cee66a666875820542c19-notopgap">Your text & other things inside</p>
...
<p class="bfa3f616f58cee66a666875820542c19-nobottomgap">...</p>
</div>
<div class="bfa3f616f58cee66a666875820542c19-bottom-left"></div><div class="bfa3f616f58cee66a666875820542c19-bottom-right"></div>
...