掲示板/スタイルシート質問板/過去ログ/一覧/ サイズ違いのナビゲーションバーをCSSでうまく表示させるには

0 名前：カコ： 2007/03/20（火） 03:58 ID:3Wk1tywZ sub-t1: こんにちは、はじめて質問させていただきます。

ナビゲーションバーをリストで組み、CSSで背景をロールオーバーさせるというものです。
リストの背景サイズはwidth：140px; heigh:20pxで組んでいたのですが、
このうちの一つが字数の都合により他のものの倍の幅、280pxになってしまいました。

ex)このような2段組のナビゲーションバーです。
「難関レベル」と書かれたものだけが、幅280pxでそれ以外は140pxになっています。

|基本｜標準｜応用｜難関レベル｜
|●●｜○○｜××｜■■｜◆◆｜

とりあえず、下記のようなhtmlとCSSを組みました。

CSS----

#navi{
margin:0;
padding:0;
width:560px;
height:40px;
}

ul#navi01{
list-style:none;
width:100%;
margin:0;
padding:0;
}

ul#navi01 li{
list-style:none;
width:140px;
margin:0px;
float:left;
}

ul#navi01 a{
display:block;
height:20px;
text-indent:-1000px;
overflow:hidden;
}

a.kihon{
background-image:url(img/navi_kihon.gif);
}
a:hover.kihon{
background-position:0px -20px;
}

a.hyojun{
background-image:url(img/navi_hyojun.gif);
}
a:hover.hyojun{
background-position:0px -20px;
}

a.ouyou{
background-image:url(img/navi_ouyou.gif);
}
a:hover.ouyou{
background-position:0px -20px;
}

a.nankan{
background-image:url(img/navi_nankan.gif);
}
a:hover.nankan{
background-position:0px -20px;
}
（以下略）

html----

<div id="navi">
<ul id="navi01">
<li><a href="http://www.kihon.jp/">基本</a></li>
<li><a href="http://www.hyoujun.jp/">標準</a></li>
<li><a href="http://www.ouyou.jp/">応用</a></li>
<li><a href="http://www.cyo-nankan.jp/">超難関レベル</a></li>
<li><a href="http://www.xxxxx.jp/">●●</a></li>
（以下略）
</ul>
</div>

この状態でブラウザでチェックをすると、IE6だと一段目最後の字数の多いものが幅280pxまで表示されるのですが、
firefoxだと140pxできれてしまい、下の段のリストが長いリストの途中から表示されてしまいます。
（下記のような感じ）

｜基本｜標準｜応用｜難関｜●●
｜○○｜××｜■■｜◆◆｜

幅の長いものだけに対して、280pxまでちゃんと表示できるような設定の仕方を教えていただけませんでしょうか。
もしくは、このタグの組み方だと不可能な場合、他にテーブルに組み込む以外で方法をご存知ではないでしょうか。

説明がわかりづらく申し訳ありませんが、デザインありきの案件の為、非常に困っております。
宜しくお願いいたします。

1 名前： K+S ： 2007/03/20（火） 03:58 ID:nROqylMa sub-YS: 検証しやすい形で質問していただけると回答しやすいです。
当該ページそのものか同等の現象を再現できるページ、或いは容易に再現できるだけのソースを提示してください。
background-image:url(img/navi_kihon.gif);
などと提示されても実際に画像が用意されていない限り再現性に欠けます。

問題の再現を試みましたが実現できませんでした。
|基本｜標準｜応用｜難関レベル｜
|●●｜○○｜××｜■■｜◆◆｜
質問された文章から、『基本』と『●●』のHTML要素的な関係を読み取れませんでした。

2 名前：匿名： 2007/03/20（火） 03:58 ID:6fAvcTJO sub-kJ: ほぼ >>1 とかぶるんだけど、

>>0
ロールオーバーが「きっかけ」なのは分かったが、

> firefoxだと140pxできれてしまい、下の段のリストが長いリストの途中から表示されてしまいます

この問題に、ロールオーバーが関係あるの？あと、CSS に書かれているクラス名が HTML の方には無いのはなぜ？ソースを提示する際は、必要なものを全部含め、かつ余計なものを含めないようにしよう。原因を絞り込むためだ。

質問内容として、俺は最初（ロールオーバーのソースがわざわざ書いてあるから）上段にポイントしたら下段に何か出るようにするのかと思ったが。そうではなく、単なるリスト二段組の問題と解釈して良いのかな？

その場合、まず確認しておきたいことが一つ。

> 他にテーブルに組み込む以外で方法をご存知ではないでしょうか

見た感じ、上段の項目と下段の項目とは対応関係にあるんだよね？それならば、table 要素としてマークアップしなければならないのだけど。そうしないと、UserAgent に項目同士の対応関係を伝えることができないでしょ。

正しい HTML の使い方を曲げてまで、リストにこだわる理由は？（まあ、個人的にこだわりは好きだけど）