Я чувствую себя немного глупо, спрашивая об этом, но почему-то цвет фона моей навигационной панели (ul) не виден (я знаю, что он там есть, потому что он виден, когда мой скрипт JQuery дает ему фиксированную позицию.

Любая помощь приветствуется.

body{
	width: 100%;
	margin: 0 auto;
    background-color: #000000;

}
#HeaderImage{
	width: 100%;
	height: auto;
	display: block;
}
#Nav{
    list-style-type: none;
    margin: 0%;
    padding: 0%;
    width: 100%;
    background-color: #4f4f4f;
    display: block;
}
.Nav{
    display: block;
    color: #c5c5c5;
    text-align: center;
    display: inline;
    width: 10%;
    float: left;
    padding: 1%;
}
.NavEx{
    display: block;
    color: #c5c5c5;
    text-align: center;
    display: inline;
    width: 10%;
    float: right;
    padding: 1%;
}
.Nav:hover,.NavEx:hover{
    background-color: #006500;
    color: #00ff00;
}
.FixedNav {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
}
#Content{
    background-color: #2d5c1e;
    margin-left: 10%;
    margin-right: 10%;
    padding-top: 2%;
    height: 100vh;
}
.HomeContent{
    text-align: center;
}
#HH{
    text-align: center;
    font-size: 24pt;
    margin-top: 10%;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GIP</title>
    <link href="style.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        //Some JQuery here to make the navigation bar stay on top when scrolled beneath it.
        $(document).ready(function () {
            $(window).scroll(function () {
                console.log($(window).scrollTop())
                if ($(window).scrollTop() > $('#HeaderImage').height()) {
                    $('#Nav').addClass('FixedNav');
                }
                if ($(window).scrollTop() < $('#HeaderImage').height()) {
                    $('#Nav').removeClass('FixedNav');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <img ID="HeaderImage" src="images\WebsiteHeader.jpg" alt="headerimage" />
            <ul ID="Nav">
                <a href="Default.aspx"><li class="Nav">Home</li></a>
                <a href="About.aspx"><li class="Nav">About</li></a>
                <a href="Gastenboek.aspx"><li class="Nav">Forum</li></a>
                <a href="Contact.aspx"><li class="Nav">Contact</li></a>
                <a href="Login.aspx"><li class="NavEx">Login</li></a>
                <a href="Default.aspx"><li class="NavEx">Logout</li></a>
		    </ul>
        <div id="Content">
            <h2 id="HH">Hiya.</h2>
            <p class="HomeContent">Nothing interesting here yet.</p>
        </div>
    </form>
</body>
</html>
0
user6875529 12 Янв 2017 в 22:34

3 ответа

Лучший ответ

Это потому, что вы разместили содержимое внутри #Nav. Плавающие элементы не занимают места, поэтому высота #Nav равна 0, поэтому вы не можете видеть цвет фона.

Используйте некоторую форму исправления, чтобы исправить это.

  • Четкое исправление бедного человека: overflow: hidden;, добавьте к элементу с плавающим содержимым (т. Е. #Nav в вашем случае).
  • Micro Clearfix.
//Some JQuery here to make the navigation bar stay on top when scrolled beneath it.
$(document).ready(function() {
  $(window).scroll(function() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > $('#HeaderImage').height()) {
      $('#Nav').addClass('FixedNav');
    }
    if ($(window).scrollTop() < $('#HeaderImage').height()) {
      $('#Nav').removeClass('FixedNav');
    }
  });
});
body {
  width: 100%;
  margin: 0 auto;
  background-color: #000000;
}
#HeaderImage {
  width: 100%;
  height: auto;
  display: block;
}
#Nav {
  list-style-type: none;
  margin: 0%;
  padding: 0%;
  width: 100%;
  background-color: #4f4f4f;
  display: block;
  overflow: hidden;
}
.Nav {
  display: block;
  color: #c5c5c5;
  text-align: center;
  display: inline;
  width: 10%;
  float: left;
  padding: 1%;
}
.NavEx {
  display: block;
  color: #c5c5c5;
  text-align: center;
  display: inline;
  width: 10%;
  float: right;
  padding: 1%;
}
.Nav:hover,
.NavEx:hover {
  background-color: #006500;
  color: #00ff00;
}
.FixedNav {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
#Content {
  background-color: #2d5c1e;
  margin-left: 10%;
  margin-right: 10%;
  padding-top: 2%;
  height: 100vh;
}
.HomeContent {
  text-align: center;
}
#HH {
  text-align: center;
  font-size: 24pt;
  margin-top: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <img ID="HeaderImage" src="images\WebsiteHeader.jpg" alt="headerimage" />
  <ul ID="Nav">
    <li class="Nav"><a href="Default.aspx">Home</a></li>
    <li class="Nav"><a href="About.aspx">About</a></li>
    <li class="Nav"><a href="Gastenboek.aspx">Forum</a></li>
    <li class="Nav"><a href="Contact.aspx">Contact</a></li>
    <li class="NavEx"><a href="Login.aspx">Login</a></li>
    <li class="NavEx"><a href="Default.aspx">Logout</a></li> 
  </ul>
  <div id="Content">
    <h2 id="HH">Hiya.</h2>
    <p class="HomeContent">Nothing interesting here yet.</p>
  </div>
</form>

Примечание. У вас неверная разметка с <li> и <a>, поэтому я исправил ее в своем примере. <a> должен быть внутри <li>.

0
hungerstar 12 Янв 2017 в 19:38

Добавьте высоту к вашему #Nav.

Плюс это правильный синтаксис ul.

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
0
Michael 12 Янв 2017 в 19:40

Несмотря на то, что я советую вам взглянуть на ваше имя класса / id, вы увидите, что цвет фона становится видимым при применении следующего правила CSS:

#Nav a {
    display: inline-block;
}

Причина в том, что по умолчанию тег привязки установлен по умолчанию, что противоречит элементу списка внутри тега привязки, который также отображается встроенным (обратите внимание также, что HTML-разметка неверна. <ul> может содержать только {{X1 }} элементы.

Итак, чтобы сделать вывод, ваш HTML должен выглядеть так:

<ul id="Nav">
    <li class="Nav">
        <a href="#">etc.</a>
    </li>
</ul>
0
Kees van Lierop 12 Янв 2017 в 19:38