CSSのリスト 背景画像が表示されません

質問

横並びのメニューを作成したいと思っています。
text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。
ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。

よろしくお願いします。

#header h1 {
margin: 5px 0 0 20px;
padding: 0;
width: 248px;
height: 143px;
float: left;
text-indent: -9999px;
font-size: 130px;
background: url(../images/logo.jpg) no-repeat #FFFFFF;
background-position: center;
}
ul {
margin: 0;
padding: 0;
width: 635px;
height: 54px;
}
li{
float: left;
list-style: none;
margin: 0;
padding: 5px;
font-size: 50px;
text-indent:-999px;

}
li#top {

background: url(../images/menu/top.jpg) no-repeat;
}

回答No.1

goulan · ベストアンサー

こんばんわ。
>背景画像のみを表示
text-indent -999pxする目的が良くわかりませんが・・・・

その背景画像(../images/menu/top.jpg)が、メニュー項目なのでしょうか？「背景」画像ですから、要素liの中身がない or 文字があっても text-indent -999px ならば、表示するモノがないという事になります。モノがなければ、実際のUA上では幅がありません。「背景」画像も表示されませんね。ただし、IE6の場合は全くないですが、IE7, Firefox, Opera, Safari だと、ほんのわずか、10pxくらいでしょうか、表示されます(4.01の場合）。
ulには、width, height と指定なさってらっしゃいますから、liに、画像メニューの幅と高さを指定すれば表示されるはずです。htmlソースのli/liの中身になにもなくても、です。

h1の場合は、width,height を指定なさってますから、当然h1は中身があってもなくてもそのサイズは確保されてます。ですから、背景画像も表示されますね。

横並びメニューをliで実現するのは、さほど難しいことではありません。しかし、margin, padding, をUA毎に細かく指定するか、最大公約数的に指定しないと、IE,Firefox,Opera,Safari等々、それぞれ異なる隙間が表示され、当然、横並びメニュー全体の幅も変わって来ます。ulに指定した幅を越える、または足りなくて右が広くあいてしまう、などの状態になったりします。

また、画像が下にずれこむ状態とのことですが、background: ;で指定するばあいは、その画像などのポジションは２つあります。水平方向と垂直方向です。要素の width, height が その要素の背景画像より大きい場合、ポジションを指定すれば解決です。center も使えますし、%も使えます。50% 50% = center center ですね。0% 50% = 要素左端の真ん中。50% 0% = 要素中央の上端、という状態です。

お礼

ありがとうございます。
text-indentは、SEOを意識してのことで、本に載ってあったものを使用していました。

お教えいただいたようにliにwitdhを指定し、ulのwitdhを消すとうまくいきました。

ありがとうございました。