※ ChatGPTを利用し、要約された質問です（原文：CSSで横並びのロールオーバーの表示がおかしいです）
CSSで横並びのロールオーバーの表示がおかしいです
このQ&Aのポイント
知人に頼まれて、ホームページを作成中なのですが、一枚の組み合わせた画像を使い、横に5つの内容を表示してbackground-positionで表示を指定して、ロールオーバーの横並びのナビを作っています。
症状としては、画像が横並びに5つ表示はされるものの、position: 0 0; の値の画像が5つ並んで表示されます。オンマウスも効いていません。
使用ソフトは、HeTeMULU Creator
確認ブラウザは、FireFox5
表示したい画像は、width 190px height 60pxを5つ横に繋げた950pxの画像とそれの色違いをもう一つ用意して、加工して上下に繋げた、950px 120pxの画像です。
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;}
ご指摘を宜しくお願いいたします。
お礼
丸一日苦戦していた事が凡ミスだったとは・・・ くだらない修正箇所への丁寧なご指摘ありがとうございました