Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do i keep drop shadow from moving? 1

Status
Not open for further replies.

invalid4564

Programmer
Jul 13, 2010
16
US
I created a drop shadow for my website but when i resize browser the contents move away from the drop shadow.

How do i keep webpage contents on top of drop shadow?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="default.css" />
	<title>Website</title>
</head>
<body>

	<div id="header">

	</div>

	<div id="navbar">
		<table>
		<tr>
		<td class="active"><a href="#">Home</a></td>
		<td><a href="">About</a></td>
		<td><a href="">Contact</a></td>
		</tr>
		</table>
	</div>
	
	<div id="wrap">
		<div id="main">
			
		</div>
		
	</div>

	<div id="footer">
		<p>&copy; 2010-2011 All Rights Reserved.</p>
	</div>

</body>
</html>

CSS:
body
{
width:840px;
height:700px;
background:#eeecd6 url('images/bg.jpg') no-repeat; /* drop shadow image */
margin:20px auto;
font-family:"San Serif",Times,Arial;
}

#header{width:840px;height:136px;margin:0 auto;background:#ffffff;border:1px solid #000000;}

#navbar
{
width:840px;
height:30px;
background:#ffffff;
border:1px solid #000000;
clear:both;
}
#navbar table{margin:0 auto;float:left;border:0;padding-left:20px;}
#navbar td{text-align:left;padding-right:10px;}

#wrap{width:840px;height:630px;margin:0 auto;background:#063e72;border:1px solid #000000;}

#main
{
width:800px;
height:600px;
margin:0 auto;
background-color:#ffffff;
border:1px solid #000000;
overflow:auto;
}

#footer
{
height:26px;
width:800px;
margin:0 auto;
text-align:center;
color:#000000;
background-color:#eeecd6;
font-size:small;
}

a:link{text-decoration:none;color:#000000;}
a:visited{text-decoration:none;color:#000000;}
a:hover{text-decoration:underline;color:#f1a629;}
a:active{text-decoration:underline;color:#f1a629;}

I've also attached the image that i am using.

Thank you for your help.
 
Your page is centered in the middle of the browser window and your background image is not. Put your background image in the center as well, and you should be OK.

Code:
background:#eeecd6 url('images/bg.jpg') [!]50% 0[/!] no-repeat;

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 

I made the adjustment and it worked.

Thank you for your help.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top