【CSS】ナビゲーション ロールオーバー（画像使用）

質問

こんにちは。
ナビゲーションをCSSで画像ロールオーバーを試みたのですが
上手くいきません。
下記URLでファイルを参照いただき、どこが間違っているのかご教授いただけますでしょうか。

どうぞ宜しくお願い申し上げます<(_ _)>
＜参照HTML＞http://www.rough-inc.jp/
＜参照CSS＞http://www.rough-inc.jp/css/style.css
＜使用の画像＞※下記2種類
http://www.rough-inc.jp/images/navi.gif
http://www.rough-inc.jp/images/navi_bg.gif

回答No.4

abril · ベストアンサー

実際に検証してみました（IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XP）。
ナビゲーションのリンク周りのプロパティのまとめ方については、ANo.3で記述した通りで問題はありませんでした。

それからついでに、現在#g_naviを<div>とし<ul>を入れ子にするマークアップを変更した場合についても検証しました。
下記の様に変更すれば、こちらも問題なく表示されます。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
＜オリジナル＞
----------------------------------------------------------------------
<div id="g_navi">
<ul>
（省略）
</ul>
----------------------------------------------------------------------
↓
----------------------------------------------------------------------
＜修正版＞
----------------------------------------------------------------------
<ul id="g_navi">
（省略）
</ul>
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
＜オリジナル＞
----------------------------------------------------------------------
#g_navi {
margin:0;
background-image: url(../images/navi_bg.gif);
background-repeat: no-repeat;
height: 50px;
}
#g_navi ul {
padding: 0px;
margin: 0px;
}
#g_navi li {
display:inline;
list-style-type:none;
}
#g_navi li a {
height:50px;
display:block;
float:left;
text-indent:-9877em;
text-decoration:none;
overflow:hidden;
}
----------------------------------------------------------------------
↓
----------------------------------------------------------------------
＜修正版＞
----------------------------------------------------------------------
#g_navi {
height: 50px;
list-style: none;
margin: 0;
padding: 0;
background: url(../images/navi_bg.gif) no-repeat;
}
#g_navi li {
float: left;
margin: 0;
padding: 0;
}
#g_navi li a {
display: block;
width: 130px;
height: 50px;
background-image: url(../images/navi.gif);
background-repeat: no-repeat;
text-indent: -9877em;
text-decoration: none;
overflow: hidden;
}

※#g_navi liを"display: inline;"ではなく"float: left;"とし"list-style: none"は親要素（<ul>）の#g_naviの方へ定義、#g_navi li aからは"float: left;"を外しています。
----------------------------------------------------------------------

あと、上下角丸画像と<div id="main">～</div>部分のレイアウトのズレですが、現在IEで表示されている様なレイアウト（コンテンツ全体がセンタリング、<div id="main">～</div>部分は幅800pxの中で左寄せ、コピーライト部分は幅800pxの中で右寄せ）を意図されていると思うのですが、残念ながら他環境では崩れています。もし他の環境も意識されているのであれば（その方が良いと思いますが）、全体のレイアウトが崩れない様に構造とスタイルを見直された方が宜しいかと思います。

お礼

abrilさん！素晴らしいです！本当にご指摘ありがとうございます！
まだIE6.0以外の環境で確認していなかったので、ご指摘後Firefoxで確認した際、びっくりしました(^_^;)本当にありがとうございます。
なんとかIE、Netscape、Firefoxでのセンタリングも上手くいき、ナビゲーション部分もabrilさんが教えてくださった通りに変更いたしました。また、最初のご回答で
height: 50px;
background: url(../images/navi_bg.gif) no-repeat;
不必要という件も、
新しく修正いただいたCSSの記述で上記部分を削除しても、DWのデザイン編集画面で背景が確認することができました。ですので、上記記述は現在削除しております。

CSSの構造をきちんと理解してないなから、こういう間違いなどが起きるのですよね。今回は本当に勉強になりました。
丁寧にわかりやすく全てのCSSの記述やコーディングチェックまでして頂き、abrilさんには本当に感謝しております。
（もちろん、最初にご回答いただいたleap_dayさんもありがとうございます！）

