ulタグで縦並びのボタンメニューを作る2 - CSS Tips - 仮想空間

ulタグを使った、CSSで背景とボーダーを設定しただけのボタンメニューには欠点があります。それは、ボーダー幅の解釈がブラウザによって違うため、意図していない幅になってしまう可能性があるということです。

例えば、横幅160pxぴったりにボタンメニューを作りたい時に、ボーダー幅10pxを設定した場合、全体の横幅が10px+160px+10pxで合計180pxと解釈するブラウザと、ボーダー幅の合計20pxを含めて160pxと解釈するブラウザがあるということです。

この問題を解決するには、以下のような画像を使います。（見た目は前回のボタンメニューと同じになります。）

bt_out.gif（160px×10px）

bt_over.gif（160px × 10px）

HTMLの記述

<ul>
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<li><a href="#">リンク4</a></li>
</ul>

CSSの記述

ul{
margin:0px;
padding:0px;
list-style:none;
}
 
a{
text-decoration:none;
text-align:center;
width:160px;
display:block;
}
 
a:link,
a:visited{
color:#0000FF;
background:url("bt_out.gif") repeat-y;
border-top:1px #EEEEEE solid;
border-bottom:1px #CCCCCC solid;
}
 
a:hover{
color:#0000AA;
background:url("bt_over.gif") repeat-y;
border-top:1px #DDDDDD solid;
border-bottom:1px #BBBBBB solid;
}

ポイント

背景と左右のボーダーを画像化することで、横幅がブラウザに影響されなくなります。また、上下のボーダーだけCSSを設定することで、文字サイズが変更された場合に対処できます。

投稿日

07.03.08

カテゴリー

CSS Tips

コメント

0

トラックバック

0