Breaking News
Loading...
2013年9月20日金曜日

Info Post

作業
指定のページ
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指定をミスするとカラムが落ちる]



パターン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に書き換えました。
core.css

フッターを右寄せではなく左寄せにすることで、
フッターとサイドバーがかぶってしまうのをとりあえず回避できました。
カラム落ち回避

0 コメント :

コメントを投稿