これを機に、CSSをより勉強しできるだけ簡素化したHTML、CSSを書けるように努力いたします。
この度はお忙しい中、本当にお時間を頂きましてありがとうございました。また教えて頂く機会がありましたら、その際はどうぞ宜しくお願いいたします。<(_ _)>

回答No.3

abril

> そうなんですレイアウト崩れの件でした。すいません、言葉足らずでした。<(_ _)>

であれば解決済みですね、了解です。<ul><dl>などのリストタグはディフォルトでブラウザ固有のインデントや余白が与えられていますので、CSSで予めまとめて初期化しておくとその後のスタイル設定が簡略化できます。

> > 定義に無駄が多い事は確かです。もっと短くまとめられますし、ANo.1の回答者様が仰る様に、#g_naviのbackgroundは不要だと思います
> 必要ないのですが、DWで編集の際、backgroundを指定しないと編集画面に表示されず、デザインをする上で気持ちがわるいので、自己満足で入れています。このようにしなくても、編集画面で表示する方法があるのでしょうか。もしDWをお使いでお分かりでしたらご教授願います。

Dreamweaverは（インストールはしてありますが）メイン・ツールとして使用していないので、すみませんが詳細なカスタマイズ等は存じてません。
が、質問者様が「編集画面に表示されず、デザインをする上で気持ちがわるい」という事であれば、編集中はこのままでも差し支えないのでは。できればアップロードの際は、ここを削除するなり隠すなりしておいた方が（本来はなくて良い筈の定義ですから）宜しいかと思いますが。

> 他に無駄な部分はあるのでしょうか。せっかくですので、もしあれば再度ご教授いただけますか。

私が無駄、と書かせて頂いたのは、主にプロパティの定義のまとめ方の部分についてでした。現状でも間違ってはいませんが、「カスケーディング（継承）」という特質をできるだけ活かして、CSSの記述もなるべく簡潔にした方がより良いでしょう、という事です。

"#g_navi li.g_navi01 a"～"#g_navi li.g_navi06 a"までの共通する定義部分は"#g_navi li a"の方にまとめられます。
---------------------------------------------------------------------
#g_navi li a {
display: block;
float: left;
width: 130px;
height: 50px;
background-image: url(../images/navi.gif);
background-repeat: no-repeat;
text-indent: -9877em;
text-decoration: none;
overflow: hidden;
}
---------------------------------------------------------------------
としてしまえば、あとは個別のclassセレクタ上では：
---------------------------------------------------------------------
#g_navi li.g_navi01 a {
background-position: 0px 0px;
}
#g_navi li.g_navi02 a {
background-position: -130px 0px;
}
（以下同様）
---------------------------------------------------------------------
と、異なるプロパティ部分だけの記述で済みますので、修正する際も楽です。
a:hoverの方も、background-imageは"navi.gif"という同じ画像を参照、background-repeatも同じくno-repeatですので、個別に定義しなければならないのはbackground-positionだけ、ということになります：
---------------------------------------------------------------------
#g_navi li.g_navi01 a:hover {
background-position: 0px -50px;
}
#g_navi li.g_navi02 a:hover {
background-position: -130px -50px;
}
（以下同様）
---------------------------------------------------------------------
更に、"li.g_navixx a:hover"と"#g_navi li.g_navixx_on a"が全く同じスタイルになるということは、この2種類のclassセレクタをまとめて定義できます：

#g_navi li.g_navi01 a:hover, #g_navi li.g_navi01_on a {
background-position: 0px -50px;
}
#g_navi li.g_navi02 a:hover, #g_navi li.g_navi02_on a {
background-position: -130px -50px;
}
（以下同様）
---------------------------------------------------------------------
これでCSSの記述がかなりすっきりします。

それから構造上の事ですが、現在のソースを見る限り、"#g_navi"の定義内容を"#g_navi ul"の方に含めて、"ul#g_navi"（idセレクタなので"#g_navi"のままの記述でも勿論かまいません。どちらでも同じ事ですので。）としてしまって構わないのではないかと思います。そうすればマークアップの方もナビゲーションの部分が”<div id="g_navi"><ul>～</ul></div>”という二重構造ではなく、<ul id="g_navi">～</ul>となり、シンプルになります。
---------------------------------------------------------------------
ul#g_navi {
height: 50px;
margin: 0;
padding: 0;
background: url(../images/navi_bg.gif) no-repeat;
}
---------------------------------------------------------------------

