2017-01-12 14 views
0

私はこれを頼んで少し愚かだと思うが、どういうわけか私のナビゲーションバー(ul)の背景色は見えない(私のJQueryスクリプトが固定位置。css background-color要素の目に見えない

すべてのヘルプは高く評価される。

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

 
} 
 
#HeaderImage{ 
 
\t width: 100%; 
 
\t height: auto; 
 
\t 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> 
 
\t \t  </ul> 
 
     <div id="Content"> 
 
      <h2 id="HH">Hiya.</h2> 
 
      <p class="HomeContent">Nothing interesting here yet.</p> 
 
     </div> 
 
    </form> 
 
</body> 
 
</html>

答えて

0

あなたが#Navの内側に内容を浮かべているためだ。浮かべ要素は任意のスペースを取りません、したがって#Navの高さは0なので、背景色は見えません。

これを修正するために、いくつかの形式のclearfixを使用してください。

  • 貧乏人のclearfix:overflow: hidden;、FLOATEDコンテンツ(あなたのケースでは、すなわち#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>の内部にある必要があります。

#Nav a { 
    display: inline-block; 
} 

理由は、デフォルトのアンカーであることである:以下のCSSルールを適用する際に

+0

ありがとう、これが私の問題を解決しました。あなたは何が間違っていたか把握するのにどれくらいの時間を費やしたのか信じられません。すぐにマークアップも修正しました。できればこれをアップボートしますか? – user6875529

0

私はあなたのクラス名/ IDの命名を見てみることをおアドバイスが、あなたは背景色が表示されますが目に見えるようになりますタグは、HTMLマークアップが正しくないことも(ノートをインラインで表示されているアンカータグ内のリスト要素と競合、デフォルトで設定されている。<ul>のみ<li>の要素を含めることができます。

ので、より多くなっているはずです、あなたのHTMLを締結しますlike:

<ul id="Nav"> 
    <li class="Nav"> 
     <a href="#">etc.</a> 
    </li> 
</ul> 
0

#Navに高さを加えます。

これは、ulの正しい構文です。

<ul> 
<li><a href="#">Link</a></li> 
<li><a href="#">Link</a></li> 
</ul> 
+0

これは動作しますが、少し柔軟です。 – hungerstar

関連する問題