2009年6月16日火曜日

ナビゲーション

ボーダーを設定する。
背景色を設定する。
リンク文字の下線を非表示にする。
リストマークを非表示にする。
マウスオーバーで色を変える。
ボタン全域をリンク領域にする。

【XHTML】
<div id="navi">
<ul>
<li><a href="indexall.html"> 総 索 引</a></li>
<li><a href="webwritingpg.html"> ウェブライティング</a></li>
<li><a href="index-life.htm"> くらし・仕事</a></li>
<li><a href="index_country.htm"> 地域(日・世)</a></li>
<li><a href="kumaten.html"> くまっ典</a></li>
<li><a href="pctermpg.html"> IT辞事典</a></li>
<li><a href="wspg.htm"> 桑原政則</a></li>
<li><a href="kohowtuousepg.html"> ヘルプ・使い方</a></li>
</ul>
</div>

【CSS】
#navi {
float: left;
width: 235px;
margin-top: 77px;
}
#navi a {
text-decoration: none;
background: #f6f6f6;
border-top: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
border-left: 5px solid #d0d0d0;
display: block;
width: 95%;
}
#navi li {
padding-top: 1px;
padding-bottom: 1px;
font-size: 16px;
line-height: 150%;
font-weight: bold;
margin-bottom: 1px;
}
#navi a:hover {
background: #C8C8FF;
border-top: 1px solid #ff0000;
border-right: 1px solid #ff0000;
border-bottom: 1px solid #ff0000;
border-left: 5px solid #ff0000;
}
#navi ul {
margin-left: 0px;
padding-left: 0px;
list-style: none;
}