ＣＳＳの修正１

スクールサイトのＣＳＳ修正を行いました。

IE6,7では問題なく表示されますがOpera、Firefoxではカラム落ち等が発生しています。IEのファジーな表示のおかげとも言えますね

子要素が親要素からはみ出している、ヘッダーが上部に表示されていると言う点。
marginとpaddingの見直し
floatさせている段落後要素のclear:both
ヘッダー要素とコンテンツ要素をまとめて親要素に入れる
以上で解決させました。

メニューでa要素、p要素などの背景がwidthとおりに表示されないと言う点。
インライン要素では背景がWidth通りにならないのでdisplay:blockを使う。
メニューのインライン表示を止めてリスト表示にする。

現在はOperaとFirefoxで問題なく表示されております。

ＣＳＳはサイト設計が大切。
しっかり設計していないと後々大変なことになります、特にmarginとpadding。逆にＣＳＳにしていればサイトの修正は容易に行えると言うメリットがあります。実際に作ってみて各ブラウザで表示させ修正する・・・その繰り返しですね。

ＣＳＳに方向転換して、フレーム表示とテーブルは止めました。とくにテーブルを止めることでHTMLがスッキリし修正が楽になりましたね。
今回はメニューなどは全てテキスト表示でシンプルにしてありますが、次回は背景画像を使ったメニューにしてみたいと思っています。

さぁ、今日は受験日記サイトのＣＳＳ修正だ