HPのナビゲーションと<UL><LI>

質問

懸案事項の一つは本日の質問で解決しましたので、もう一つも質問してみたいと思います。
＜やりたい事＞
HPのナビゲーション：スタイルシートで＜UL＞＜LI＞を使ってメニュー項目を定義し、対応するリンクを張りたい。
＜現状＞
＜MAP＞＜AREA＞を使っています。
＜メニュー＞
TOP|AAAA|BBBB|CCCC|という画像。
※頭が悪いので「スタイルシートの勉強が先決」という手の回答ではなく、具体的な書き方のヒントをお願いします。

回答No.1

s_hukami · ベストアンサー

ナビゲーションは画像で指定する予定ですか。
それとも画像とテキスト、あるいはテキストのみで指定する予定ですか。

例えば背景に画像を使用して、その上にナビゲーションの文字だけを置くとすると、
----------------------------------
CSSの記述
----------------------------------
#navi {
background: url(images/navibar.jpg) no-repeat;
width: 600px; height: 30px;
}
#navi ul {
list-style: url(images/circle.gif) disc inside;
}
#navi li {
float: left; /* リストを左に並べる */
margin: 3px 1em; /* 上下・左右の外側の余白 */
}
----------------------------------
リストのマーカーを表示しない場合は「list-style: none」などとしてください。

----------------------------------
HTMLの記述
----------------------------------
<div id="navi">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</div>
----------------------------------
テキストではなく画像ならば<img src="images/aaa.gif" alt="AAA" width="画像の幅" height="画像の高さ">となります。
が、もし、AAAの下に背景画像を指定して上に文字をのせるだけでしたら、
CSSに「#navi li」の指定に「background: url(images/navibar.jpg) no-repeat;
width: 画像の幅; height: 画像の高さ;」などを加えてください。
また、文字サイズを「font-size: 14px;」などのように指定してやらないと、ブラウザで文字の大きさなどを変更した場合には、背景画像からはみ出してしまったりします。
参考URLはとほほのWWW入門のCSSの背景指定についての説明です。
先の質問がどれか判らなかったため、確認していませんので、的をはずした回答でしたらすみません。

参考URL：

http://www.tohoho-web.com/css/reference.htm#background

お礼

多分、これで解決するでしょう。感謝です。