ロールオーバーで画像がずれない方法

質問

初めて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; }

回答No.1

ORUKA1951 · ベストアンサー

この様な作業は、画像までで後はテキストエディタを使うほうが楽ですね。(5)移行の手順はテキストエディタで行いましょう。
手順を追って説明しておきます。

たぶんtext-decorationのためでしょう。

[HTML]は　　以下タブは＿に置換してあるので戻してください。
<ul id="globalnavi">
＿<li><a href="/index.html">TOP</a></li>
＿<li><a href="/product"></a></li>
＿<li><a href="/books"></a></li>
＿<li><a href="/information"></a></li>
＿<li><a href="/contact"></a></li>
</ul>
だけでよいです。

#globalnavi,#globalnavi li{
＿display:block;list-style:none;/* ブロック要素に一旦変更 */
＿margin: 0;padding: 0;/* 一旦消す */
＿text-align:center;line-height:30px;/* 幅・高さの中心に来るように */
}
#globalnavi li{
＿width: 160px;height: 30px;
＿display:inline-block; /* よほど古いブラウザでない限りfloat:left;でないほうが良い */
}
#globalnavi a {
＿display: block;
＿text-decoration: none;
＿width:100%;height:100%;
＿background: url(./img/menu-all.gif) no-repeat 0 0 ;
＿text-decoration: none;
}
#globalnavi a[href="/index.html"] { background-position: 0px 0px; }
#globalnavi a[href="/product"]{ background-position: -160px 0px; }
#globalnavi a[href="/books"]{ background-position: -320px 0px; }
#globalnavi a[href="/information"]{ background-position: -480px 0px; }
#globalnavi a[href="/contact"]{ background-position: -640px 0px; }

#globalnavi a[href="/index.html"]:hover,
#globalnavi a[href="/index.html"]:focus { background-position: 0px -30px; }
#globalnavi a[href="/product"]:hover,
#globalnavi a[href="/product"]:focus{ background-position: -160px -30px; }
#globalnavi a[href="/books"]:hover,
#globalnavi a[href="/books"]:focus{ background-position: -320px +30px; }
#globalnavi a[href="/information"]:hover,
#globalnavi a[href="/information"]:focus{ background-position: -480px -30px; }
#globalnavi a[href="/contact"]:hover,
#globalnavi a[href="/contact"]:focus{ background-position: -640px -30px; }

★ブラウザごとにpaddingやmarginの差があるので一旦消してください。
★a要素はblockにしたのち、whidth,heightを100%にするほうが良いです、
　これは先でリキッドデザインにしたときなどに書き換えなくてすむとか色々利点があります。
★アクセスビリティ・ユーザビリティを考えるとli間にmarginをとるほうが良いです。
　#globalnavi li{margin-left:4px;}/* #globalnaviに同系の背景色を指定すること。
★idをつけるより要素セレクタのほうが絶対に楽です。今回は一枚の画像でしたがそれぞれに画像を用意した場合に次のように書けますから、後々のメンテナンスが楽です。
　#globalnavi a[href="/index.html"] { background-image:url(./images/goTop.gif); }
　とかね。そうするとリストの順番を変えても良いでしょう。
★マウス以外のアクセスを考えると:hoverと一緒に:focusも指定しておきましょう。
★ついでに:activeと:visitedも記載順は
:link
:visited 以上二つは排他的なので順不同
:hover :focus
:active;
★スタイルシートを書くポイント
1) 同じ師弟を何度も書かないように出来るだけグループ化する。
2) 継承するプロパティは繰り返し書かない。
3) 同じ系統の指定はまとめて一行にする。
　width:100%;height:100%
それだけで、一覧性が良くなってメンテナンスが楽になります。

お礼

ありがとうございます！！

回答No.2

ORUKA1951

わすれもの
#globalnavi li{}に、position:relative;を追加しておくほうが良いです。

お礼

ありがとうございます。
追記しておきます！！