グローバルナビがうまく表示されません

画像一枚でグローバルナビを作ろうと思ったのですが、うまく表示されません。

コードは下に書きますがまずは症状から
どうなるかというと、位置を指定しても全部一番左側のものが表示される（トップページが５つ）のと、
#menuの方で指定した画像が幅１．５ｃｍくらい開けて上に表示されてしまいます。本来は前述のトップページが５つ並んでいる部分に表示されてほしかったものです。

以下コード
header.php

<ul id="menu"> <li><a href="<?php bloginfo('url'); ?>"id="home">home</a></li> <li><a href="<?php bloginfo('url'); ?>/about"id="about">about</a></li> <li><a href="<?php bloginfo('url'); ?>/information"id="information">information</a></li> <li><a href="<?php bloginfo('url'); ?>/blog"id="blog">blog</a></li> <li><a href="<?php bloginfo('url'); ?>/contact"id="contact">contact</a></li> </ul>

style.css
#menu{
width:910px;
height:37px;
padding:0;
margin:0;
background:url(images/globalnavi.png)no-repeat;
}
#menu li {
float: left;
}
#menu a{
text-indent:-9999px;
display:block;
width:182px;
height:37px;
text-decoration:none;
background:url(images/globalnavi.png)no-repeat;
}
#home{background-position:0px 0px;}
#about{background-position:-182px 0px;}
#information{background-position:-364px 0px;}
#blog{background-position:-546px 0px;}
#contact{background-position:-728px 0px;}

追記
スクリーンショットです
![
空いていた隙間はHPのタイトルを消したら画像のようになりました。

退会済みユーザー

2015/09/09 16:47

スクリーンショットを撮って添付してください。 http://windows.microsoft.com/ja-jp/windows-xp/help/setup/take-a-screen-shot

退会済みユーザー

2015/09/09 17:13 編集

> 空いていた隙間はHPのタイトルを消したら画像のようになりました。どう表示したいのかが読み取れません。「隙間をなくしたい」と言っていましたが、「こうなりました」では何が質問なのですか？

sorat

2015/09/09 17:42

画像の上のものは下のトップページが並んでる位置に表示されてほしかったものです。表現の仕方が悪かったですが、隙間を無くしたいのではなく本来意図した位置から上にずれている原因を知りたかったのです。

行動規範の内容に同意します

回答2件

ベストアンサー

優先順位が間違ってると思いますよ。

CSS
1li #home{background-position:0px 0px;}
2li #about{background-position:-182px 0px;}
3li #information{background-position:-364px 0px;}
4li #blog{background-position:-546px 0px;}
5li #contact{background-position:-728px 0px;}

これにしたらそれぞれの項目が表示されるはずです。

表示がずれるのは原因不明ですね。
何か文字や画像が被ってるのか、コードを見ないと何とも言えません。

投稿2015/09/10 01:26

Koji

総合スコア109

sorat

2015/09/10 02:07

ちゃんと表示されました！ずれる方の原因はやっぱり違う部分にあったんですね。そちらに関してはもう一度見直して、それでもわからないようならまた改めて質問しなおすことにします。ありがとうございました。

行動規範の内容に同意します

html
1<ul id="menu">
2<li><a href="<?php bloginfo('url'); ?>" id="home">home</a></li>
3<li><a href="<?php bloginfo('url'); ?>/about" id="about">about</a></li>
4<li><a href="<?php bloginfo('url'); ?>/information" id="information">information</a></li>
5<li><a href="<?php bloginfo('url'); ?>/blog" id="blog">blog</a></li>
6<li><a href="<?php bloginfo('url'); ?>/contact" id="contact">contact</a></li>
7</ul>