2

ページの中央に div があります (幅と高さの設定、margin:auto)。次に画像を追加すると、各画像が独自の Shadowbox を起動します。ただし、次の 2 つの問題があります。

  1. シャドーボックスは、画面全体を占める一方で、ページの右側にオフセットされています。divがないかのように中央に戻すにはどうすればよいですか?
  2. 特定の画像（すべて同じ画像または開くたびに異なる画像）でシャドウボックスを開くたびに、シャドウボックスが小さくなります。画像をdiv内に配置するまで、この問題はありませんでした。

ここで実際の動作を見ることができます。

利用可能な Firefox コンソールを使用して実行すると、(おそらく画像の) 高さと幅のフェッチに関する多くの警告が表示されます。それは問題を部分的に説明していますが、解決策はわかりません。

ソース：

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../shadowbox-3.0.3/shadowbox.css">
    <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>

価値があるのは、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;
}

これら2つの問題を解決する方法について考えていますか?

4

1 に答える 1

0

doctype を使用する必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

それはあなたの最初の問題を解決します。

于 2011-05-23T23:08:29.230 に答える