| Boxes |  |
 |
|
| All boxes, pressented in this page, requires a so called dot-image to display correctly. The dot-image is a transparent image which is used to cause a space to appear in a webpage. The space will be just as large as you specify with the width and height -attributes in the IMG-tag. |
| We call our dot-image "dot.gif". If you don't have a dot-image from before, we recommend that you download it by placing the cursor over the empty parenthesis, Ctrl-click/Right-click and select something like "Save Image as...". () |
|
|
|
 |
 |
The PC Screen
consists of four images (top, left, right and bottom). Download the images and copy the code below into your page. To change the size of the box: shrink all four images by an equal amount and change the width of the dot-image and the table by the same amount. |  |
 |
|
The code:
<TABLE BORDER=0 BGCOLOR="#333333" CELLPADDING=0 CELLSPACING=0 WIDTH=283>
<TR><TD COLSPAN=3><IMG SRC="box_pcscreen-top.png" BORDER=0></TD></TR>
<TR><TD><IMG SRC="box_pcscreen-left.png" BORDER=0></TD><TD VALIGN=TOP><IMG SRC="dot.gif" BORDER=0 HEIGHT=2 WIDTH=234><BR><FONT COLOR="#FFEECC">Write your text here.</FONT></TD><TD><IMG SRC="box_pcscreen-right.png" BORDER=0></TD></TR>
<TR><TD COLSPAN=3><IMG SRC="box_pcscreen-bottom.png" BORDER=0></TD></TR>
</TABLE> |
|
 | |  |
|
| | ROUNDED CORNERS
This box requires some experience of tables in HTML. Browse to an on-line HTML writing guide if you don't know how to write tables. (For example: HTMLPrimer by the NCSA)
You can look in the source code to figure out how I made it. The four images, repressenting the corners, are listed below. This box uses radius 10. | | |
 | |  |
|
|
|
radius 5
upper right
upper left
lower left
lower right | radius 10
upper right
upper left
lower left
lower right | radius 15
upper right
upper left
lower left
lower right | radius 25
upper right
upper left
lower left
lower right |
|