0

再びあなたの助けを求めて..

ここで何が起こっているのかわかりません。ナビゲーションのロールオーバーが正しく整列していません。測定値を確認しましたが、そうではありません。Margin:0 auto; を使用して、ナビゲーションをページの中央に揃えています。これが問題なのだろうか？

Fiddle http://jsfiddle.net/ca9rv/を作成して、とりとめのないものを理解しました（下部に青い線がある理由がわかりません-htmlページをローカルで表示すると表示されません） .

<ul id="navigation">
    <li id="home"><a href="index.html">Home</a></li>
    <li id="promise"><a href="Our Promise">Our Promise</a></li>
    <li id="restaurants"><a href="Our Restaurants">Resume</a></li>
    <li id="contact"><a href="#">Contact</a></li>
</ul>

#navigation {
    background:url(http://img33.imageshack.us/img33/7388/navigationq.png) no-repeat;
    width: 940px;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    margin-bottom:20px;
}

#navigation li, #navigation a {
    height: 50px;
    display: block;
}

#navigation li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#home { width: 103px; }
#promise { width: 176px; }
#restaurants { width: 206px; }
#contact { width: 151px; }

#home a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") 0px -50px no-repeat; }
#promise a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -103px -50px no-repeat; }
#restaurants a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -277px -50px no-repeat; }
#contact a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -482px -50px no-repeat; }
4

3 に答える 3

0

ジャスフィドル

<style>

#navigation {
    background:url(http://img33.imageshack.us/img33/7388/navigationq.png) no-repeat;
    width: 940px;
    height: 42px;
    margin: 0 auto;
    padding: 0;
    margin-bottom:20px;
}

#navigation li, #navigation a {
    height: 50px;
    display: block;
}

#navigation li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#home { width: 87px; }
#promise { width: 149px; }
#restaurants { width: 175px; }
#contact { width: 130px; }

#home a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") 0px -42px no-repeat; }
#promise a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -91px -42px no-repeat; }
#restaurants a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -82px -42px no-repeat; }
#contact a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -409px -42px no-repeat; }
</style>
<ul id="navigation">
    <li id="home"><a href="index.html">Home</a></li>
    <li id="promise"><a href="Our Promise">Our Promise</a></li>
    <li id="restaurants"><a href="Our Restaurants">Resume</a></li>
    <li id="contact"><a href="#">Contact</a></li>
</ul>
于 2013-05-02T09:51:32.970 に答える
0

まず、あなたはそれをすべて間違っていると思います。1. 拡大縮小したいので、背景画像の使用をやめます。2. CSS をざっと見てみると、すべての幅が間違っています。すべての要素に境界線を追加すると、何が起こっているかがわかります。3. メニューの高さが背景画像よりも高いため、青い境界線が表示されます。

于 2013-05-02T09:39:08.283 に答える