ブログ
Dreamweaverのデザインビューでレイアウト表示が崩れる問題
ブロックレベル要素のレイアウト崩れ
レイアウト崩れは、親要素にwidthが指定されていないブロックレベル要素やブロックレベル要素で、以下のようにwidth,margin-left:auto,margin-right:auto,overflowが揃うと発生する。
h1 {
width:800px;
height:12px;
margin:0px auto;
padding-top:3px;
overflow:hidden;
font-size:70%;
line-height:130%;
text-align:right;
background:url(../img/bg_h1.jpg) no-repeat;
}
回避方法
無駄なコーディングとなるが、div containerなど全体を囲む領域を設定して、親要素でwidthを設定する。
div#container {
width:800px;
margin:0 auto;
text-align:left;
}
div#container h1 {
height:12px;
padding-top:3px;
overflow:hidden;
font-size:70%;
line-height:130%;
text-align:right;
background:url(../img/bg_h1.jpg) no-repeat;
}
clearfixによるレイアウト崩れ
floatのクリアを処理するためのclearfixを使うと、レイアウト崩れが発生する。
回避方法
無駄なコーディングとなるが、clearfixの後のボックス要素にclear:bothを書く。
div#footer {
clear:both;
margin-top:50px;
font-size:90%;
text-align:left;
background-color:#eeeeee;
}
clearfixセレクタの中にoverflow:hiddenかoverflow:autoを指定する方法もありますが、ブラウザの表示に影響が出る場合があるので、こちらの方法は、お勧めしません。
2010/06/30(Wed)
