CSSナビゲーションメニューが正しく配置されていません

私のCSSナビゲーションメニューに奇妙な問題があります。コードはここにあります：CSSナビゲーションメニューが正しく配置されていません

<style> 
.navigation { width: 1010px; } 
.navigation li { float: left; display: inline;} 

.navigation li a { display: block; height: 60px; text-indent: -9999px; background:  #EFE8C9 url(../images/bg/primary_navigation.gif) no-repeat 0 0;} 
#link1 { width: 96px; background-position: 0 0; } 
#link1:hover { background-position: 0 -60px; } 
#link2 { width: 166px; background-position: -96px 0; } 
#link2:hover { background-position: -96px -60px; } 
#link3{ width: 138px; background-position: -262px 0; } 
#link3:hover { background-position: -262px -60px; } 
#link4 { width: 166px; background-position: -400px 0; } 
#link4:hover { background-position: -400px -60px; } 
#link5{ width: 134px; background-position: -566px 0; } 
#link5:hover { background-position: -566px -60px; } 
#link6 { width: 76px; background-position: -700px 0; } 
#link6:hover { background-position: -700px -60px; } 
#link7 { width: 108px; background-position: -776px 0; } 
#link7:hover { background-position: -776px -60px; } 
#link8 { width: 126px; background-position: -884px 0; } 
#link8:hover { background-position: -884px -60px; } 
</style> 
<html> 
<div id="primary_navigation"> 
<ul class="navigation"> 
    <li><a href="#" id="link1">Link 1</a></li> 
    <li><a href="#" id="link2">Link 2</a></li> 
    <li><a href="#" id="link3">Link 3</a></li> 
    <li><a href="#" id="link4">Link 4</a></li> 
    <li><a href="#" id="link5">Link 5</a></li> 
    <li><a href="#" id="link6">Link 6</a></li> 
    <li><a href="#" id="link7">Link 7</a></li> 
    <li><a href="#" id="link8">Link 8</a></li> 
</ul> 
</div> 
</html>

メニューの位置は約40ピクセルずれていますが、私はその理由を理解できません。私はこれらのメニューをたくさん作りましたが、この問題は一度もありませんでした！

私はうまく動作し、このメニューに適応するいくつかのバージョンを使用しようとしましたが、同じ問題が発生すると直ちにテストします。

私は同様の問題についてフォーラムを検索しようとしましたが、成功しませんでした。

ご協力いただきまして誠にありがとうございます。

お時間をいただきありがとうございます。

出典

2011-06-20 Victor J

はhttp://validator.w3.org/check?uri=http%3A%（[検証]あなたを持っています2F％2Fwww.finalsalvo.com％2Ftest_site％2F＆charset =％28detect +自動的に％29＆doctype =インライン＆グループ= 0）ページ？レガシーの場合は – Sparky

、関連するコードもここに掲載してください。あなたのウェブサイトよりも長生きしますので、将来のユーザーはこの質問から何かを学ぶことができます。 –

がnavigationクラスのパディングにをリセットする追加：

ul.navigation { 
    padding: 0; 
    ..... rest of the css 
}

出典

2011-06-20 17:46:06

ありがとう！ –

@ Victor J：あなたが間違った 'width'値を入れたからです。 '＃donate 'の' width'は '116px'ではなく' 126px'でなければなりません。 – thirtydot

@thirtydot：正解ですが、上記のコードを追加している間に気付き、修正しました。あなたの時間のために非常にありがとう、私はこのフォーラムに本当に感謝します！ –

<ul>をリセットする必要があります。

#navigation { padding:0; }

出典

2011-06-20 17:46:02 Seth

CSSナビゲーションメニューが正しく配置されていません

答えて

関連する問題