Lincoln Lincoln - 2 months ago 11
CSS Question

Navigation Bar showing up below content -- z-index not working

In the following code sample, the navbar shows up below content, and it looks really weird. I tried messing with the z-index, but that didn't fix it.



<!DOCTYPE html>
<html>
<head>
<title>Actually, it Is Quantum Physics</title>
<meta name="description" content='This website shows the content of the YouTube channel, "Acutally, it is Quantum Physics"'>
<style>
ul.topnav {
position: absolute;
left: 0;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darkcyan;
}

ul.topnav li {float: left;}

ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

ul.topnav li a:hover {background-color: cyan;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}

}
div#main {
position: absolute;
top: 4%;
left: 0;
width: 100%;
text-align: center;
color: red;
font-size: 1.5em;
}
div#main h1, h2 {
color: red;
font-size: 1.2em;
}
body {
background-image: url("educationAtom.png");
background-repeat: no-repeat;
background-position: center;
background-color: lawngreen;
}
</style>
<meta name="google-site-verification" content="5SHQHazxlRwIwvGIOeWZyrvl1xL8zIW09eaVEH6-0Ag" />
</head>
<body>
<ul class="topnav" id="navbar">
<li><a href="index.htm">Home</a></li>
<li><a href="blog.htm">Blog</a></li>
<li><a href="hiim.htm">How are the Videos Made?</a></li>
<li><a href="watch.htm">Watch the Videos!</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="media()">&#9776;</a>
</li>
</ul>

<div id="main">
<h1><strong><em>ACTUALLY, IT IS QUANTUM PHYSICS</em></strong></h1>
<h1>What is <em>Actually, it is Quantum Physics</em></h1>
Acutally, it is Quantum Physics is a YouTube channel at <a href="https://www.youtube.com/channel/UCkvh22f1Jp7BWEuS0b8HXVw">www.youtube.com</a>. It makes educational videos about, as the name implies, quantum physics, among other things.
<h1>The Mission</h1>
<div id="qoute" style="float: left; color: black; font-size: 0.5em; width: 20%;">I never teach my pupils, I only provide the conditions in which they can learn.<br>
&#09;--Albert Einstein</div>
The mission of Acutally, it is Quantum Physics is to provide young people the education they need to succed. With tools like YouTube, students struggling in school can speed themselves up. Students who are advanced in school can continue learning. YouTube is by no means perfect, but it is the first step torwards better education for all.
<h1>Why do I Care?</h1>
How we educate our next great thinkers is a <em>very</em> important thing. Schools in the United States are not great. Schools are just a teacher telling students things at the right pace for one or two students. Everyone else is either lost because school moves on too fast, or too slow. This is a huge problem. The obvious solution to the problem is a personal tutor to everyone. But we can't do that. It would be insanely expensive, use more than every human on earth, and even if none of those were a problem, not everyone is smart enough to tutor a kid. YouTube is the real easy solution. It's inexpensive, doesn't require many people, and only needs at least one super-smart guy. It is not perfect, but it's the best, <em>current</em> solution we've got. Needless to say, better things are coming in the future, but this is a <em>current</em> solution that works to solve the Education Paradox.
</div>
<script>
function media() {
var x = document.getElementById("navbar");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>





See how the menubar is under the content? I would like a bit of help putting that on top of the content, or moving the content down. Thanks in advance!

Answer

Remove the 4% from here and and 10% hope it will work for all media screen. div#main {top: 12%;}

<!DOCTYPE html>
<html>
<head>
    <title>Actually, it Is Quantum Physics</title>
    <meta name="description" content='This website shows the content of the YouTube channel, "Acutally, it is Quantum Physics"'>
    <style>
        ul.topnav {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: darkcyan;
        }

        ul.topnav li {float: left;}

        ul.topnav li a {
          display: inline-block;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          transition: 0.3s;
          font-size: 17px;
        }

        ul.topnav li a:hover {background-color: cyan;}

        ul.topnav li.icon {display: none;}

        @media screen and (max-width:680px) {
          ul.topnav li:not(:first-child) {display: none;}
          ul.topnav li.icon {
            float: right;
            display: inline-block;
          }
        }

        @media screen and (max-width:680px) {
          ul.topnav.responsive {position: relative;}
          ul.topnav.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          ul.topnav.responsive li {
            float: none;
            display: inline;
          }
          ul.topnav.responsive li a {
            display: block;
            text-align: left;
          }
          
        }
        div#main {
            position: absolute;
            top: 12%;
            left: 0;
            width: 100%;
            text-align: center;
            color: red;
            font-size: 1.5em;
        }
        div#main h1, h2 {
            color: red;
            font-size: 1.2em;
        }
        body {
            background-image: url("educationAtom.png");
            background-repeat: no-repeat;
            background-position: center;
            background-color: lawngreen;
        }
    </style>
    <meta name="google-site-verification" content="5SHQHazxlRwIwvGIOeWZyrvl1xL8zIW09eaVEH6-0Ag" />
</head>
<body>
        <ul class="topnav" id="navbar">
      <li><a href="index.htm">Home</a></li>
      <li><a href="blog.htm">Blog</a></li>
      <li><a href="hiim.htm">How are the Videos Made?</a></li>
      <li><a href="watch.htm">Watch the Videos!</a></li>
      <li class="icon">
        <a href="javascript:void(0);" onclick="media()">&#9776;</a>
      </li>
    </ul>
    
    <div id="main">
        <h1><strong><em>ACTUALLY, IT IS QUANTUM PHYSICS</em></strong></h1>
        <h1>What is <em>Actually, it is Quantum Physics</em></h1>
        Acutally, it is Quantum Physics is a YouTube channel at <a href="https://www.youtube.com/channel/UCkvh22f1Jp7BWEuS0b8HXVw">www.youtube.com</a>. It makes educational videos about, as the name implies, quantum physics, among other things.
        <h1>The Mission</h1>
        <div id="qoute" style="float: left; color: black; font-size: 0.5em; width: 20%;">I never teach my pupils, I only provide the conditions in which they can learn.<br>
    &#09;--Albert Einstein</div>
        The mission of Acutally, it is Quantum Physics is to provide young people the education they need to succed. With tools like YouTube, students struggling in school can speed themselves up. Students who are advanced in school can continue learning. YouTube is by no means perfect, but it is the first step torwards better education for all.
        <h1>Why do I Care?</h1>
        How we educate our next great thinkers is a <em>very</em> important thing. Schools in the United States are not great. Schools are just a teacher telling students things at the right pace for one or two students. Everyone else is either lost because school moves on too fast, or too slow. This is a huge problem. The obvious solution to the problem is a personal tutor to everyone. But we can't do that. It would be insanely expensive, use more than every human on earth, and even if none of those were a problem, not everyone is smart enough to tutor a kid. YouTube is the real easy solution. It's inexpensive, doesn't require many people, and only needs at least one super-smart guy. It is not perfect, but it's the best, <em>current</em> solution we've got. Needless to say, better things are coming in the future, but this is a <em>current</em> solution that works to solve the Education Paradox.
     </div>
    <script>
        function media() {
            var x = document.getElementById("navbar");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>
</html>