HTML Navタグのフォーマットが奇妙

私はナビゲーションバーを作成しています。ナビゲーションタグをスタイルすると、ナビゲーションバーとキャンバスの間にスペースがあります。おそらく明らかな解決策があります。トンそれを見つけるように見える：P here is the page HTML Navタグのフォーマットが奇妙

ここに私のCSSで

@font-face 
{ 
    font-family: 'Quicksand-Bold'; 
    src: url('../Quicksand-Bold.woff') format('woff'); 
} 
#mainBanner 
{ 
    font-family: Quicksand-Bold; 
    position: absolute; 
    top: 60px; 
    left: 100px; 
    font-size: 25px; 
} 

#navbar { 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    background-color: #333; 
    width: 1000px; 
    position: relative; 
} 

li { 

    display: inline; 
    font-family: Arial; 
    font-weight: bold; 
} 

li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none 
} 

li a:hover { 
    background-color: #D92715; 
} 

#welcomeBanner 
{ 
    font-family: Quicksand-Bold; 
    position: absolute; 
    top: 155px; 
    left: 180px; 
    font-size: 50px; 
} 

#pi 
{ 
    width: 175px; 
    height: 125px; 
    position: absolute; 
    top: 185px; 
    left: 550px; 
} 

p 
{ 
    font-family: Quicksand-Bold; 
    position: absolute; 
    top: 300px; 
    left: 210px; 
} 

canvas 
{ 
    display: block; 
    margin: 0 auto; 
    padding: 0; 
}

は、ここに私のHTML

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <title>Pi Projects</title> 
    <meta name="description" content="The place to go for Raspberry Pi Projects".> 
    <meta name="author" content="Jordan Baron"> 

    <link rel="stylesheet" href="css/styles.css"> 

</head> 

<body> 

    <img src=images/pilogo.png id="pilogo"> 
    <img src=images/pi.png id="pi"> 

    <h1 id="mainBanner">Projects</h1> 


    <nav id="navbar"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="projects.html">Projects</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      <li><a href="about.html">About</a></li> 
     </ul> 
    </nav> 

    <h1 id="welcomeBanner">Welcome<br>to PiProjects.tk</h1> 
    <p>The best source for Raspberry Pi projects</p> 

    <canvas id="myCanvas" width="1000" height="500" style="border:1px solid white;"> 
    </canvas> 


    <script src="js/scripts.js"></script> 
</body> 
</html>

出典

2016-07-18 Anonymous

にすることができます。あなたは私たちにHTMLとCSSを表示できますか。 – Sam

ulマージンやパディングに問題があると思っていますが、HTMLやcodepenやjsfiddleのコードのサンプルで質問を更新してください。ありがとう – ristapk

@ristapkあまりにも私の最初だったが、彼のCSSを見れば、それは間違った要素に相対的であるため、私はそれが疑わしい上に行く絶対的な位置付けがありますか？ – Sam

ちゃんですあなたのナビスタイルを

#navbar { 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    background-color: #333; 
    width: 1000px; 
    position: relative; 
    display: table; 
}

出典

2016-07-18 13:18:06

HTML Navタグのフォーマットが奇妙

答えて

関連する問題