css - 想要在初始页面上的背景图像上导航菜单，但它在各种显示器上移动

Question

我很确定这是一个简单的修复方法，而且我的经验太丰富了，无法解决。我正在使用 WP 构建一个站点，但主页只是一个带有垂直导航菜单的背景图像。我现在不知道如何让所有浏览器和窗口的菜单保持在同一个位置。它在我的屏幕上看起来不错，然后我发现导航 Pane 在我丈夫的显示器上位于完全不同的位置。我相信它与位置、显示和边距有关，但是当我阅读这些内容时我变得更加迷茫，我只想有人告诉我代码。

页面在www.sydneyjanebaily.com

至此整个页面的代码如下:

body { 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;

} menu { display: block; }

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

/************* Navigation **********/ nav#access ul, nav#access 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", Georgia, serif; text-decoration: none; /*background-color:

aba000; */ margin: 5px 0 7px 0; position: relative; width: 235px; /font-variant: small-caps;/ }

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:

FF0000; }

nav#access li a:hover span { 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: absolute; right: 100%; top: 0; width: 20px; height: 100%; left: 2px; margin-right: 15px; overflow: visible; } nav#access ul li ul li:nth-child(odd) a { background: none; color: #EEE8AA; font-size: smaller; margin: 3px 20px 5px 20px; min-height: 20px; width: 210px; 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: #ADFF2F; font-size: smaller; left: 15px; padding: 2px 30px 2px 25px; } nav#access ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; width: 30px; }

nav#access ul li ul li:nth-child(even) a { background: none; color:

3B3C1D; font-size: smaller; margin: 3px 20px 5px 20px; min-height: 20px; width: 210px; padding: 2px 0 2px 20px; } nav#access ul li ul

li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even) a:focus { background: none; color: #FF4500; font-size: smaller; left: 15px; padding: 2px 30px 2px 25px; } nav#access ul li ul li:nth-child(even) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; width: 30px; }

nav#access ul li ul li ul li:nth-child(odd) a { background: none; 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 ul li:nth-child(odd) a:hover, nav#access ul li ul li ul li:nth-child(odd) a:focus { background: none; color: #EEE8AA; font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; } nav#access ul li ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }

nav#access ul li ul li ul li:nth-child(even) a { background: none; 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 ul li:nth-child(even) a:hover, nav#access ul li ul li ul li:nth-child(even) a:focus { background: none; color: #7FFFD4; font-size: smaller; left: 25px; padding: 2px 30px 2px 25px; } nav#access ul li ul li ul li:nth-child(even) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; width: 30px; }

nav#access ul li a:hover:active, nav#access ul li ul li a:hover:active, nav#access ul li ul li ul li a:hover:active, nav#access ul li a:focus:active, nav#access ul li ul li a:focus:active, nav#access ul li ul li ul li a:focus:active { color:

00CCFF; left: 1px; top: 1px;}

/* Singular navigation */

nav-single { float: right; position: relative; top: -0.3em; text-align: right; z-index: 1; }

nav-single .nav-previous,

nav-single .nav-next { float: none; width: auto; }

nav-single .nav-next { padding-left: .5em; }

    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 开发者工具检查一个元素时，它仍然为我标记为 block 的内容显示内联元素。

基本上，我可以使用 px 将导航 Pane 放在我想要的位置，但它只在我的屏幕上看起来正确。我想我需要百分比，但这超出了我的范围。请帮忙。

谢谢，悉尼

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%;
}

无论我如何挤压或拉伸(stretch)屏幕，它在我的显示器上运行良好，它应该也适用于您。祝你好运!