<li>タグを使って横並びメニューボタンを作成する際ベストな手法とは？

質問

CSSで、横並びのメニューボタンを作成しています。
（文字も画像にしています。）

imgタグで並べるのではなく、liタグを使って、テキストは表示しないようにしたいと思い、下記のようなソースで記述しました。

/*htmlソース*/
<li class="tmenu01"><a href="sample">はじめに</a></li>

/*cssソース*/
li.tmenu01 {
display:block;
width:126px;
height:31px;
background:url(image/menu01.gif) no-repeat;
text-indent:-9999px;
float: left;
}

しかし、text-indent:-9999px;とfloat: left;をいっしょに使用すると、背景画像・文字とも表示されなくなってしまいます。
いろいろネットを調べてみたのですが、文字を飛ばす+横並びのバージョンの解決方法が見つからず、方法がわかりません。
いい方法がありましたら、どなたか教えてください…m(_ _)m

回答No.3

CHI-512 · ベストアンサー

こんにちは。

▼HTML
<ul id="list01">
<li class="li01"><a href="a.html"><span>あいうえお</span></a></li>
<li class="li02"><a href="b.html"><span>かきくけこ</span></a></li>
<li class="li03"><a href="c.html"><span>さしすせそ</span></a></li>
</ul>

▼CSS
#list01 {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
#list01 li {
float: left; /* フロートで横に並べる */
margin-right: 20px; /* メニュー間の余白（一括指定の場合） */
}
#list01 span {
display: none; /* テキスト非表示 */
}
#list01 li a {
display: block; /* リンク領域を確保する */
height: 20px; /* メニュー画像の高さ */
}
.li01 {
background: url(images/menu01.gif) no-repeat left top; /* 画像を指定 */
width: 100px; /* 画像の幅を指定 */
}
.li02 {
background: url(images/menu02.gif) no-repeat left top;
width: 90px;
}
.li03 {
background: url(images/menu03.gif) no-repeat left top;
width: 80px;
}

でいかがでしょうか？
WIN環境のIE6とFirefoxで確認済み。IE7・MACは未確認です。
また、メニューに指定する画像の高さが一律と仮定したCSSソースです。
あとは、環境に合わせてイジり倒して下さい。

お礼

ごめんなさい、返信が遅くなってしまいました。
こちらで問題なく表示できました！
ありがとうございました。

回答No.2

gonagona

こんばんわ。

手元にIEが無いので、SafariとFirefoxでしか確認していませんが、
CSSを下記のようにしてもダメでしょうか？

/* リストを左側に回り込み */
li.tmenu01 {
float: left;
}
/* 「aタグ」をブロック要素にして幅・高さ・背景指定。テキストを非表示に。 */
li.tmenu01 a{
display:block;
width:126px;
height:31px;
background:url(image/menu01.gif) no-repeat;
text-indent:-9999px;
}

お礼

有難うございました！
やってみたところ、
Firefox、Netscapeでは問題なく見えているのですが、
やはりIEではだめなようです…。
IE7で確認したところ、完全な横並びにならず、ちょっとずつ下にずれていてってます。？？？
やっぱりliでは無理でしょうか。。。

ともかく貴重なお時間をいただき、有難うございました。

回答No.1

MAN_MA_RUI

箇条書きに使うためのものを横並びに使うことは余り好ましくないと思います。
何故liタグを使って横並びメニューを作成しようと思うのでしょうか？
普通にimgを使わない理由は何でしょうか？第一印象的なモノで行けば意味のないことをしているようにも感じます。

も、もう少～し詳しく、理由とか目的とかを書いていただけるといいのですが…^^;

補足

ご返信ありがとうございます。
クライアントがかなりSEOを意識していて、「imgよりもテキストで記述させたい。けれどフォントが特殊なものを使っているので、文字も画像で。」という背景があり、liタグで出来ないかなあと考えておりました。縦並びだと簡単にできるのですが…。
実はつい先ほどliタグを使用しつつ横並びメニューのサイトを見つけてCSSを拝見していたのですが、非常～に複雑すぎて理解できませんでした（笑）もし解決方法があれば（liタグでなくても、imgではない方法で）分かればご教示いただけると助かります！