HTML Nav-Tag-Formate seltsam

Ich mache eine Navigationsleiste und wenn ich das Nav-Tag style gibt es einen Platz zwischen der Navigationsleiste und der Leinwand, die ich darunter habe ... Es gibt wahrscheinlich eine offensichtliche Lösung, ich kann einfach ' t scheinen, um es zu finden: P here is the page HTML Nav-Tag-Formate seltsam

Hier mein CSS ist

@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; 
}

Hier ist mein 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>

Quelle

2016-07-18 Anonymous

Können Sie uns bitte sowohl das HTML als auch das CSS zeigen. – Sam

Ich denke, es ist ein Problem mit ul Margin oder Padding, aber bitte aktualisieren Sie Ihre Frage mit HTML oder Beispiel eines Codes auf Codepen oder jsfiddle. Danke – ristapk

@ristapk Das war meine erste aber auch, aber mit Blick auf seine CSS gibt es so viel absolute Positionierung geht ich vermute, weil sie relativ zu dem falschen Element sind? – Sam

chan ge nav style zu

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

Quelle

2016-07-18 13:18:06

HTML Nav-Tag-Formate seltsam

Antwort

Verwandte Themen