『CSS メニューを作っちゃおう6（横メニュー2）』

前の記事でＣＳＳだけで横メニューはできましたか？

今度はもう少し手を加えて背景に画像を使って見ます

途中まではまったく同じです・・

すでに前回の記事で作られた方は画像をアップしてＣＳＳだけ変更すればできちゃいます

前回の記事を参考にフリースペースまたはフリープラグインに

<div id="topmenu"><ul><li><a href="リンク先のURL">ホーム</a></li><li><a href="リンク先のURL">ペ　タ</a></li><li><a href="リンク先のURL">メッセージ</a></li><li><a href="リンク先のURL">リンク</a></li></ul></div>

ここまでできたら先にＣＳＳを説明しちゃいます

下のどの画像でも同じＣＳＳでできるようにしています

もちろん自分で画像を作ってもOKです

#topmenu {
width: 760px;/*ベーシックの場合は800pxです*/
height:40px;/*高さ*/
background: url( A画像のＵＲＬ※1) repeat-x;
display: block;
}
#topmenu ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style-type: none;
}
#topmenu li{
font-size:18px;/*文字サイズ*/
width: 150px;/*1つの項目の幅*/
font-weight:bold;/*太字*/
float: left;
margin: 0;
padding: 0;
}
#topmenu li a{
color: #333333;/*文字色*/
background: url( A画像のＵＲＬ) center repeat-x;
height:40px;/*高さ*/
padding: 5px 0 0;/*文字の位置*/
text-align: center;/*中央寄せ*/
text-decoration: none;
display: block;
}

#topmenu li a:hover{/*マウスオーバー時*/
color: #ff00ff;/*文字色*/
background: url( B画像のＵＲＬ) center repeat-x;
}

Ａ画像が最初に表示される画像でＢ画像がマウスオーバー時に表示される画像です

幅　無制限　高さ　30px～40pxくらい

幅無制限　高さ 40px

幅　124px～200px　高さ 40px

※この画像を使うときは最初の A画像のＵＲＬ※1 には右端の画像を使ってください

　２つのＡ画像のＵＲＬにどちらにも右端の画像を使っても面白いです・・

　　　　

　　　　

　　　　

　　　　

　　　　

文字の位置は上からの位置だけ設定します

もし・・中央（上下の真ん中）でよければ

たとえば上のＣＳＳでしたら

#topmenu li a{
color: #333333;/*文字色*/
background: url( A画像のＵＲＬ) center repeat-x;
height:40px;/*高さ*/
line-height:40px;/*文字の位置を中央*/
text-align: center;/*中央寄せ*/
text-decoration: none;
display: block;
}

heightとline-heightを同じにします