新ブログバナー

--.--.--スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2011.05.10overflow:hidden! 貴様は一体何者だ!

今日一日htmlとcssの修正に明け暮れた成果です。
印刷プレビューのズレ

上図は普通にブラウザで見ても問題ないが、印刷プレビューで確認すると
レイアウトが崩れていた件。
①左メニューの背景色
②フッターの位置
③背景画像の繰り返し

②については、cssで「 overflow:hidden 」を加えたら、
何故か正常な位置に戻ったので、解決済でした。
残っていたのは①と③。
途中あまやさんからご教授頂き、DOCTYPE部分も修正点に加えて試行錯誤しました。

問題解決

一日中(途中寝落ちした時間含む)いじった結果、無事なんとかなりました。
①は顔真っ赤になっていた時に突然直ったので、正直原因は分かりません。
ただ、左のメニュー部分と右のコンテンツ部分は一つのid(名前はfino)で囲っていて
そこに背景色(白)と「 overflow:hidden 」を加えたところ、背景色が反映されたのです。

そう、またしても「 overflow:hidden 」のおかげです。
本来は「領域からはみ出した部分は表示しない」という命令文です。
なのに、何故背景色やfooterの位置を直す事が出来たのでしょう?
非常に謎過ぎます。

③は実際に画像を置いてみて、cssを少し修正するだけで表示可能に。
今回指摘してもらったDOCTYPEには問題はなかった(会社のHPは要修正かも)のですが、
正直コレに関して全く知識がなかったので、勉強する良い機会となりました。

DOCTYPEについては、まだ50%も理解出来ていないかもしれませんが、
現在知らずに使っていたxhtml1.1の仕様は分かった気がします。
バージョンによって違いがあったり、禁止事項があったりと難しい部分もありますが、
もう少し勉強しておかなければならないようですね。
DOCTYPE情報を教えてくれたあまやさんに感謝です。

それにしても「 overflow:hidden 」は何者なんでしょうかね?
もしかしたら、css内における万能薬なのかもしれません。(あるあるあ・・ねえよ
Secret

TrackBackURL
→http://hasenritte.blog85.fc2.com/tb.php/661-7c379e81
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。