-5

I building my first website, and i have made a navigation bar. but when i want to add text to the page it starts behind the navigation bar (in the left corner). The only way i can center down the text down is to use margin to get it down. Anyone know what i do wrong?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="language" content="swedish"> 
        <meta http-equiv="content-type" content="text/html">
        
        <title>
            Kontakt
        </title>
        <link rel="stylesheet" href="style.css">
        <link rel=script href="script.js">
        <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">

        <nav>
            <ul>
                <li><a href="index.html">Hem</a></li>
                <li><a href="jag.html">Vem är jag?</a></li>
                <li><a href="projekt.html">Mina projekt</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
            </nav>

    </head>
    
<body>
    <h1>hej</h1>

    
</body>
</html>

3
  • 1
    We need to see the relevant stylesheet as well
    – Itay
    Aug 9, 2020 at 14:05
  • Why are you including the navigation in the <head> tag......?
    – Alon Eitan
    Aug 9, 2020 at 14:07
  • Hi! thanks for your answer. i thought it would be there, but i will put it in the body section Aug 9, 2020 at 14:11

3 Answers 3

1

You moved the nav tag to the head tag, which is a gross error. You need it like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="language" content="swedish">
    <meta http-equiv="content-type" content="text/html">
    <title>
      Kontakt
    </title>
    <link rel="stylesheet" href="style.css">
    <link rel=script href="script.js">
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1>hej</h1>
    <nav>
      <ul>
        <li><a href="index.html">Hem</a></li>
        <li><a href="jag.html">Vem är jag?</a></li>
        <li><a href="projekt.html">Mina projekt</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </body>
</html>

1
0

Sorry! Here is my stylesheet

body {
    background-color: grey;
    font-family: Arial, Helvetica, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

nav {
    width: 100%;
    height: 100px;
    background-color: white;
    overflow: auto;
    position: fixed;
    
}

ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
}

li {
    float: left;
    line-height: 100px;
    
    

}

a {
color: black;
text-decoration: none;
display: block;
width: 100px;
text-align: center;
font-size: 17px;
padding: 0 20px;
font-family: Arial, Helvetica, sans-serif;


}

a:hover {
    background-color: grey;
    color: lavenderblush;}
}

-1

You need to show your CSS as well. Also, your nav should be in the body part not in the head.

Not the answer you're looking for? Browse other questions tagged or ask your own question.