2008年8月の宿題　「Navigation Bar ２」

こう暑くては、宿題だすのを忘れる恐れがあります。それだけは避けたいので(笑)早めに出しておきます。
http://www.naocraft.com/hps/test/navi_test.html
この図にあるように、ページを移動するとそのページのナビゲーションバーが変化するようにしてください。 IEの場合は開いているページのバーの高さを設定するのがかなり難しいですから、同じ高さでも構いません。 ソックリでなくても、開いているページがここだと分かるようにしてください。見本のように枠線がなくても構いません。ただし 見本に近い答えであるほど、応用は広いと思います。
質問はMLでお願いします。
答えたくてウズウズする人は、すぐにチャレンジしてください(笑)

(1) > liにhover時に背景色が変わらず、文字の上で変わってます。
これは .navbar li a:hover の時にブロック表示ですね。ということはマウスが上に来るまではインライン表示のままですね。 ブロック表示は a:hover 以前に設定が無ければ意味がないですね。 a要素をブロック表示すれば自動的に a:hover もそうなります。今の書き方では反対になってますよ。

(2) > line-heightではなくheightで高さ値を決めましたが、padding-topが使えません。
ブロック化されていないときは無効です。もうお分かりですね。前の疑問と一緒に片付けましょう。

(3) > さて、「.navbar li 」に対比するものとして「span.color」が用意されてます。
>これは li要素の内容に対する設定になりますがやはり「対比するli要素」を用意すべきではないでしょうか？
「li X」対「li Z」と言う意味ですよ。一つは li の属性。二つ目は li の二つ目の属性です。 今の状態は、一つは li の属性。二つ目は li の「内容＝テキストの属性」になってます。 マウス操作で動かすには無理がありますね。
理想的なのは、li までは構造タグにそのままスタイルを設定。一つだけ li+属性で区別するとHTMLが綺麗になります。
「li 」対「li id="X"」といった形ですね。
.navbar li a:hover { のような書き方でできませんか？これは構造タグにダイレクトにCSSを設定した例ですね。

(4)マイナスマージンもいいですが、もっといいマージンの付けかたはないのかな？「どの要素」につけるか、 よーく考えて見ましょう。

綿貫さん
http://www.watanuki-web.net/hps08.08/navi2.html
不可能なわけではありませんが、最初の発想がちょっと苦しかったですね。これからはもっと楽に考えましょう。 綿貫さんの解答で、次のようにCSSを追加すれば大体のところは希望の動作をすると思います。 残念ながら無理矢理のCSSになってしまいます(^^;
.navbar { line-height:150%; } 　行間設定はこの解答ではこれしか手はなさそうですね。
li a { display: block; } 　ブロック化します。
.navbar li.Z { height : 22px; padding-top: 3px; } 　ブロック化したのでpadding使えます。高さ変えます。
.navbar li.X { padding-bottom: 1px; } 　a要素のCSSと高さを揃えます。
li.X#Y a:hover { border-top : solid 1px #000; border-left : solid 1px #000; border-right: none;} 　右端のa要素を設定します。ZではなくXにID属性で追加します。
これで見た目は希望通りかなと思います。 ただし右端のページを開いたらどうなるかは不明です。 恐らくそこでも問題は発生するでしょうね(^^;
以上です。