PDA

View Full Version : Drop shadow for table


Jean
05-29-2006, 03:00 PM
hi,
I'm building a website using a table as its main layout.
I want to add more of a 3D look and feel to the website...as it is pretty plane right now.Is it possible to add a drop shadow for the table in dreamweaver?So that I can get a slight lift off the page for my main center part(table).

herez an example : http://www.rbc.org/

Thanx!

grammargrub1
05-30-2006, 06:26 PM
Yes it looks better with a drop shadow. I can't help you much but I don't think you can add a shadow in DW. Perhaps you'd have to convert it all to a jpeg or gif, then do the shadow in an imaging prog.

Jean
05-30-2006, 07:24 PM
Thanx grammargrub....
Ya I see what ur saying but I have a lot of varying material in my table..hence i cannot afford to convert it into a jpeg each time just for the drop shadow.

Oh well...I wonder if anybody else has any ideas.

Creative Insanity
05-31-2006, 01:49 AM
Jean just create a small shadow image and on the site create a control table a little wider (say around 10 percent) more than the table with your site in. Then add the DS image as a background image for the control table and just drop and center your content table inside the control table and walla!

So that means.. say your control table is 760px then make the ds image 760px x 10px then make the content table say 720px. Get the idea?

HeadAche
05-31-2006, 10:35 AM
Have you tried saving that web page to your PC and then opening it in Dreamweaver to see how they did it.

Basicly though it's just as Insanity puts it. Google it for a tut.

Jean
05-31-2006, 06:41 PM
Insanity,I kinda get what your saying....do you mean that I should create a table with slightly larger width and then insert the content table into this table??..
So the extra table that I'm creating now would contain 3 colums....2 thin columns on the sides and one large centre column which will contain my main content table (which I originally had)??
Thanx.

PS : Is this the way its conventionally done??

domedia
05-31-2006, 07:33 PM
There's an easy way, and the website you posted above is doing it.
It sets similar to what CI said above, a control element, in this case a simple div container, and then in the stylesheet sets a background image inside it.
#contentSection { background-image: url(/images/contentDropShadowTH.gif); }
If you view source on the page, all the code is there.
As you'll see in the sourcecode, #contentSection is inside the 'control' div #page, which has the width and centering specified.

Jean
06-02-2006, 02:40 AM
hmm....I'm not really familar with CSS....and plus I dont have an explicitly defined contentSection or a footer like they do.
I made a shadow image slighly larger than the table like CI had suggested....and I was wondering what if I could just display that image as the background and then center it( would that be possible)...as my table is also centered.