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

Posted 2023-05-08

【中文标题】想要导航菜单在初始页面上的背景图像上，但它在各种显示器上移动

【英文标题】：Want nav menu over background image on splash page but it moves around on various monitors

【发布时间】：2012-05-29 06:48:42

【问题描述】：

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

页面在www.sydneyjanebaily.com

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

身体 背景图片：网址（http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png）； 背景重复：不重复；背景附件：固定； 背景位置：中心；

菜单显示：块；

访问 div 显示：块；左边距：890px；边距右：自动；边距顶部：200px；宽度：235px；

/************ * 导航 **********/ nav#access ul，nav#access li.pagenav 显示：块；列表样式： 没有;

nav#access ul li 一个 span，nav#access ul li.page_item 一个 span position: 绝对;正确：100%；顶部：2px；宽度：15px；高度：100%； 背景图像：url（../images/nav-shadow.png）；背景位置： 右上角；背景重复：重复-y；

nav#access ul li a, nav#access ul li a:已访问, nav#access ul li.page_item a, nav#access ul li.page_item a:visited display: 堵塞;填充：8px 10px 8px 30px；白颜色;字体：150% “EBGaramondSC”、“Palatino”、“Palatino Linotype”、“Book Antiqua”、 格鲁吉亚，衬线；文字装饰：无； /*背景颜色：

aba000; */ 边距：5px 0 7px 0;位置：相对；宽度：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; 导航#访问 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 ; 导航#访问 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 跨度 ; nav#access ul li:nth-child(5n-1) a, nav#access ul li:nth-child(5n-1) 一个跨度 ; nav#access ul li:nth-child(5n-5) a, nav#access ul li:nth-child(5n-5) 一个 span ; -->

nav#access ul li ul li span 位置：绝对；正确：100%；顶部：0； 宽度：20px；高度：100%；左：2px；右边距：15px；溢出： 可见的; nav#access ul li ul li:nth-child(odd) a 背景： 没有;颜色：#EEE8AA；字体大小：较小；边距：3px 20px 5px 20px； 最小高度：20px；宽度：210px；填充：2px 0 2px 20px； 导航#访问 ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li:nth-child(odd) a:focus 背景：无；颜色：#ADFF2F； 字体大小：较小；左：15px；填充：2px 30px 2px 25px； nav#access ul li ul li:nth-child(odd) a span 背景： url(../images/sub-menu2.png) -5px 0px 不重复；宽度：30px；

nav#access ul li ul li:nth-child(even) a 背景：无；颜色：

3B3C1D;字体大小：较小；边距：3px 20px 5px 20px；最小高度：20px；宽度：210px；填充：2px 0 2px 20px； nav#access ul li ul

li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even) 一：焦点背景：无；颜色：#FF4500；字体大小：较小；剩下： 15像素；填充：2px 30px 2px 25px； nav#access ul li ul li:nth-child(even) a span 背景: url(../images/sub-menu2.png) -5px 0px 不重复；宽度：30px；

nav#access ul li ul li ul li:nth-child(odd) a 背景：无； 颜色：#FFD700；字体大小：较小；边距：3px 20px 5px 30px； 最小高度：20px；宽度：200px；填充：2px 0 2px 20px； 导航#访问 ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul li:nth-child(odd) a:focus 背景：无；颜色：#EEE8AA； 字体大小：较小；左：25px；填充：2px 30px 2px 25px； nav#access ul li ul li ul li:nth-child(odd) a span 背景： url(../images/sub-menu.png) -10px 0px 不重复；宽度：30px；

nav#access ul li ul li ul li:nth-child(even) a 背景：无； 颜色：#3B3C1D；字体大小：较小；边距：3px 20px 5px 30px； 最小高度：20px；宽度：200px；填充：2px 0 2px 20px； 导航#访问 ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul li:nth-child(even) a:focus 背景：无；颜色：#7FFFD4； 字体大小：较小；左：25px；填充：2px 30px 2px 25px； nav#access ul li ul li ul li:nth-child(even) a span 背景： url(../images/sub-menu.png) -10px 0px 不重复；宽度：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 颜色:

00CCFF;左：1px；顶部：1px;

/* 单数导航 */

导航单浮动：对；位置：相对；顶部：-0.3em；文本对齐：右； z-index：1；

nav-single .nav-previous,

nav-single .nav-next 浮动：无；宽度：自动；

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" 

/> -->

          <?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',

'二十一点'); ?>"> "> --> '基本的' ） ）; ?>

我很困惑，当我使用 Firefox 开发人员工具检查一个元素时，它仍然会为我标记为块的内容显示内联元素。

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

谢谢， 悉尼

【参考方案1】：

尝试替换这个：

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

用这个：

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

无论我如何挤压或拉伸屏幕，它都可以在我的显示器上正常工作，它也应该适用于您。祝你好运！

【讨论】：

嗨，瑞安，谢谢。真的！终于解脱了。如果你不介意，再问一个问题。它在 Firefox、Chrome 和 Safari 上运行良好，但在 IE 上（至少我丈夫的电脑上的旧版本虽然从未使用过），导航没有样式，只是屏幕左上角带有项目符号的单词，好像没有 css影响了它。对 IE 用户有什么建议吗？

另外，如果我不想再搞砸了，有没有办法让它变得更小？我的意思是我有一个大屏幕，比如 24 英寸，但我家的所有其他显示器都更小，17 和更小，我看到这本书的图像看起来真的很平滑，书签顶部有点切掉了底部。所以我认为对大多数人来说，稍微小一点就可以了。有没有办法让它调整或者我应该告诉它缩小图像？非常感谢。悉尼

如果您的丈夫使用的是 IE 6 或更早版本，不幸的是，无法保证 CSS 可以在其中工作。但是，关于您关于背景图像的问题，解决此问题的最直接方法是调整图像大小。否则，您可以将其制成自己的 div 并动态调整其大小，但这可能比您值得做的工作更多。

我查了一下，它是 IE8，但我们从不使用它。仍然我想很多人都会这样做。所以我想我需要弄清楚如何让我的简单导航出现在 IE 中。至于另一个问题，我的书在你的屏幕上对你来说是不是太大了？再次感谢。

不，这本书在我的显示器 (1440x900) 上看起来不错。无样式菜单也出现在 IE 9 中（我刚刚检查过）。样式表很复杂，我看到很多 -webkit 样式，在 IE 中根本行不通。留意那些（并用更通用的样式替换它们），稍微清理一下你的样式（如果你花一点时间，它可以完成）并保持良好的工作:)