CSSによるタブメニューの構築について

質問

アクセスありがとうございます。

可変幅のタブ形式メニューをスマートなHTMLで実現したく、CSSで試行錯誤しましたが、どうも成功しません。
アドバイス頂ければと思います。

http://www.pageflakes.com/

こちらのタブメニューの様な物を以下のHTMLで作りたいと思っています。

<ul id="tab">
<li><a href="#">TabName1</a></li>
<li><a href="#">TabName2</a></li>
<li><a href="#">TabName3</a></li>
<li><a href="#">TabName4</a></li>
</ul>

使用する画像は
"tab_corner_left.png"
"tab_corner_right.png"
"tab_background.png"
の３種類で、名前の通りそれぞれ左端・右端・テキスト部の背景となっており、タブの高さは29pxです。

わざわざ画像を３種類に分けるのは、タブ内に何文字でも入力できる可変幅にしたいからです。
また、ul自体も"position: absolute;" "top: x;" "right: y;"で配置位置を直接指定できればと思います。

タブ内のテキストも、上下の余白を近似値にしたいと思います。

描画エンジンは、GeckoとIEの両方に対応したいと思います。
その際のhackはなるべく避けたいです。

HTMLの多少の改変は構いませんが、直接imgタグを使ったりは避けたい所です。

よろしくお願いします。

回答No.1

suzuki-_- · ベストアンサー

#tab及び#tab内のリストをfloatさせてます
後にくるboxにclearを付けるのを忘れずに
動作確認
　IE　win IE6
　Gecko win firefox

■CSS

#tab {
position:absolute;
top:100px;
left:200px;
background:url(tab_background.png) repeat-x;
height:29px;
list-style:none;
padding:0;
float:left;
}
#tab li {
margin:0;
padding:0;
float:left;
line-height:29px;
background:url(tab_corner_left.png) top left no-repeat;
}
#tab li a{
display:block;
padding:0 10px;
background:url(tab_corner_right.png) top right no-repeat;
}

■HTML

<!-- 可変を再現するためにリンク文字列を伸ばしてます // -->
<ul id="tab">
<li><a href="#">TabName1</a></li>
<li><a href="#">TabName22</a></li>
<li><a href="#">TabName333</a></li>
<li><a href="#">TabName4444</a></li>
</ul>

お礼

成る程、私はliにfloatではなくdisplay: inline;で横並びを実現していた為、上手く行かなかった様ですね…。

floatやline-heightの使い方が大変参考になりました。
ありがとうございました。

（一つ気になる点があったのですが、ulへのfloat:left;にはどんな意味があるのでしょうか）

回答No.2

suzuki-_-

>（一つ気になる点があったのですが、ulへのfloat:left;にはどんな意味があるのでしょうか）

widthを指定しないblock要素の場合、必然的にwidthは可能な限り上階層の幅に収まろうとします

その際、#tabの背景指定の

background:url(tab_background.png) repeat-x;

でx方向にリピートしているので上階層の幅が広い場合無駄に背景が描画されてしまうのです

今回はposition:absolute;を使用することによって、一種の浮遊配置となり、#tab内のコンテンツ内容によってwidthが決まるので背景はコンテンツ分だけリピートされます

そしてfloatの設定なのですが、こちらも上記同様の効果が得られるのです

今回floatの設定を入れた理由は、今後positionの設定がrelativeもしくは排除された際に背景を無駄にリピートさせない為に、ちょっとしたおまじないのつもりでつけました

今後もずっとposition:absolute;でやっていくのなら、消してしまっても構いません

■背景リピートの変化を確認する方法
position:absolute;を消してから

float:left;

を入れる、入れないで挙動を確認してみて下さい

お礼

成る程、そういう事でしたか。
大変参考になりました。ありがとうございます。