html - Sprite css 菜单 - 无法在菜单上对齐 div 中的大 Logo

Question

我已经为这个问题苦恼好几天了。我有一个 sprite 菜单，它可以与我的所有悬停事件一起按预期工作，但是我想将完整的 Logo 放在我的“中心”元素的顶部。当我在 Dreamweaver 中时，它按预期显示，但是当我使用 Safari 或 Chrome 时，“ Logo ”元素中的 Logo 放错了位置。如有任何帮助，我们将不胜感激。

这是 HTML。

<div id="logo">
<h1 class="logo">
<a href="#" title="Test">Logo</a>
</h1>
</div>
<ul>
 <li><a class="home" href="#">Home</a></li>
 <li><a class="products" href="#">Products</a></li>
 <li><a class="philosophy" href="#">Philosophy</a></li>
 <li><a class="center" href="#">Center</a></li>
 <li><a class="news" href="#">News</a></li>
 <li><a class="myaccount" href="#">My Account</a></li>
 <li><a class="customercare" href="#">Contact Us</a></li>
</ul>​

这是菜单元素之一的 CSS 以及中心图像的 CSS。

ul {
width: 1000px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
list-style-type: none; 
}

ul li {
float: left;    
}

ul li a {
height: 50px;
display: block;
text-indent: -9999px;
}

/*home*/
ul li a.home {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 100px;
}

ul li a.home:hover {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px -50px;
}
/*Main Logo*/
#logo {
position: absolute;
width: 100%;
}

#logo h1 {
/* [disabled]height: 100px; */
/* [disabled]width: 201px; */
margin: -100px 282px;
/* [disabled]padding: 0; */
}

#logo h1 a {
color: transparent;
background: transparent url('CenterLogo.png') no-repeat;
width: 370px;
height: 201px;
top: 10px;
left: 30px;
margin: 0 0;
z-index: 200;
}

/***** Header Logo *****/
h1.logo a {
background: url('CenterLogo.png') no-repeat center right /* Company Logo */;
display: block;
height: 35px /* Sets overall height of header */;
margin: 0px 0 0 -2000px ;
outline: none /* Removes Link Outline */;
position: relative;
text-decoration: none;
top: 0px;
width: 2195px;
}​

编辑 1 ------ Per Tim 我做了以下更改

ul {
    width: 1000px;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    display: block;
}
ul li {
    float: left;
    display: block;
}

我还更改了 Logo 间距并将其切换为 relative 以查看是否可以将其放在正确的位置。

/*Main Logo*/
#logo {
    position: relative;
    width: 100%;
}
#logo h1 {
    /* [disabled]height: 100px; */
    /* [disabled]width: 201px; */
    margin: -100px 282px;
    /* [disabled]padding: 0; */
}

我现在可以让它显示在正确的位置，但是当我缩放窗口时，菜单会从 Logo 移开。

编辑 2 ------ Per Kraz 我做了以下更改。菜单现在按预期运行。

ul {
    width: 1000px;
    margin-top: 100px;
    /*margin-right: auto;*/
    /*margin-left: auto;*/
    list-style-type: none;
    display: block;
}

Answer 1

however when I scale my window the menu moves apart from the logo.

您的 Logo 是一个相对定位的 block 元素。您的菜单也是一个相对定位的 block 元素。

您的 Logo 只是出现在它必须出现的地方。 (左上角)

但是，您的菜单作为特定宽度 (1000px) 及其左右边距设置为 auto。因此它根据其容器宽度居中。由于它可能是正文，因此增加页面宽度会将菜单向右移动。