【问题标题】:Simple HTML nav buttons aren't displaying不显示简单的 HTML 导航按钮
【发布时间】:2015-12-06 00:44:41
【问题描述】:

好的,我的导航按钮过去会显示,但现在不显示了。我没有使用 javascript 或任何“花哨”之类的东西。在 Dreamweaver 和 jsfiddle 中它们显示,但是当我通过 Firefox/Internet Explorer 打开该站点时,我的导航按钮是幽灵。我还通过http://validator.w3.org/验证了网站

JSFiddle 链接: https://jsfiddle.net/3c7yky0z/

以下是示例:

织梦者:

jsfiddle:

火狐: 有什么想法吗?

    nav {
        position: absolute;
        bottom: 0;
        left: 0;
        margin-bottom: 1em;
    }
    nav a {
        padding: .25em 5em;
    }
    nav a:hover {
        font-size: larger;
    }
    header, section, footer, aside {
        padding: .5em
    }
    header {
        padding: 3em;
        height: 330px;
        margin: 0;
        background-color: #a39b90;
        position: relative;
        background-image: url(/images/CrystalCoastBanner.jpg);
        background-repeat: no-repeat;
        background-image: url(../images/CrystalCoastBanner.jpg);
        background-repeat: no-repeat;
    }
    
    <body>
    <header style="text-align:center">
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html"><h1> Crystal Coast Theater.
    </h1></a>
    <nav style="text-align:center">
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/index.html">Home</a>
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/event.html">Events</a>
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/ticket.html">Tickets</a>
    <a href="http://pbernhardt.mydevryportfolio.com/wgd232/contact.html">Contact us</a>
    </nav>
    </header>

【问题讨论】:

  • 添加了我的小提琴链接
  • 跟位置有关。尝试检查 web 工具中的元素并使用 css

标签: html css nav


【解决方案1】:

你的导航元素上有这个:

nav {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 1em;
}

如果你向下滚动,你会找到它,就在那个位置会有它的地方。

Demo sans those styles

关于您的评论,这是我在 Firefox(和 Chrome)中看到的原始小提琴:

【讨论】:

  • 对我来说,它甚至没有在 Firefox 的底部显示它们。
  • 现在这完全让我大吃一惊。它在我的屏幕上显示对我来说完全不同的东西,但我会考虑在我的导航中使用 CSS 中的位置元素。谢谢。
  • 专业提示:良好的布局很少需要显式定位。它通常被用作解决更简单标记结构不存在的问题的拐杖。
  • 这个网站是为学校的在线课程设计的,所以(几乎)所有的代码都来自我的课程说明;因此网站的有趣主题选择。但是,我非常感谢您对此事的支持。如果我有足够的代表,我会 +1 你。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-01-20
  • 2020-08-19
  • 1970-01-01
  • 2017-11-06
  • 1970-01-01
  • 2022-01-15
相关资源
最近更新 更多