Daily Archives: 2007年10月19日

リストの背景に画像をはろう!!


左の画像のように、
メニューリストの背景に画像をはりつけて、
ボタン風に表示してみましょう :lol:

まず、
HTMLのソースは・・・

<div id=”menu”>
<ul>
<li>What’NEW</li>
<li>News&info</li>
~~~~~省略~~~~~~
<li>利用規約</li>
<li>プライバシーポリシー</li>
</ul>
</div>

いたって普通のリストです :-P

次に、
CSS(スタイルシート)、

リストのときに表示される黒点を表示しないように指定。
div.menu ul {list-style:none;}

div.menu li {background:url(画像アドレス) no-repeat 50%;
※liに背景画像を指定します。
背景画像
真ん中に画像がくるようにポジションは50%に!

line-height:30px;
※あまりメニュー同士にくっついて欲しくないときは、line-heightで調節。
heightでは文字の位置があわなかったりするので、ここはline-height!!

あとは、ここにtext-alignや、margin、paddingを使ってお好みの位置に表示しましょう。