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

how to achieve nice shadow-type border

If you look at web page
http://www.rogershelp.com/help/home.shtml
you can see on the left side news bulletin with shadow red border, so my question is How to achieve like this shadow-like border around element ?
0
amakalski
Asked:
amakalski
  • 4
  • 2
  • 2
1 Solution
 
bvinsonCommented:
I think this page will show you exactly what you need.

bvinson
0
 
bvinsonCommented:
Hmmm,

How about a link??

http://www.alistapart.com/articles/cssdropshadows/

Sorry,
bvinson
0
 
DaydreamsCommented:
Greetings amakaski!

Take a look at this (I gave it some color to make it easier to see):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>table drop shadow</title>
<style type="text/css">
body{background-color:#ffffff;font-family:Times New Roman, Verdana, Arial;}
.box { float: left; width:100px; height:100px;}
#boxContent { border: none; background: #fcf;  position: relative; left: -3px; top: -3px;}
#boxContainer { position: relative; background: #ff0000; margin: 4px;}
</style>
</head>
<body>
<div class="box" id="boxContainer">
<div class="box" id="boxContent">
<table><tr><td>this is a table</td></tr><tr><td>with a drop shadow.</td></tr></table>
</div>
</BODY>
</HTML>
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
DaydreamsCommented:
amakalski, just so you know, you don't have to use a table. You can, for example, change:

<table><tr><td>this is a table</td></tr><tr><td>with a drop shadow.</td></tr></table>

To:

<p>This has a dropshadow</p>

You can also change the color of:

#boxContainer { position: relative; background: #ff0000; margin: 4px;}

..to any background-color you like.
0
 
amakalskiAuthor Commented:
Greetings Daydreams,
1.I noticed there is one </div> tag missing, should I put it before </body> tag ??
2. Do you know what browsers are going to support this code ?
0
 
DaydreamsCommented:
amakalski,
1. You are very observant! Yes, you should add the closing </div> tag before the </body> tag.
2. This is fine in IE and Mozilla. Should be fine in modern browsers with CSS support.

0
 
amakalskiAuthor Commented:
@Daydreams,
:-) It's my Dreamweaver editor who found this.
Thanks, I give you the points
0
 
DaydreamsCommented:
amakalski,

Glad to help, and thanks for the A:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

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