Close this window to return.
wet-inc
Rounded corners can be done very simply with CSS. I originally came across the idea from ALA where Dan Cederholm put up the concept. Alas Dan did not include any graphics! So after an age playing around, i managed to pull it of! The whole effect relies on just 2 graphics that are for the main part transparent.

Thank you Dan
Special Offer
You could use this as a breakout box to promote something?
Navigation
Enter link   1
Enter link   2
Enter link   3
Enter link   4
Enter link   5
test
next link or test

 

 

Round Corners Box's

Often we want corners on our box's/tables.

Here i hope to show you a couple of ways using CSS to achieve this effect. You can download the files here.

The unlock code is ent556hgf

Dan is the man!

Using the Defined Term and The Definition Data (DT - DD) I got the idea from Dan Cederholm. We can create an effect with just 2 very small graphics.

More than that though, we can change the colour of the rounded box without changing the graphics. Kind of one  graphic fits all.

For the full tutorial you should look at this link ALA Dan's tutorial is great but one thing is he did not offer any copy graphics to pull it of. The graphics used for this example can be downloaded. The width of the graphic is 180 pixels. This creates a pleasing effect and is suitable for most uses. But the effect is not limited to this width. You can create your graphics to any size you want.

The style sheet.

I don't propose to extol the virtues of CSS as many a greater man knows much much more than me, but i have included the style sheet for you to download and use. The zip folder also includes the two graphics that are required. Please note that the graphics supplied are for use on a white page background. However if your page is sky pink no problem just create a new graphic. There are no limits to this tricks uses.

  • Download the files

  • The unlock code is ent556hgf

  • Open the zip file and save the pages to any location but not your web site folders.

  • When you have un-zipped, open up frontpage and open the site you are working on.

  • Make a new folder and call it box.

  • Click once on your new folder and then do File/Import/Folder........

  • The find the folder that you just un-zipped and import it into frontpage. You can now open the pages and see how it works.

Note:

To change the box colour you need to alter the code in html!!!

  1. Click on the area you want the box to appear.

  2. From the style dropdown choose Defined Term - Type your headline then click enter.

  3. Now type your text and click enter twice.

  4. Click on your headline again and then goto html view. The cursor should be flashing between the <dt></dt> tags. A line above and you will see the <dl> tag you need to change it to look like this  <dl id=red> the colour choices are - red/blue/green or nothing for grey.

The full code including some text would look like this:

<dl id="red">
<dt>Special Offer</dt>
<dd>You could use this as a breakout box to promote something?</dd>
</dl>
 

Another Method

Using the following 3 graphics we can make a box with just the images and a small table. The box will stretch vertically but is fixed to a width of 180pixels.

These graphics are also available in the zip files.

 

All you have to do is make a table that is 1 column across and 3 rows down and no borders.

First - drag the top of the box graphic into the top cell and set the vertical position to bottom
In this cell you need to right click and set the box background graphic to be the cell background - don't worry about the vertical position. Because its set as the background as you type the box will expand

you can type text here

and more

use styles for position

 

 

 

 
Finally drag the boxbottom into this cell and set the vertical as top.