-
レイアウトまで一通り終わり位置や余白などの調整を行ってきます。
まずはヘッダのサイト名の位置調整とサイズ調整を。
#header h1 {
font-size:26px;
font-weight:bold;
padding:20px;
}
次にページメニューをインライン要素に変え、横一列に並べてmarginで左右に余白を調整します。
#globalNv li {
display:inline;
margin:0 8px;
font-weight:bold;
}
#contentの上部に余白を作ります
#content {
padding:80px 0 0;
}
次に#sideTopicsと#contentBoxの調整に入りますが
ここでマル秘テクニック!!
IE5以下は余白(padding)に対する解釈が違うと説明しましたが、これを回避するためのテクを紹介します!
-
#sideTopics {
width:170px !important;
width /**/:185px;
float:left;
padding:0 0 0 15px;
}
CSSは優先順位があり、それに基づいて順番に適用されます。
importantはCSSの優先順位を無視して適用する為のものです。
何故かIE6まではimportant文の下に定義されてる方が優先順位が高くなってしまうバグを利用して、IE6以外に適用されるハックを利用して
width /**/:185px;
と定義してます。
これによりIE5以下でも同じ横幅のボックスができあがります。
さらに#sideTOpics内を調整します。
#sideTopics dl {
margin-bottom:20px;
}
#sideTopics dt {
line-height:160%;
font-weight:bold;
}
#sideTopics dd img {
display:block;
border:#fff 5px solid;
margin:5px 0;
}
#contentBoxも同じようにIE5以下への対応策を施して調整します。
#contentBox {
width:480px !important;
width /**/:495px;
float:right;
font-size:small;
padding:0 15px 0 0;
line-height:160%;
}
#contentBox h2 {
font-weight:bold;
}
#contentBox p {
margin:0 0 20px;
}
#updateBox {
margin:0 0 20px;
}
#updateBox dt {
float:left;
width:65px;
font-size:86%;
}
#updateBox dd {
margin-left:65px;
}
最後に#footerを調整して終了です。
#footer address {
float:left;
padding:6px 15px;
}
#footer p {
text-align:right;
padding:6px 15px;
}
これでクロスブラウザ仕様のページが完成です。
画像1のようになってればOKです。
次回はさらに色をつけたり見出しを目立たせたりして最終調整をします。
乞うご期待!!
