I am designing a site, and want to put some drop shadow effects on each side of the page. I am not very well with designing, mostly due to impatience, but I tried googling for hours and could not find a good way to do it.
Basically, I have a container, header/content/footer divs and need to place an image(lborder.jpg,rborder.jpg) which are the shadow effects on each side of the divs and have them repeat on the y-axis.
here is my code so far, sorry about no indentation as I'm hacking it together pretty fast
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-image:url('test.jpg');
background-repeat:repeat;
margin: 0;
padding: 0;
text-align: center;
}
#world {
width:800px;
margin:0 auto 0 auto;
text-align:left;
}
#container {
width: 780px;
margin-right:10px;
margin-left:10px;
//margin: 0 auto 0 auto;
text-align: left;
//border-left:1px solid #9999ff;
//border-right:1px solid #9999ff;
float:right;
}
#rborder {
width:10px;
background-image:url('rborder.jpg');
background-color:#000;
background-repeat:repeat;
height:400;
float:right;
}
#lborder {
width:10px;
background-image:url('rborder.jpg');
background-color:#000;
background-repeat:repeat;
float:left;
height:400;
}
#header {
background-image:url('head.jpg');
height:171px;
}
#nav {
background-image:url('nav.jpg');
height:66px;
}
#nav {
background-image:url('nav.jpg');
height:66px;
}
#content {
background-image:url('content.jpg');
background-color:#fff;
background-repeat:repeat-x;
background-position:top;
height:470px;
}
#footer {
background-image:url('footer.jpg');
background-repeat:repeat-x;
background-position:top;
height:40px;
}
#copy {
background-color:#fff;
background-image:url('copy.jpg');
background-repeat:repeat-x;
background-position:top;
height:40px;
}
</style>
</head>
<body>
<div id="world">
<div id="lborder"></div>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
Hello World!
</div>
<div id="footer"></div>
<div id="copy"></div>
</div>
<div id="rborder"></div>
</div>
</body>
</html>
And that was the last thing I tried, so I know I have a case of the div-its. No matter what I cannot get the shadow borders to be on each side, and to scale all the way down.
Any help would be greatly appreciated, I hate having to slice layouts.
9 May, 2008 - 02:18 AM
| 