次のようなタブメニューを作成したいと思います。
li要素をfloat:leftすることでリスト項目が横方向に展開されます。a要素をブロックにすることで高さ をかせぎます。一番のポイントは、a要素の下側paddingでしょうか。選択状態のpaddingは、背景画 像の上に重なるようにしてそれ以外のタブはpaddingを調整することで背景が見えるようにしています。
headerに指定した画像は、次の画像です。
<div id="header"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">CSS Tips</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Link</a></li> <li id="doorend"><a href="#">Contact</a></li> </ul> </div>
* { margin: 0; padding: 0; } #header { width:100%; background:#DAE0D2 url("bg.gif") repeat-x bottom; } #header ul { margin:0; padding:10px 10px 0; list-style:none; } #header li { float:left; margin:0; padding:0 0 0 9px; border-left: 1px solid; border-top: 1px solid; background-color:#c8dae1; } #header #doorend { border-right: 1px solid; } #header a { display:block; padding:5px 15px 4px 6px; } #header #current { background-color:#FEE9A8; } #header #current a { padding-bottom:5px; }
Copyright 1997-2010 BBB All rights reserved.