※ ChatGPTを利用し、要約された質問です（原文：ロールオーバーで画像がずれない方法）
このQ&Aのポイント
Webサイト作成時のグローバルナビゲーションのロールオーバーで画像が微妙にずれる問題についての解決方法を教えてください。
フォトショップやHTML、CSSの使い方の問題かどうか分からず、アドバイスを求めています。
それぞれの画像やテキストの作成方法、位置合わせ、カンバスサイズの設定などについて詳しく教えていただけると助かります。
初めてWebサイトを作成しており、今はグローバルナビゲーションを作成していますが、ロールオーバーしたときに、位置が微妙にずれてしまいます。
ちなみに画像の作成は、フォトショップCS6で次のように作成しました。
(1)カンバスサイズを、幅800px、縦60pxで作成
(2)長方形ツールを使い、境界線ありの画像を5つ作成し、手動で横に整列させる。
※一つ当たりのサイズは幅160px、縦30pxなので、全体の幅は800、縦30です。
(3)ロールオーバー用の画像のために、上記5つのボタンを複製し、色を変える
(4)通常表示用とロールオーバー用の画像を、手動で上下に連結させる
※これで幅800px、縦60pxになったので、カンバスサイズと同じサイズになりました。
(5)手動にて連結した画像をカンバスサイズの位置に合わせる
(6)テキストツールで会社概要など5つ作成し、上5つの画像の中心に合わせる
(7)上5つにある会社概要などの文字を一括コピーする。
(8)一括コピーした文字を、手動で下5つの画像の中心へ合わせる
※大変でしたが、グリッド機能を使って、調整しました。
以上のような流れで全体のグローバルナビゲーションのボタンを作成し、そして次の用にHTMLとCSSを入力したのですが、ロールオーバーした時に、ボタンも文字も微妙にすれてしまいます。
フォトショップの使い方が悪いのか、HTMLとCSSの使い方が悪いのか、どちらなのかわかりません。
いろいろな方からご教示を頂きたいです。本当にお願い致します！！
<!-- /以下HTML -->
<ul id="globalnavi">
<li id="menu1"><a href="#"></a></li>
<li id="menu2"><a href="#"></a></li>
<li id="menu3"><a href="#"></a></li>
<li id="menu4"><a href="#"></a></li>
<li id="menu5"><a href="#"></a></li>
</ul>
<!-- /以下CSS -->
#globalnavi {
margin: 0;
padding: 0;
}
#globalnavi li {
width: 160px;
height: 30px;
float:left;
text-align: center;
line-height: 3.5;
margin:0;
padding-left:0;
}
#globalnavi a {
float:left;
display: block;
text-decoration: none;
width: 160px;
height: 30px;
background-image: url(./img/menu-all.gif);
background-repeat: no-repeat;
margin:0;
padding-left:0;
}
#menu1 a { background-position: 0px 0px; }
#menu2 a { background-position: -160px 0px; }
#menu3 a { background-position: -320px 0px; }
#menu4 a { background-position: -480px 0px; }
#menu5 a { background-position: -640px 0px; }
#globalnavi a:hover {
text-decoration: none;
background-image: url(./img/menu-all.gif);
background-repeat: no-repeat;
margin:0;
padding-left:0;
}
#menu1 a:hover { background-position: 0px -30px; }
#menu2 a:hover { background-position: -160px -30px; }
#menu3 a:hover { background-position: -320px -30px; }
#menu4 a:hover{ background-position: -480px -30px; }
#menu5 a:hover{ background-position: -640px -30px; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ありがとうございます！！