“Nag-Menu”设计（css？）的居中问题

Question

我有一个 css 问题（我相信是，可能是 JavaScript？），我试图适应我们的网站设计，以改进现有的静态菜单（通常在 UL/LI 元素上使用 CSS 制作。）

原始代码来自：1stwebdesigner.com 中的“教程”页面，名为 /tutorials/create-stay-on-top-menu-css3-jquery /

我只在一个测试页面上将它改编为我们的网站（到目前为止）。

我们的旧式菜单可以在任何当前页面上看到，新版本的留在顶部的导航菜单页面在这里：

http://www.detroitblackjackteam.com/team-play.htm

有一个使用旧菜单的相同页面：

http://www.detroitblackjackteam.com/teamplay.htm

（注意类似的网址：只需去掉文件名中的连字符，teamplay.htm）

到目前为止，一切正常，除了我注意到新版本的菜单在放大或小屏幕的浏览器中没有正确居中（首先注意到在我的 iPhone 上检查网站时出现问题，但如果您使浏览器窗口非常小并在菜单上放大...请参阅此处的屏幕截图示例：

http://www.detroitblackjackteam.com/files/ZoomProblem.jpg

---

我一直在研究这一切，尽我所能，用浏览器中的 FireBug 戳和戳它，但我一辈子都看不到如何让两个菜单保持在同一个位置的中心。

这可能很简单，但我只是想念它:-(

任何帮助/想法表示赞赏。此外，任何清理代码的想法都会受到赞赏，因为我知道我是从不同的来源拼凑起来的，在目前的状态下，它可能不是世界上最有效的东西...... ;-)

复制下面的 CSS、HTML 和 JavaScript 代码块以供参考：

CSS

.bevelmenu { font: bold 13px Arial;   text-align: center;     
    padding: 9px 0 5px;   margin: 0;   width: 100%;      } 
.bevelmenu li {   list-style: none;   display: inline;   } 
.bevelmenu li a { padding: 9px 7px;   text-decoration: none;   color: #aaaaaa; } 
.bevelmenu li a:hover { color: #93D48C; 
    background-image: url("menubg.gif"); 
    background-repeat: no-repeat;   background-position: center center;        } 
/*  CSS for stay-on-top menu  */ 
    #menu    { 
      white-space:nowrap; 
      height: 30px; 
      text-align: center; 
      background-image:url("menu-bar.png"); 
      background-repeat:repeat; 
      background-attachment:scroll;           } 
    #navi    { 
      white-space:nowrap; 
      height: 30px; 
      text-align: center;                     } 
    .default { 
      width: 100%;                            } 
    .fixed   { 
      width: 100%;   
      top: 0; 
      left: 0;  
      position: fixed;  
      z-index: 4; 
      box-shadow: 0 0 36px #afffff;  
      -webkit-box-shadow: 0 0 36px #afffff;  
      -moz-box-shadow: 0 0 36px #afffff;      } 

HTML

<div id="navi"> 
 <div id="menu" class="default"> 
  <ul class="bevelmenu">
   <li><a href="http://www.detroitblackjackteam.com/">Home</a></li>
   <li><a href="http://www.detroitblackjackteam.com/bbs/">Forum</a></li>
   <li><a href="http://www.detroitblackjackteam.com/webmail.htm">Mail</a></li>
   <li><a href="http://www.detroitblackjackteam.com/cal.htm">Calendar</a></li>
   <li><a href="http://www.detroitblackjackteam.com/ratings/">Ratings</a></li>
   <li><a href="http://www.detroitblackjackteam.com/files/">Downloads</a></li>
   <li><a href="http://www.detroitblackjackteam.com/blog/">Blog</a></li>
   <li><a href="http://www.detroitblackjackteam.com/play/">Play!</a></li>
  </ul>
 </div><!-- close menu -->
</div><!-- close navi -->

JavaScript

<script type="text/javascript">
$(function(){
 var menu = $('#menu'),
  pos = menu.offset();
  $(window).scroll(function(){
   if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
     menu.fadeOut('fast', function(){
      $(this).removeClass('default').addClass('fixed').fadeIn('fast');
     });
   } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
     menu.fadeOut('fast', function(){
      $(this).removeClass('fixed').addClass('default').fadeIn('fast');
     });
   }
  });
});
</script>

在此先感谢您提供任何和所有的帮助/建议 :-)

-DBJT

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - =

编辑、更新

我收到了此代码的原始开发人员的评论，他还没有时间真正为我查看它，但仍然回答了电子邮件询问。他说：

<!-- language: lang-none --> <!-- Copy From E-Mail Message -->
>>> That would suggest there's a problem with the offset 
>>> (menu is longer than the viewport when zoomed in, and the 
>>> script is not able to make a negative offset, to the menu 
>>> starts at 0 position in the viewport). Either that or it's 
>>> jQuery's fault. Well, not exactly fault, it's just that 
>>> there can be some compatibility issues; the script was 
>>> written over 3 years ago and uses an old version of jQuery 
>>> (newest at the time of writing), but browsers evolved 
>>> since then a lot. Some methods jQuery makes use of may 
>>> not be working correctly anymore... 

所以也许它比我想象的更复杂，JQuery 中的一些东西......或者......一些东西......

这里还没有回答我的问题吗？

真的很感谢任何人对此的想法或提醒，任何如何缩小范围的想法，问题可能出在哪里......甚至只是猜测。

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - =

** 编辑，再次更新；) **

忘了说这也是在使用 JQuery...我猜有点重要，哈哈

我在问题中添加了一个“jquery”标签，并注意到它达到了 1.4.2 版本：

<script type="text/javascript"   
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 
charset="utf-8">
</script>

再次感谢任何能弄清楚这里发生了什么的人:)

-DBJT

Answer 1

设置 CSS

.fixed{最小宽度：542px;}

使其在两种情况下都相似。