どうもと回答ポイント 100ptウォッチ

Javascriptのlightbox.jsを組み込んだサイトを作ったのですが、画像をクリックしたあとのオーバーレイのpngが一番右端まで反映されず、少しだけ残ります。何故でしょうか？

http://www.kinkikids.biz/php/lightbox/lightbox.html
http://www.kinkikids.biz/php/lightbox/lightbox.js
ちなみに、IEのversion6sp1、1024×768の環境でテストしています。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する

完璧です！

どうもと2006-10-08 15:54:48

http://www.kinkikids.biz/php/lightbox/lightbox2.html

flickerのタグがゴミなのに笑ってしまいましたが、丁寧な説明ありがとうございます。bodyタグとmarginの仕様がよくわかりました。

いわしの機能だと数ポイントしかお送り出来ないので別途ポイント送信しておきました。ご確認ください。

最下のタグの一部が消えてしまった・・

router2006-10-08 15:21:52

<body style="margin:0;">

＜div style="margin: 5px"＞

ここにコンテンツを配置する

＜/div＞

</body>

divタグの＜と＞は全角にしてありますので、ご注意下さい。

補足

router2006-10-08 15:20:04

オーバーレイ部分であるDivタグには下記のようなCSSが適用されています。



DISPLAY: none; Z-INDEX: 90; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px



これには高さがありませんが、実際に写真をクリックして動作させると、

JavaScriptで高さを取得し、設定しているようです。

私の環境では以下が設定されます。



height: 518px;



さて、横幅は見る人の環境によって異なるので(ウィンドウを小さくしてる場合もあったり)100%と指定されています。

仮に表示領域が500pxあったとして、IEではデフォルトでbodyタグにmarginがあるので、



width: 100%; = 500px - bodyタグのmargin



といった形になると思います。



参照::　http://www.flickr.com/photos/74265593@N00/263599281/



オーバーレイの部分には下記のようなCSSが適用されています。



position: absolute;

top: 0;

left: 0;



これはオーバーレイの部分を表示領域の上から0px、左から0px目から配置する。

といったもので、簡単に言うと左上に詰めるというものです。



参照::　http://www.flickr.com/photos/74265593@N00/263599282/



オーバーレイの部分は表示領域500pxよりmargin分が減っているので、

仮にmarginが5pxだったとすると、左右にmarginがあるので、

500-5×2=490pxとなります。



500pxの紙の上で490pxの紙を左上詰めで置いた場合、10px分右側が足りなくなってしまい、上に張った画像のようになるのだと思います。



高さも同じことが言えるのですが、高さは100％という指定ではなく、実際の数値を取得して設定しているようなので、ぴったりとオーバーレイが被さっているのだと思います。



長くなりましたが、marginが0pxになったのでオーバーレイ以外に中の画像等も上の方に詰める事になってしまい、今の状態になっていると思います。

bodyのmarginは0にする必要があると思うので、bodyの下にdivタグか何かでmarginを設定するといいのではないかと思います。



<body style="margin:0;">

ここにコンテンツを配置する

</body>

ありがとうございます

どうもと2006-10-08 14:00:52

<body bgcolor =orange style="margin: 0;">

に変更してみました。

http://www.kinkikids.biz/php/lightbox/lightbox1.html

オーバーレイに関しては期待通りの動作になりましたが、逆にコンテンツの上下左が寸詰りになってしまいました。ん~、なんで右側だけアレなんでしょうか。

本番の環境では左右にテーブルを切って文字揃えを掛けているので、今回の方法でほぼ解決なのですが、他の要素に影響を与えずに、オーバーレイの右側のみマージンが０になる方法があれば引き続きお願いします。

一応私の環境では出来たみたいです。

router2006-10-08 07:20:04

IEで表示した状態で色々と試してみた結果、

bodyタグにCSSで下記を設定設定したところ、

IEで右端までオーバーレイが表示されました。

<body style="margin: 0;">

試してみてください。

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時
2006-10-08 05:46:55
終了日時
2006-10-08 15:55:46
回答条件
1人5回まで 100 ptで終了

この質問のカテゴリ

この質問に含まれるキーワード

JavaScript2781Lightbox37PNG334IE1853js788

人気の質問

メニュー

PC版