人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptのlightbox.jsを組み込んだサイトを作ったのですが、画像をクリックしたあとのオーバーレイのpngが一番右端まで反映されず、少しだけ残ります。何故でしょうか?
http://www.kinkikids.biz/php/lightbox/lightbox.html
http://www.kinkikids.biz/php/lightbox/lightbox.js
ちなみに、IEのversion6sp1、1024×768の環境でテストしています。

●質問者: どうもと
●カテゴリ:インターネット ウェブ制作
✍キーワード:IE JavaScript js Lightbox PNG
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

[1]一応私の環境では出来たみたいです。 router

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

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

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

<body style="margin: 0;">

試してみてください。


[2]>1 ありがとうございます doumoto

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

に変更してみました。

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

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

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


[3]>2 補足 router

オーバーレイ部分である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>


[4]>3 最下のタグの一部が消えてしまった・・ router

<body style="margin:0;">

<div style="margin: 5px">

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

</div>

</body>

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


[5]>4 完璧です! doumoto

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