- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：lightbox2.04の修正について）
lightbox2.04の修正方法
このQ&Aのポイント
- JavaScriptを使用しているlightbox2.04を導入した際に、サイトのCSSのレイアウトが崩れる問題が発生しました。
- サイトはテンプレートを使用しており、CSSを纏めるなど試みましたが、レイアウトが更に崩れてしまいました。
- 対応策としては、lightboxのCSSを手直しすることが考えられますが、具体的な変更方法が分かりません。
- silver_kei
- お礼率100% (11/11)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
lightboxを設置しただけ（利用しない状態）で、表示が乱れるのでしょうか？ ご質問文からだけではわかりかねますが、とりあえずありそうなのが、idのダブリでしょうか？ 「lightbox.css」で使用しているidを、そのつもりでなく使用していることはありませんか？（例えば、id="lightbox"やid="imageData"とか） （lightbox.cssはテキストファイルなので、エディタで開けます。そこで 定義されているものを、意図せずに使用していないでしょうか？ 数は限られているので、たいした手間でなくチェック可能でしょう。） てっとり早くチェックするなら、lightbox.cssを読み込んでいるlinkタグをはずしてみて、正しく表示されるようであれば、↑が原因の可能性が高いです。 ＞lightboxのほうのCSSを手直しするなどして対応できれば、～～ lightboxのCSSを変更すると、関係する部分をスクリプトから探し出して、全部修正するという大変な作業になりますので、やめたほうが良いと思います。（そうしないと、lightboxが誤作動することになります）
お礼
ご回答ありがとうございます。 ちょっと見直してみたところ、一番最初の行（DTD？）を変えたのが原因のようでした。 元のタイプが、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> lightbox導入事例のタイプが <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> です。 ここを導入事例通りにすればlightboxは動きますが、レイアウトが崩れてしまいます。 この場合はどう対処すればいいのでしょうか。 再度ご教授願えれば助かります。
補足
また自分なりに色々と弄ってたら、何だかlightboxを動くようには出来ました。 でも、IE7とSlepnirの表示が何故か上側になってしまいます。 operaとFireFoxは中央に表示されます。 できれば全て中央に表示させたいのですが…。 cssを見ると、 #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} という記述がありますが、これを変えればいいのでしょうか。 もしお分かりの方いらっしゃいましたらご教授いただけないでしょうか。 ちょっと混乱してきてしまいました。 よろしくお願いいたします。