みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSで横並びのロールオーバーの表示がおかしいです

知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。

当方はあまり知識がないなりに、様々なサイト様を参考にしたのですが、うまく表示されませんのでご助力をお願いいたします。

症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。
オンマウスも効いていません。

使用ソフトは、HeTeMULU Creator
確認ブラウザは、FireFox5
表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。
以下ソースです。

/*---HTML*/

<?xml version="1.0" encoding="shift_jis "?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<title>###</title>
</head>
<body>
<div id="main">
<div id="menu">
<ul>
<li class="menu1"><a href="#">sample</a></li>
<li class="menu2"><a href="#">sample</a></li>
<li class="menu3"><a href="#">sample</a></li>
<li class="menu4"><a href="#">sample</a></li>
<li class="menu5"><a href="#">sample</a></li>
</ul>
</div>
</div>
</body>
</html>


/*---CSS*/

#menu{
width: 950px;
height: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 0px;

}

#menu ul{
margin: 0px;
padding: 0px;
}

#menu li{
width: 190px;
margin: 0px;
padding: 0px;
float: left;
text-indent: -9999px;
}

#menu a{
display: block;
width: 100%;
height: 60px;
background-image: url(../img/menu001.png);
background-repeat: no-repeat;

.menu1 a{ background-position: 0px 0px;}
.menu2 a{ background-position: -190px 0px;}
.menu3 a{ background-position: -380px 0px;}
.menu4 a{ background-position: -570px 0px;}
.menu5 a{ background-position: -760px 0px;}

#menu a:hover{
background-image: url(../img/menu001.png);
background-repeat: no-repeat;

.menu1 a:hover{ background-position: 0px -60px;}
.menu2 a:hover{ background-position: -190px -60px;}
.menu3 a:hover{ background-position: -380px -60px;}
.menu4 a:hover{ background-position: -570px -60px;}
.menu5 a:hover{ background-position: -760px -60px;}



ご指摘を宜しくお願いいたします。

投稿日時 - 2011-07-20 14:15:46

QNo.6887700

困ってます

質問者が選んだベストアンサー

cssで閉じるところはしっかり閉じてみてはいかがでしょうか?

投稿日時 - 2011-07-20 21:23:15

お礼

丸一日苦戦していた事が凡ミスだったとは・・・

くだらない修正箇所への丁寧なご指摘ありがとうございました

投稿日時 - 2011-07-20 22:41:29

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問