CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです

質問

こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。

CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。
親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。
横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。

HTML側
<div id="navi">
<ul id="navibar">
<li><a href="***" id="link1" title="リンク１">link1</a></li>
<li><a href="***" id="link2" title="リンク２">link2</a></li>
---同様にリンクが続く---
</ul>
</div>

CSS側
#navi{
width:700px;
text-align:right;
}

#navibar{
width:600px;
list-style-type:none;
background-color:transparent;
}

ul#navibar li{
width:120px;
float:left;
border:none;
display:block;
}

#navibar #link1{
width:106px;
height:20px;
text-indent:-500em;
background-image:url("images/link1bg.gif");
background-repeat:no-repeat;
}

#navibar #link2{
width:106px;
height:20px;
text-indent:-1000em;
background-image:url("images/link2.gif");
background-repeat:no-repeat;
} 以下同様に続く

どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。

回答No.2

noname#261745 · ベストアンサー

【html】
<div id="navi">
<ul id="navibar">
<li id="link1"><a href="#" title="リンク１">link1</a></li>
<li id="link2"><a href="#" title="リンク２">link2</a></li>
<li id="sample">sample</li>
</ul>
</div>

【css】
div#navi{
width:700px;
}
ul,
li{
margin:0;
padding:0;
}
ul#navibar{
list-style-type:none;
width:600px;
float:right;
}
ul#navibar li,
ul#navibar li a{
float:left;
text-indent:-9999px;
display:block;
width:106px;
height:20px;
margin-right:14px;
}
ul#navibar li#link1 a{
background:url(images/link1bg.gif) no-repeat left top;
}
ul#navibar li#link2 a{
background:url(images/link2.gif) no-repeat left top;
}
ul#navibar li#sample{
background:url(images/samplebg.gif) no-repeat left top;
}

text-alignは、ブロックレベル要素の中のインラインに対して効果があるものです。ブロックレベル要素自体に効果が出てしまうのはIEのバグです。

お礼

再びアドバイスいただき有難うございます。
この通りにやってみましたら、無事に解決できました！
何日もああでもないこうでもないと迷っていたのが嘘のようです・・・。

text-alignがブロック要素自体に効いてしまうのは
IEのバグだったのですか・・・トホホ。

本当にありがとうございました！

回答No.1

noname#261745

【html】
<div id="navi">
<ul id="navibar">
<li id="link1"><a href="***" title="リンク１">link1</a></li>
<li id="link2"><a href="***" title="リンク２">link2</a></li>
</ul>
</div>

【css】
div#navi{
width:700px;
}
ul,
li{
margin:0;
padding:0;
list-style-type:none;
}
ul#navibar{
width:600px;
float:right;
}
ul#navibar li{
float:left;
}
ul#navibar li a{
text-indent:-9999px;
display:block;
width:106px;
height:20px;
margin-right:14px;
}
ul#navibar li#link1 a{
background:url(images/link1bg.gif) no-repeat left top;
}
ul#navibar li#link2 a{
background:url(images/link2.gif) no-repeat left top;
}

こんな感じでどうでしょう。
ul要素の右寄せは、とりあえずfloatを使ったけど、要は左側に100pxの空きが欲しいならmargin-left:100pxとするとか、positionで左が100px空くようにすれば大丈夫だと思います。divの中身がulだけなら、div無くしてulにpadding-left:100pxでもいいですし。ま、そこら辺はこの部分以外のレイアウト次第ですね。

補足

アドバイスありがとうございます。書いていただいたソースで試したところ、ちゃんと背景画像だけが出ました！
ただ、実はナビバー内にリンクしたくない部分が含まれていまして、その部分は今まで、
<li><span id="sample" title="サンプル">サンプル</span></li>
のようにして、CSSは
#navibar #sample{
text-indent:-1500em;
background-image:url("images/samplebg.gif");
background-repeat:no-repeat;
}
という風にしていたのです。教えていただいたCSSだと、a要素に指定がありますが、こういうノンリンク部分が含まれる場合はどのようにすればよいのでしょうか。（すみません、先に記述しておくべきでした。）

右寄せは、画像（ナビゲーションバー）をピッタリ右寄せにしたかったので、手っ取り早く出来るのがテキストアラインかと思ったのですが、それがダメだったのでしょうか・・・。キッチリ数値で指定してみます。

回答いただいて二重に質問になってしまい申し訳ありません。宜しければまたアドバイスお願いいたします。