CSSのみでシンプルなタブメニューを作る

サンプルはこちら
■構造

・tab
一番外のボックス。絶対レイアウトの基準。タブの下線をボーター下で描画。
・ul
ボックスの左端でタブのボーダーを描画。
絶対位置で下に1pxずらしてtabボックスに重ねている。
・li
タブの上と左のラインをボーダーで描画。
・a
IEでli要素のhoverが効かないのでliボックスと同じ面積にした。a:hoverで背景色を変えている。
・menu_op
タブの開いたときを表現。tabボックスの下線を打ち消すため白いボーダーで下ラインを描画。

CSSのみで画像置換をしてメニュー作成する

以下のようなメニューがあるとする
menu071130.jpg
HTML

スタイルシートはこうする(数字は画像サイズに応じて変更)
CSS
.menu1{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}
.menu2{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu3{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu4{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}
ポイント
・表示エリア 高さを0pxにしてパディングで高さの表示エリアを広げる
・文字を隠す ライン高をあげて表示エリアの下側に隠すようにする
・印刷 背景を印刷しない設定にしてあると文字が消えてしまうのでCSSの設定を media=”screen”にする
以上

CSSレイアウトで縦位置あわせのメモ

忘れそうなので備忘録です。
[html]

[/html]
での標準モードでレンダリングを前提。
サンプルはこちら
基本は絶対配置で行う。
全体のレイアウトが左寄せでは問題ないが、
中央寄せの場合
親ボックス position: relative;
子ボックス position: absolute;
のようにしていると、IE6でリサイズしたときにずれてしまう。
ココでIE6用ハックを使い
* html 親ボックス position: relative;
* html 子ボックス position: static;
にするとずれない。
あとはピクセル単位の細かい調整が必要。