PDA

View Full Version : Newbie! Rounded content box with drop shadow?


Klaudia
03-28-2007, 08:31 PM
Hi

I want to produce a rounded white box (to contain all content) on my home page (and template for all pages), with a coloured background. I want the box to have a drop shadow on one side.

I know how to do this in photoshop/fireworks. My question is, can I use such a large image (i.e. about 800 x 600) on the pages, or would this affect speed? I quick search on google confused me - all kinds about extendable content boxes, CSS etc! I'm a newbie, I need it explained simply! Would it be best to save the corners only of the box in photoshop and add them to a plain white cell in dreamweaver? And how would I do the shadow?

Any help much appreciated!

Claudia.

Andromeda
03-29-2007, 07:37 PM
Hi Claudia.

Welcome to Dreamweaver Club.

You can achieve this effect by using tables. It's a bit cumbersome but it does work.

Create a table, height and width 100% of the screen. The table should have 3 columns and 3 rows.

In Fireworks / Photoshop - create your box. Then reduce the size of the canvas to say 30px x 30px with the anchor point being the top left of the box. Save this image. Then undo what you've done to get the whole box back and then do the same with the other three corners. After that reduce the canvas again to 30px x 30px with the top middle being the anchor point. Then do the same with the other three sides.

You will now have 8 images each corresponding to the different parts of your box.

Back in Dreamweaver - set the first and last columns to 30px each in width (leave the middle one blank). Set the first and last rows to 30px each in height leaving the middle one blank. Your first cell should now be 30px x 30px in size. Set the background for that cell using the first of the images you created. In the second cell use the second image. Etc etc.

So you see, it is long winded but it DOES work. Anything you're not clear on just yell (nicely!!)

There may be easier ways and if there is someone here will probably mention it.