Web page dropshadow effect

B

bobby2

New Member
Please help!!

I am trying to put a drop shadow effect around my webpage to give the page a lifted effect. I did it already and saw the results. then I made some photoshop changes to the original and tried it again and now it doesnt work!! I have tried everything! the entire code is below, Thank you!:




<html>
<head>
<title>HCG MAIN2 revised3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.dropshadow {
background-image: url(/images/dropshadow.jpg);
background-repeat: repeat-y;
}
.wrapper {
margin-right: auto;
margin-left: auto;
background-image: url(/images/dropshadow.jpg);
background-repeat: repeat-y;
}
body {
background-color: #CCF;
}
-->
</style>
<link href="/documents/dropshadow.css" rel="stylesheet" type="text/css">
</head>
<div class="wrapper">
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">



<div align="center">
<!-- Save for Web Slices (HCG MAIN2 revised3.psd) -->
<table width="973" height="3407" border="0" cellpadding="0" cellspacing="0" class="wrapper" id="Table_01">
<tr>
<td colspan="18">
<img src="images/index_01.jpg" width="973" height="316" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_02.jpg" width="14" height="91" alt=""></td>
<td rowspan="2">
<img src="images/index_03.jpg" width="51" height="73" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_04.jpg" width="54" height="73" alt=""></td>
<td colspan="14">
<img src="images/index_05.jpg" width="854" height="26" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img src="images/index_06.jpg" width="657" height="65" alt=""></td>
<td colspan="2">
<img src="images/index_07.jpg" width="170" height="47" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_08.jpg" width="27" height="65" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_09.jpg" width="105" height="18" alt=""></td>
<td colspan="2">
<img src="images/index_10.jpg" width="170" height="18" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_11.jpg" width="112" height="47" alt=""></td>
<td colspan="4">
<img src="images/index_12.jpg" width="101" height="47" alt=""></td>
<td>
<img src="images/index_13.jpg" width="86" height="47" alt=""></td>
<td colspan="2">
<img src="images/index_14.jpg" width="185" height="47" alt=""></td>
<td colspan="2">
<img src="images/index_15.jpg" width="215" height="47" alt=""></td>
<td colspan="3">
<img src="images/index_16.jpg" width="143" height="47" alt=""></td>
<td colspan="2">
<img src="images/index_17.jpg" width="130" height="47" alt=""></td>
<td rowspan="2">
<img src="images/index_18.jpg" width="1" height="54" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_19.jpg" width="972" height="7" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="images/index_20.jpg" width="973" height="166" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="images/index_21.jpg" width="973" height="14" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_22.jpg" width="972" height="779" alt=""></td>
<td rowspan="10">
<img src="images/index_23.jpg" width="1" height="2024" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_24.jpg" width="972" height="277" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_25.jpg" width="972" height="12" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_26.jpg" width="972" height="396" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_27.jpg" width="972" height="96" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="5">
<img src="images/index_28.jpg" width="127" height="464" alt=""></td>
<td colspan="10">
<img src="images/index_29.jpg" width="715" height="45" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images/index_30.jpg" width="130" height="464" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/index_31.jpg" width="715" height="62" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_32.jpg" width="73" height="357" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/index_33.jpg" width="247" height="271" alt=""></td>
<td colspan="6">
<img src="images/index_34.jpg" width="395" height="4" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/index_35.jpg" width="69" height="353" alt=""></td>
<td colspan="2">
<img src="images/index_36.jpg" width="252" height="267" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/index_37.jpg" width="74" height="353" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/index_38.jpg" width="247" height="86" alt=""></td>
<td colspan="2">
<img src="images/index_39.jpg" width="252" height="86" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="images/index_40.jpg" width="973" height="499" alt=""></td>
</tr>
<tr>
<td colspan="18">
<img src="images/index_41.jpg" width="973" height="242" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="51" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="73" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="148" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="37" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="183" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="69" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</div>
</html>
 
Phreaddee

Phreaddee

Super Moderator
Staff member
is your website just an image?

try this page
http://www.css3.info/preview/box-shadow/

DO NOT SIMPLY SLICE YOUR PSD. that is not a website. it is the lazy (and wrong) way of doing it.
apart from the fact it it just a big pile of images. it either adds horrible AP elements to the page and unnecessarily bloats the size of your page with unusable divs or it creates it in a table. neither option is preferred.
 
You must log in or register to reply here.
Top