Nav ist nicht am Anfang der Seite?

Ich versuche, mein Nav auf der oberen rechten Seite der Seite zu haben, aber es zeigt wie 100px von oben nach unten. Ich habe keine Ahnung, was das verursacht, ich habe versucht, die Polsterung und den Rand anderer Dinge im Header zu ändern, aber ich kann es nicht lösen. Irgendeine Hilfe ?Nav ist nicht am Anfang der Seite?

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>CT Designs | Home</title> 
    <!-- Stylesheets--> 
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    <!-- Fonts--> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    </head> 
    <body> 
    <header> 
     <div class="container"> 
     <div id="branding"> 
      <h1> CT Designs </h1> 
     </div> 
     <div id="menu"> 
      <svg height="40px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg> 
     </div> 
     <nav> 
      <ul> 
      <li>Home</li> 
      <li>About Me</li> 
      <li>Projects</li> 
      <li>Contact</li> 
      </ul> 
     </nav> 
     </div> 
    </header> 

    <script src="jquery-3.1.1.min" href="main.js"></script> 
    </body> 
</html>

CSS:

body { 
    margin: 0; 
    padding: 0; 
} 

.container { 
    min-width: 80%; 
    float: center; 
} 

ul { 
    padding: 0; 
    margin: 0; 
} 

header { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-image: url("../resources/img/header.jpg"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

header .container #branding h1 { 
    display: block; 
    position: absolute; 
    top: 45%; 
    left: 50%; 
    transform: translateX(-50%); 
    font-size: 70px; 
    text-transform: uppercase; 
    font-weight: 400; 
    margin: 0; 
    padding: 0; 
    font-family: Roboto; 
    color: #fff; 
    margin-top: -0.5em; 
    padding: 30px; 
    border: solid 3px #fff; 
} 

header .container #menu { 
    margin: 10px; 
    padding: 0; 
    width: 100px; 
} 

header .container #menu svg { 
    cursor: pointer; 
    margin: 0; 
    padding: 0; 
} 

header .container #menu svg path.fill { 
    fill: white; 
} 

header .container nav ul { 
    float: right; 
    margin-bottom: 40px; 
} 

header .container ul li { 
    display: inline-block; 
    text-decoration: none; 
    color: white; 
    font-size: 20px; 
    font-family: Roboto; 
    padding-right: 20px; 
}

Quelle

2017-02-26 Cían Mac Tiarnáin

Sie können Ihre Website mit den Entwickler-Tools Ihres Browsers überprüfen. In den meisten Browsern können Sie sie mit 'Strg + Umschalt + i' öffnen. Dann können Sie den Inspektor verwenden, um zu sehen, was die unerwünschte Positionierung verursacht. – Schwesi

@Schwesi Ich habe das getan und es hat einen großen orangefarbenen Raum über dem Nav und egal wie ich versuche und ändern Sie das Logo (das scheint die Quelle zu sein) Ich kann es nicht reparieren –

es ist ein Block-Level-Element, verwenden Sie die 'Anzeige 'Eigenschaft, um dies in Inline oder Inline-Block zu ändern. – pol

Sie haben, geben Sie Ihre header .container nav ul Recht zu schweben, die unter Ihrem div#menu ist und das ist, wo der Raum kommt: der Raum durch die verursacht wird, svg Element, das Sie haben, das Ihr 'Hamburger' Menü.

Hier ist eine Lösung:

#menu { 
    float: left; 
} 
header .container nav ul { 
    float: right; 
    margin-top: 20px; 
}

Quelle

2017-02-26 13:20:38 Mers

Perfekt! Vielen Dank :) –

Gern geschehen :) – Mers

Nav ist nicht am Anfang der Seite?

Antwort

Verwandte Themen