Navbarが応答しない

Webページにnavbarがあります。私のWebページにも情報があります。情報（段落と見出し）を削除すると、navbarは完全に機能します。しかし、私が情報を戻すと、navbarはまったく動作しません。なぜウェブサイトはこれをしますか？ありがとう。Navbarが応答しない

JSFiddle - の情報と

JSFIDDLE - 情報なし

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
    <title>CSGOMarble</title> 
</head> 
<body> 
<h3 style="float: right; margin-right: 25px;"><a href="http://www.steamcommunity.com/login/">SIGN IN WITH STEAM</a></h3> 

<div class="logo"> 
    <img src="logo.png" alt="LOGO" height="60px" width="200px"> 
</div> 

<hr> 

<div class="navbar"> 
    <ul> 
     <li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li> 
     <li><a href="coinflip.html">COINFLIP</a></li> 
     <li><a href="about.html">ABOUT</a></li> 
     <li><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 
<div class="container"> 
    <h2>CSGOMarble</h2> 
    <u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u> 
    <p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p> 
</div> 
</body> 
</html>

CSS：

body { 
font-family: Arial, Verdana, sans-serif; 
background-color: white; 
} 
.logo { 
margin-left: 25px; 
} 
.navbar { 
margin-top: 50px; 
margin-left: 25px; 
padding: 0; 
font-size: 15px; 
float: left; 
display: inline-block; 
} 
.container { 
    width: 100%; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    position: fixed; 
    text-align: center; 
} 
a { 
text-decoration: none; 
color: black; 
} 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 175px; 
    background-color: #f1f1f1; 
    border: 2px solid #555; 
} 

li a { 
    display: block; 
    color: #000; 
    padding: 12px 0 12px 0; 
    text-decoration: none; 
} 
li a:hover { 
    background-color: #555; 
    color: white; 
} 
li { 
    text-align: center; 
    border-bottom: 1px solid #555; 
} 

li:last-child { 
    border-bottom: none; 
}

出典

2016-04-06 Senoj

お役に立てば幸いです。ディd中かっこや閉じタグがないかチェックしますか？

タグは何ですか、それには終了タグがありますか？ – Sparky256

あなたは位置を与えました：navbarの上に来るコンテナのために固定されています。いずれかの位置を削除：固定またはマージントップを使用します。 –

用コンテナーに固定された位置を追加するときは、両方で、Zインデックスを追加することができます。あなたの方法でコンテナと修正このためNAVのdivしたいよう。

.navbar { 
    margin-top: 50px; 
    margin-left: 25px; 
    padding: 0; 
    font-size: 15px; 
    float: left; 
    display: inline-block; 
    z-index: 2; 
    position: fixed; 
} 

.container { 
    width: 100%; 
    margin-top: 20px; 
    font-size: 25px; 
    display: inline-block; 
    position: fixed; 
    text-align: center; 
    z-index: 1; 
}

変更するには、このCSSは、それはこの種のコードは簡単で、通常はうまく機能

出典

2016-04-06 04:14:26 hemanjosko

ありがとうございます。 – Senoj

あなたは要素がスクロールしないようにしたい場合を除きposition:fixedを使用しないでくださいページと一緒に。このCSSの設定は、画面/ウィンドウに固定されたヘッダー（ナビバー）に最適で、常に表示されます。

position:fixedに似ているもう1つはposition:absoluteですが、ユーザーがページを下にスクロールするとスクロールします。ただし、絶対値と固定値の両方を使用すると、要素を画面上に正確に配置するのに、topleftrightbottomを使用することができます。（ワンチップ：親要素がposition:absolute又はposition:relativeのいずれかでなければならない（相対）が一般的である

変更position:fixedはposition:relativeから<div class="container">

出典

2016-04-06 04:14:12 gibberish

Navbarが応答しない

答えて

関連する問題