2 Replies - 1895 Views - Last Post: 09 May 2008 - 11:20 PM

#1 joeyadms  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 178
  • Joined: 04-May 08

Drop Shadow Borders on page

Posted 09 May 2008 - 02:18 AM

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
<!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.

Is This A Good Question/Topic? 0
  • +

Replies To: Drop Shadow Borders on page

#2 joeyadms  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 178
  • Joined: 04-May 08

Re: Drop Shadow Borders on page

Posted 09 May 2008 - 05:29 AM

Also I suppose I really need to learn how to market better, so any tips or help on getting content first etc. would be great.
Was This Post Helpful? 0
  • +
  • -

#3 didgy58  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 246
  • Joined: 23-October 07

Re: Drop Shadow Borders on page

Posted 09 May 2008 - 11:20 PM

i know when im laying out stuff with css, the first thing i like to do to see how things are working and where they are on the screen is to change the background colors of each div element in the page, so i know whats going on with each one, just block it all out to start with so you can see where its all going wrong,
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1