Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Thread Tools Display Modes
Old 03-28-2007, 08:31 PM   #1
Join Date: Mar 2007
Posts: 1
Default Newbie! Rounded content box with drop shadow?


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!

Klaudia is offline   Reply With Quote
Old 03-29-2007, 07:37 PM   #2
Andromeda's Avatar
Join Date: Sep 2005
Location: I reside in the Gamma Quadrant but take regular trips home to feed my cat who lives in New Zealand.
Posts: 400

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.
I am responsible for my attitude. My attitude determines my actions.
Andromeda is offline   Reply With Quote

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

All times are GMT. The time now is 03:16 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com