试图修复标题导航栏答案

【问题标题】：Trying to fix header-navigation bar试图修复标题导航栏
【发布时间】：2014-01-22 16:44:19
【问题描述】：

嘿，我正试图让我的标题导航菜单堆叠在我的页面顶部......但是当我修复它时，它不会出现。而不是导航栏，只有点点......没有标题，没有导航栏......没有任何东西只有背景...... 这是我的代码 HTML：

</head>
<body>
<div id="header">
<li><a href="index.html" class="Logo"></a></li>
<li><a href="index.html"class="Home"></a></li>
<li><a href="Sugestology.html"class="Sugestology"></a></li>
<li><a href="TheCreator.html"class="Creator"></a></li>
<li><a href="InBulgaria.html"class="InBulgaria"></a></li>
<li><a href="Contacts.html"class="Contacts"></a></li>
</div>

CSS：

#header {
position: fixed;
top: 0;
z-index: 500;
height: 80 px;
width:100%;
}

#header li {float:left; }
#header li a.Logo {width:20%; height:80px; background:url("nav_01.jpg")}
#header li a.Home {width:20%; height:80px; background:url("nav_02.jpg")}
#header li a.Sugestology {width:20%; height:80px; background:url("nav_03.jpg")}
#header li a.Creator {width:20%; height:80px; background:url("nav_04.jpg")}
#header li a.InBulgaria {width:20%; height:80px; background:url("nav_05.jpg")}
#header li a.Contacts {width:20%; height:80px; background:url("nav_06.jpg")}

再一次，我希望这个导航是 100% 宽度，左侧是徽标 nav_01.jpg，它也将导致索引....右侧是导航栏，所有这些都堆叠在顶部时向下滚动....但是这段代码并没有出现只有六个句号....

【问题讨论】：

你把图片放在哪个文件夹里？可能css中的背景网址不对
不，它们与 HTML 文件和 CSS 文件在同一个文件夹中
请将完整代码发布到 JSFiddle。这段代码有一些问题，例如缺少 UL 标签，而我看到的最有问题的是，LI 的宽度为 20% x 6 = 120%。
您的 HTML 格式错误。您需要将 li 包装在 ul 中并包含浮动（如果您还没有这样做的话）。
那么有人可以告诉我我应该做什么吗？

标签： html css menu navbar sticky

【解决方案1】：

这是正确的代码：

http://jsfiddle.net/4BJLb/2/

CSS

#header {
    position: fixed;
    top: 0;
    height: 80 px;
    width:100%;
    z-index: 500;
}
#header ul {
    padding-left: 0;
    height: 80px;
}
#header li {
    list-style: none;
    float: left;
    height: 80px;
    width: 16.6%;
}
#header li a {
    display: inline-block;
    width: 100%;
    height: 80px;
    background-size: cover; // >IE9
}

#header li a:nth-child(1) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(2) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(3) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(4) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(5) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}
#header li a:nth-child(6) {background: url(http://placeimg.com/200/80/tech) no-repeat 0 0}

HTML

<div id="header">
    <ul>
        <li><a href="index.html"></a></li>
        <li><a href="index.html"></a></li>
        <li><a href="Sugestology.html"></a></li>
        <li><a href="TheCreator.html"></a></li>
        <li><a href="InBulgaria.html"></a></li>
        <li><a href="Contacts.html"></a></li>
    </ul>
</div>

【讨论】：

你在 #header li a 中复制了 height
它没有出现，但是当你点击它时它就在那里，它将你重定向到一个页面，页面位置在正确的位置，但没有出现背景
听起来您的背景图片路径不正确。尝试使用我上面使用的临时图像进行测试。如果有效，则需要更正图像路径。
您是否尝试过创建图像的绝对路径？如果您使用相对路径（即 image.jpg），然后实际页面从 index.html 变为 dir/another-page.html，则图像路径现在将变为 dir/image.jpg。

【解决方案2】：

在你的 div 中添加一些文本

另外，你需要使 li list-style: none; 摆脱小点

这是css：

#header {
position: fixed;
top: 0;
z-index: 500;
height: 80 px;
width:100%;
    display: inline-block;
    float: left;
}


#header li {float:left; width:15%; height:80px; list-style: none;}
#header li a.Logo {background:url("nav_01.jpg")}
#header li a.Home {background:url("nav_02.jpg")}
#header li a.Sugestology {background:url("nav_03.jpg")}
#header li a.Creator {background:url("nav_04.jpg")}
#header li a.InBulgaria {background:url("nav_05.jpg")}
#header li a.Contacts {background:url("nav_06.jpg")}

注意：您需要将 15% 更改为适合 100% 的宽度（# of divs x div's width

这里是 html

<div id="header">
<li><a href="index.html" class="Logo">1</a></li>
<li><a href="index.html"class="Home">2</a></li>
<li><a href="Sugestology.html"class="Sugestology">3</a></li>
<li><a href="TheCreator.html"class="Creator">4</a></li>
<li><a href="InBulgaria.html"class="InBulgaria">5</a></li>
<li><a href="Contacts.html"class="Contacts">6</a></li>
</div>

在行动中看到它

fiddle

【讨论】：

这样会出现数字和背景的一小部分，但只有这样没有完整的菜单栏