再次打电话给你帮助..
不确定这里发生了什么,我的导航翻转没有正确对齐,我已经检查了我的测量值,而且从我看到的不是那个。我正在使用Margin:0 auto将导航与页面中心对齐;我想知道这是不是问题?
我已经创建了一个小提琴http://jsfiddle.net/ca9rv/来理解我正在散布的内容(不确定为什么底部有一条蓝线 - 这在本地查看我的html页面时没有显示)。< / p>
<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; }
答案 0 :(得分:2)
更改 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 强>
答案 1 :(得分:0)
首先,我认为你做错了。 1.停止使用背景图像,因为您希望它可以缩放。 2.快速浏览一下你所有宽度错误的CSS。为所有元素添加边框,您将会发生什么。 3.那里有蓝色边框,因为菜单上的高度高于背景图像。
答案 2 :(得分: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>