Навигация спрайтов не выравнивая

Question

призывающих снова вашей помощи ребятам ..

Не уверен, что здесь происходит, мое навигационное опрокидывание не выравнивая правильно, я проверил мои измерения и от того, что я вижу, это не то. Я выравниваю навигацию по центру страницы с помощью Margin: 0 auto; Мне интересно, если это проблема?

Я создал скрипт http://jsfiddle.net/ca9rv/, чтобы понять, о чем я бессвязно (не знаю, почему theres синяя линия внизу - это не отображается при просмотре моей 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; } 

Answer 1

Измените вашposition value и width

, как как этот

#home { width: 88px; } 
#promise { width: 147px; } 
#restaurants { width: 176px; } 
#contact { width: 128px; } 

#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") -236px -42px no-repeat; } 
#contact a:hover { background:url("http://img33.imageshack.us/img33/7388/navigationq.png") -411px -42px no-repeat; } 

Demo

Answer 2

Во-первых, я думаю, вы делаете это все WR Онг. 1. Прекратите использовать фоновое изображение, потому что вы хотите его масштабировать. 2. Просто взгляните на CSS, у вас есть вся ширина. Добавьте границу ко всем элементам, и вы увидите, что происходит. 3. У вас есть синяя рамка, потому что высота в меню выше фонового изображения.

Answer 3

Jsfiddle

<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>