作業
http://www.css-designsample.com/csslayout/technique-3.html
まずB [確認参照] WEB第10回 5/27 [メニューの作り方[2学期の配点]
の手順でメニューをつくる
つぎにA [確認参照] WEB第11回 5/31[全部完了した人は2学期の自分のサイトのテンプレートを作成する[2学期の配点]]
の手順でindex.htmlを作る
BをAに埋め込む
index.htmlをサイトのトップページにアップロードする。
カラム落ちとは
回り込みの指定の間違いや、レイアウトサイズのズレが生じると、
カラム落ちやレイアウト崩れがおきます。
cssルールの指定は正確にできるように習得しましょう。
パターンA
[横幅の足し算の勘違い]
パターンB
[marginの読み込みがブラウザによって異なる]
パターンC[floatやtext-alignのright・left指定をミスするとカラムが落ちる]
(例)---メニューのdivボックス(黄)と本文のdivボックス(赤)の横幅の合計が
CSSで、「width: 250px;」と同じように指定しても、
border(枠線)幅が10pxだった場合、こんなに表示に差が
出るという。 “width”の数字を、内寸と見なすか、外寸と
見なすかの違いである。
つまり、最初からFirefoxでの表示に合わせて横幅一杯
に作ってしまうと、IEでは表示しきれずに、カラム落ちが
起こる可能性があると考えられるのだ。
対処方法
・回り込み設定を無効にしている 記述 部分 をボックスの中に入れる事で修正
(回り込み設定とは、float : left; または float : right ; のcss設定の事。)
[横幅の足し算の勘違い]
パターンB
[marginの読み込みがブラウザによって異なる]
パターンC[floatやtext-alignのright・left指定をミスするとカラムが落ちる]
パターンA
(例)---メニューのdivボックス(黄)と本文のdivボックス(赤)の横幅の合計が
緑のdivボックスの横幅より大きいためにおきるカラム落ち
見た目には入りそうなサイズに見えるが、余白(境界線の内側のスキマ)を考えると横幅が足りない
パターンB
ブラウザによって異なる幅の読み込みCSSで、「width: 250px;」と同じように指定しても、
border(枠線)幅が10pxだった場合、こんなに表示に差が
出るという。 “width”の数字を、内寸と見なすか、外寸と
見なすかの違いである。
つまり、最初からFirefoxでの表示に合わせて横幅一杯
に作ってしまうと、IEでは表示しきれずに、カラム落ちが
起こる可能性があると考えられるのだ。
パターンC
問題点発生:画像がボックスからはみ出してしまう!?→対処方法
・回り込み設定を無効にしている 記述 部分 をボックスの中に入れる事で修正
(回り込み設定とは、float : left; または float : right ; のcss設定の事。)
フッター表示のrightとleft
cssを編集。
div#footer ulとdiv#footer addressのalignをleftに書き換えました。
フッターを右寄せではなく左寄せにすることで、
フッターとサイドバーがかぶってしまうのをとりあえず回避できました。
0 コメント :
コメントを投稿