-
前回まででHTMLマークアップとCSSレイアウト構造まで説明し、
いよいよCSSコーディングに移ります。
前回までにソースを送っていただいた方はたったの2名です。
しかも女性のみ。
男は度胸ないな。
送っていただいた2名の方、ありがとうございました。
今回のコーディングでの重要課題は次の3点となります。
・クロスブラウザ対策
・IE5以下での余白対処法
・回り込み(float)での背景のズレの対処法
まずはCSSのブラウザリセットから。
今回はグローバルセレクタ(*{})は使用せずに各ブラウザのデフォルトCSSを再定義します。
-
@charset "utf-8";
/*---------------------------------------
Browser reset
---------------------------------------*/
body {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ul,ol,li,address,form {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,strong {
font-size:100%;
font-weight:normal;
}
em,address {
font-style:normal;
}
li {
list-style:none;
}
a {
color:#fff;
text-decoration:none;
}
a:hover {
color:#FFFF66;
}
次にメインとなるBOXセレクタを定義し、背景画像を読み込みます。
body {
text-align:center;
font:x-small Verdana, sans-serif;
color: #999;
background:#fff url(img/bg_body.gif) repeat-x;
}
/*---------------------------------------
container box
---------------------------------------*/
#container {
width:702px;
text-align:left;
margin:0 auto 20px;
color:#fff;
position:relative;
background:url(img/bg_container_body.gif) repeat-y;
}
/*---------------------------------------
header
---------------------------------------*/
#header {
background:url(img/bg_nv_head.gif) no-repeat 100% 100%;
height:110px;
}
/*---------------------------------------
navi
---------------------------------------*/
#globalNv {
position:absolute;
top:106px;
width:100%;
text-align:right;
z-index:1;
}
/*---------------------------------------
content
---------------------------------------*/
#content {
line-height:140%;
background:url(img/bg_nv_bottom.gif) no-repeat 100% 0%;
}
/*---------------------------------------
side topics
---------------------------------------*/
#sideTopics {
width:170px ;
float:left;
}
/*---------------------------------------
main content
---------------------------------------*/
#contentBox {
width:480px;
float:right;
}
/*---------------------------------------
footer
---------------------------------------*/
#footer {
clear:both;
background-image:none;
font-weight:bold;
padding:80px 0 7px;
background:url(img/bg_footer_bottom.gif) no-repeat 0% 100%;
}
おおまかなレイアウトが完成しました。
すると画像1のように#contentセレクタで読み込んでいる背景画像が表示されてません。
これはこのボックス内でfloatの解除をしてない為、レイヤーのように#sideTopicsと#contentBoxが浮かんでる状態となり、#content内の同じ層に何もない状態になり高さが0となってしまってる為です。
この現象を解説したい為画像の切り取り方法をこのようにしました。
これを回避するためには#contentセレクタもfloat:leftというように同じ層に置いてやるのも良いですがこれだとスマートじゃない。
また#content最後に回り込み解除を入れれば良いですが、それもスマートではない。
そこでマル秘テクニックです。
プロでも殆ど知らない対処法!!
#contentに
width:100%;
overflow:auto;
を追加してください。
すると画像2のように背景がしっかりと表示させられるようになります。
