想要导航菜单的背景图像在闪页，但它在不同的监视器周围移动

Question

我很确定这是一个简单的解决办法，我只是太有经验了，弄不明白。我正在建立一个网站，使用WP，但主页只是一个背景图像与垂直导航菜单。我现在不知道如何使菜单停留在相同的地方，所有的浏览器和窗口。它在我的屏幕上看起来很好，然后我发现导航窗格在我丈夫的显示器上完全不同的地方。我相信它与位置，显示和边距有关，但我越来越迷路，因为我读了这些，我只是想有人告诉我的代码。

该网页见www.sydneyjanebaily.com

到目前为止整个页面的代码如下：

正文{background-image：URL（http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png）；background-repeat：no-repeat；background-attachment：fixed；background-position：center；

}菜单{display：块；}

/*************导航***********/nav#访问ul,nav#访问li.pageNav{display：block；list-style：none；}

nav#access ul li a span,nav#access ul li.page_item a span{position：absolute；right：100%；top:2px；width：15px；height：100%；background-image：url（../images/nav-shadow.png）；background-position：right top；background-repeat：repeat-y；}

nav#access ul li a,nav#access ul li a：visited,nav#access ul li.page_item a,nav#access ul li.page_item a：visited{display：block；padding：8px 10px 8px 30px；color：white；font：150%“ebgaramondsc”,“palatino”,“palatino linotype”,“book antiqua”,乔治亚州,衬线；text-装饰：无；/*background-color：

nav#access ul li a：hover,nav#access ul li a：focus,nav#access ul li.page_item a：hover,nav#access ul li.page_item a：focus{color：

NAV#Access li A：悬停范围{background-color：#666；}NAV#Access ul li a em{FONT-SIZE：87.50%；}NAV#Access ul LI:Nth-Child(5n-4)a,NAV#Access ul LI:Nth-Child(5n-4)a span{；}NAV#Access ul LI:Nth-Child(5n-3)a,NAV#Access ul LI:Nth-Child(5n-3)a span{；}NAV#Access ul LI:Nth-Child(5n-2)a,NAV#Access ul LI:Nth-Child(5n-2)a span{；}NAV#Access ul LI:Nth-Child(5n-1)a,NAV#Access ul LI:Nth-Child(5n-1)a span{；}NAV#Access ul LI:Nth-Child(5n-5)a,NAV#Access ul LI:Nth-Child(5n-5)a span{；}-->

NAV#access ul li ul li span{position：绝对；右：100%；顶部：0；宽度:20px；身高：100%；左:2px；右距:15px；溢出：可见；}nav#access ul li ul li：第n个子（奇数）a{background：none；颜色:#EEE8AA；字体大小：较小；边距:3px20px5px20px；最小高度:20px；宽度:210px；衬垫：2px 0 2px 20px；}NAV#Access ul li ul li：Nth Child（odd）A：Hover,NAV#Access ul li ul li：Nth Child（odd）A：Focus{background：无；颜色:#ADFF2F；字体大小：较小；左:15px；衬垫:2px30px2px25px；}nav#access ul li ul li：nth-child（odd）a span{background:url(../images/sub-menu2.png)-5px 0px no-repeat；宽度:30px；}

NAV#访问ul li ul li：n个子（偶数）a{background：none；color：

li：第n个子（偶数）a：悬停,nav#Access ul li ul li：第n个子（偶数）a：Focus{background：none；color:#ff4500；font-size：small；left:15px；padding:2px 30px 2px 25px；}nav#Access ul li ul li：第n个子（偶数）a span{background:url(../images/sub-menu2.png)-5px 0px no-repeat；width：30px；}

nav#access ul li ul li：nth-child（odd）a{background：无；color:#ffd700；font-size：smaller；margin:3px 20px 5px 30px；min-height:20px；width：200px；padding:2px 0 2px 20px；}nav#access ul li ul li：nth-child（odd）a：hover,nav#access ul li ul li：nth-child（odd）a：focus{background：none；color:#eee8aa；

nav#access ul li ul li：n个子（偶数）a{background：无；color:#3b3c1d；font-size：smaller；margin:3px 20px 5px 30px；min-height:20px；width：200px；padding:2px 0 2px 20px；}nav#access ul li ul li：n个子（偶数）a：hover,nav#access ul li ul li：n个子（偶数）a：focus{background：none；color:#7fffd4；font-size：smaller

A:hover:active，nav#access ul li ul li A:hover:active，nav#access ul li ul li A:hover:active，nav#access ul li A:focus:active，nav#access ul li ul li A:focus:access，nav#access ul li ul li A:focus:access，nav#access ul li ul li A:focus:access，nav#access ul li ul li{color：

/*单数导航*/

    img.book {  
        /* Set rules to fill background */  
        min-height: 100%;  
        min-width: 1000px;  

        /* Set up proportionate scaling */  

        height: auto;  

        /* Set up positioning */  

        top: 0;  
        left: 0;  

      display: block;   
      margin-left: auto;  
      margin-right: auto; 
      text-align: center;
    } 

    </style>  

  <!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"

width=“880”height=“xxx”/>-->

          <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
          <!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',

'twentyeleven')；？>“>”>-->'primary'))；？>

当我使用Firefox developer工具检查一个元素时，对于我标记为block的东西，它仍然显示为inline element。

基本上，我可以把导航窗格在我想使用px的地方，但它只在我的屏幕上看起来正确。我想我需要百分比，但那不是我能做到的。请帮帮忙。

谢谢，西德妮

Answer 1

请尝试替换此：

#access div {
    display: block;
    margin-left:890px;
    margin-right:auto;
    margin-top:200px;
    width: 235px;  
    }

有了这个：

#access div {
   position: absolute;
   top: 20%;
   left: 50%;
}

无论我如何压扁或拉伸屏幕，它在我的显示器上都能很好地工作，它也应该适用于你。祝你好运！