my content text is being overlapped by my navigation bar. I have looked at other questions like this, but i have not been able to fix this.
I think that it might be because of my "z-indexes". I need the functionality of the page to stay somewhat the same as now, i just need to be able to see the top of the content text.
I believe that the code i have put in here should be enough to see what the solution to this problem could be.
p, div, a
{
font-family: "Century", sans-serif;
}
ul
{
list-style-type: none;
}
li
{
display: inline-block;
padding: 0;
margin: 0;
font-size: 15px;
}
nav
{
text-align: center;
}
img
{
min-height: 100%;
min-width: 100%;
}
.content
{
z-index: -10;
position: fixed;
text-align: center;
min-height: 100%;
min-width: 100%;
}
.textbox
{
z-index: -5;
position: absolute;
margin-left: 11%;
margin-top: 1%;
text-align: left;
color: #000000;
}
.rubrik
{
font-size: 35px;
font-weight: bold;
}
.brod
{
font-size: 18px;
}
.header
{
box-shadow: 0px 4px 25px #000000;
position: fixed;
width: 100%;
background-color: #FFFFFF;
}
body
{
margin: 0;
}
html
{
overflow-y: scroll;
}<body>
<div class="wrapper">
<div class="header">
<nav>
<ul>
<li> <a href="index.php">FORSIDE</a> </li>
<li> <a href="nyheder.php">NYHEDER</a> </li>
<li> <a class="currentpage" href="hvem-er-vi.php">HVEM ER VI?</a> </li>
<li> <a href="om-moellevangen.php">OM MØLLEVANGEN</a> </li>
<li> <a href="vaerdigrundlag.php">VÆRDIGRUNDLAG</a> </li>
<li> <a href="vedtaegter.php">VEDTÆGTER</a> </li>
<li> <a href="galleri.php">GALLERI</a> </li>
<li> <a href="kontakt.php">KONTAKT</a> </li>
</ul>
</nav>
</div>
<div class="content">
<img src="files/forside3.png"/>
</div>
<div class="textbox">
<p class="rubrik">
Bestyrelsen
</p>
<p class="brod">
Formand:</br>
Anne, Galsted</br>
Tlf: </br>
Mobil: </br>
</br>
Næstformand:</br>
Niels, Agerskov</br>
Tlf: </br>
Mobil: </br>
</br>
</p>
</div>
</body>