あいにく現在、外出先からのぞき見しているだけなので、修正結果を実際に検証してはいません。もし不具合がある様でしたら補足（質問者様の環境も含め）して下さい。明日にでも検証しておきますので。

あと、こちらは直接の質問内容ではないので蛇足ですが：
---------------------------------------------------------------------
<div><img src="images/bg_hed.gif" width="800" height="15"></div>
<div><img src="images/bg_fot.gif" width="800" height="15"></div>
---------------------------------------------------------------------
この2カ所、親要素のbodyの"text-align: center;"を継承したままになっていますので、ウィンドウを広げるとどんどん画面中央方向へずれていってしまいますので、こちらも修正された方が宜しいかと思います。

回答No.2

abril

> ナビゲーションをCSSで画像ロールオーバーを試みたのですが上手くいきません。

参照先URLを見てみましたが、当方の環境（Safari3.0 on Mac OSX）では特に「ロールオーバー」が上手くいかない、という現象は起こりませんでした。ナビが本来のコンテンツ幅より右にはみ出す、というレイアウト崩れは起きていますが。レイアウト崩れの事を仰っているのであれば、ANo.1の回答者様の指摘の通りですが。
質問者様の不具合とは具体的にどんな状態ですか？また、どの環境（ブラウザの種類・ヴァージョン・OS）で起きていますか？
定義に無駄が多い事は確かです。もっと短くまとめられますし、ANo.1の回答者様が仰る様に、#g_naviのbackgroundは不要だと思いますし、また、navi.gifにはmouseout時/mouseover時/セルフ（「ホーム」のカテゴリにいる時は「ホーム」をハイライト）、の3種類の画像が統合されていますが、mouseover時とセルフの画像が全く同じであれば、2種類でいいと思いますが？

お礼

abrilさん、御返答ありがとうございます。

＞参照先URLを見てみましたが、当方の環境（Safari3.0 on Mac OSX）では特に「ロールオーバー」が上手くいかない、という現象は起こりませんでした。ナビが本来のコンテンツ幅より右にはみ出す、というレイアウト崩れは起きていますが。レイアウト崩れの事を仰っているのであれば、ANo.1の回答者様の指摘の通りですが。

そうなんですレイアウト崩れの件でした。すいません、言葉足らずでした。<(_ _)>

＞定義に無駄が多い事は確かです。もっと短くまとめられますし、ANo.1の回答者様が仰る様に、#g_naviのbackgroundは不要だと思います

必要ないのですが、DWで編集の際、backgroundを指定しないと編集画面に表示されず、デザインをする上で気持ちがわるいので、自己満足で入れています。このようにしなくても、編集画面で表示する方法があるのでしょうか。もしDWをお使いでお分かりでしたらご教授願います。

＞また、navi.gifにはmouseout時/mouseover時/セルフ（「ホーム」のカテゴリにいる時は「ホーム」をハイライト）、の3種類の画像が統合されていますが、mouseover時とセルフの画像が全く同じであれば、2種類でいいと思います

その通りなんです。レイアウト崩れの原因が分からなかったのでもしかして、画像を3種類での設定しか無理なのかな？なんて見当違いなことを考えた結果でした。でもそうじゃないと分かったので、画像は2種類に減らしました。

他に無駄な部分はあるのでしょうか。せっかくですので、もしあれば再度ご教授いただけますか。質問に掲載しているURLはまだご覧頂ける状態にしております。
どうぞ宜しくお願いいたします<(_ _)>

回答No.1

leap_day

こんにちは

#g_navi ul {
margin:0px;
}

が足りません

#g_navi {
background:url(../images/navi_bg.gif) no-repeat;
}
は必要ですか？

お礼

leap_dayさん、ありがとうございました。助かりました(ToT)/~~~
#g_navi ul {
margin:0px;
}
できれいに直りました。

#g_navi {
background:url(../images/navi_bg.gif) no-repeat;
}
は必要ないのですが、DWで編集の際、backgroundを指定しないと編集画面に表示されず、デザインをする上で気持ちがわるいので、自己満足で入れています。
このようにしなくても、編集画面で表示する方法があるのでしょうか。

もしDWをお使いでお分かりでしたらご教授願います。