0

"HP作成・CSSに詳しい方"
1枚の画像でロールオーバーを設定する ホームページを作成しており、ナビゲーションバーのロールオーバーをcssを使って1枚の画像（「１つのボタンが150px×50pxで横一列に５つ」×3列）で設定したいと考えています。

動作としては通常・hover・currentの3つです。

ソースを下記の通り作ってみましたが、IEでは添付画像のように、Firefoxでは通常時の画像のみの表示でロールオーバーできず、safariでは画像が乱れる、という状況です。

そこで以下の2点についてご回答お願いします。

１．ソースのどの部分が間違っているのでしょう？
２．ソースをよりよく（後々で変更がしやすい、SEO的に好ましいなどの意味で）できれば教えてください

ご回答よろしくお願いします。

＊注：ＨＰ作成初心者ですので極力わかりやすく説明お願いします。

HTML

<div id="g_navi">
<ul>
<li class="g_navi01_on"><a href="#">ホーム</a></li>
<li class="g_navi02"><a href="#">施設について</a></li>
<li class="g_navi03"><a href="#">コース</a></li>
<li class="g_navi04"><a href="#">お問い合わせ</a></li>
<li class="g_navi05"><a href="#">アクセス</a></li>
</ul>
</div>


CSS

@charset "Shift_JIS";
/* -+-+-+-+-+- Global Navi Style */
#g_navi {
width:750px;
height:50px;
background:url(image/topnav.gif) no-repeat;
margin:0 0 0 8px;
}

#g_navi ul {
padding:6px 0 0 6px;
}

#g_navi li {
display:inline;
list-style-type:none;
}

#g_navi li a {
widht:150px;
height:50px;
display:block;
float:left;
text-indent:-9877em;
text-decoration:none;
overflow:hidden;
}


/*--通常時*/
#g_navi li.g_navi01 a {
background:url(image/topnav.gif) no-repeat 0 0 ;
}

/*--中略*/

#g_navi li.g_navi05 a {
background:url(image/topnav.gif) no-repeat -600 0 ;
}



/*--hover時*/
#g_navi li.g_navi01 a:hover {
background:url(image/g_navi.gif) no-repeat 0px -50px;
}

/*--中略*/

#g_navi li.g_navi05 a:hover {
background:url(image/topnav.gif) no-repeat -600 -50px ;
}


/*--on時*/
#g_navi li.g_navi01_on a {
background:url(image/topnav.gif) no-repeat 0px -100px;
}

#g_navi li.g_navi05_on a {
background:url(image/topnav.gif) no-repeat -600 -100px ;
}

質問者が選んだベストソリューション

Yahoo!知恵袋 5214日前