• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 854
  • Last Modified:

Shadow/image around div or table

Very simple question that I cannot find the answer too.  I have a table or div on a site and I want to add like a drop shadow/image around the border of that div or table.  

How can I achieve this, either through CSS or HTML.

Check this site out for a good example:
http://www.infusystem.com
0
LZ1
Asked:
LZ1
  • 3
  • 2
2 Solutions
 
bluefezteamCommented:
If you are using a table, this will be quicker to explain.
create a 3 by 3 table

the outer edge cells will hold your shading - the centre cell is for your content.

In photoshop(or similar) create a drop shadow effect which is 10px deep: start with a white square and apply the drop shadow effect, then you need to slice up the shadow into corners and sides. you should end up with corner pieces 10px x 10px and a side and top piece which is 10px x 1px.

With the 4 corners of the shadow you simply drop them into the corner table cells, and give the cells a height and width of 10px; for the sides and top you need to set those images as the BG image for those cells so they will repeat as the table gets longer.

Hope that makes sense.

Heres another tutorial

http://forums.digitalpoint.com/showthread.php?t=374316
0
 
bluefezteamCommented:
0
 
LZ1Author Commented:
The tutorials you provided were ok, but what about making it scalable?  I don't want to have to do it each time I create  a new web page.  
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Devario JohnsonSoftware EngineerCommented:
have a 1px X 1 px image that is your bg but have it repeat X or Y based on if it's the sides or the top / bottom....

then use images for the corners that are similar to the 1 X 1 px ones...it will create the illusion of a image all around (shadow) and it will be scalable based on any dimension.
0
 
bluefezteamCommented:
The solution is scalable - with the sides and top set as BG images, when you stretch the table in either direction, the table will grow and the BG images repeat

It will be scalable
0
 
LZ1Author Commented:
Thanks guys, I got it.  Works like a charm!!!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now