<DIV> and Shadowbox
I have a div centered on my page (width and height set, margin:auto). I am then adding images into it, and each image launches its own Shadowbox. However, there are two problems:
- The shadowbox - while taking up the entire screen - is offset to the right side of the page. How do I get it back to center as if there was no div?
- Each successive time I open a shadowbox on any given image (either all the same image or different image on each open), the shadowbox gets smaller. I didn't have this problem until I put the images inside the div.
You can see it in action here.
When I run it using the available Firefox consoles, I see a lot of warnings about fetching the height and width (presumably of the image). That partially explains the problems, but I'm not sure of the solution.
Source:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../shadowbox-3.0.3/shadowbox.css">
开发者_Python百科 <script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
<div id="pageDiv" style="background-color:#FFFFFF">
<a href="http://www.sport2play.com/baseball/pics/1.jpg" alt="none" rel="shadowbox"><img src="http://www.sport2play.com/baseball/pics/1.jpg" width="100px"/></a>
</div>
</body>
</html>
For what it's worth, the CSS:
@font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
body{
font-family:"Officina";
background-color:#AAAAAA;
}
img{
box-shadow: 3px 3px 7px #777;
background-color:#FFFFFF;
}
canvas{
background-color:#FFFFFF;
}
div{
width:500;
height:647;
margin:auto;
}
Thoughts on how to fix these two problems?
You need to use doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
It solves your 1st problem.
加载中,请稍侯......
精彩评论