The following inclodes a bunch of color styling as well as the margin styling for centering, but itshould illustrate the point. The z-index puts the shadowed div behind the other one.
HTML Code:
.fshadow { /* properties on form shadow */
width: 400px;
height: 520px;
position: absolute;
left: 50%;
margin-left: -190px;
top: 50px;
background-color: #cdcdcd;
}
.fbox { /* properties on form container */
width: 400px;
height: 520px;
position: absolute;
left: 50%;
margin-left: -200px;
top: 40px;
border-top: 2px solid #910000;
border-left: 2px solid #910000;
border-right: 2px solid #6E0000;
border-bottom: 2px solid #6E0000;
color: #000000;
background-color: #FFFFFF;
font-weight: bold;
text-align: center;
}
<div class='cbox black p34' style='width:1270px; margin:30px 0; text-align:center'>
<div class='fshadow' style='width:900px; height:145px; margin-left:-440px; top:150px; z-index:120;'>
</div>
<div class='fbox' style='width:900px; height:145px; margin-left:-450px; top:140px; z-index:125;'>
</div>
</div>
Bookmarks