Displaying a table over an image with CSS - html

Question

I want to display these 3 grey buttons on the banner. Everything i tried didn't work.
This is the html code:
<nav>
<img class="banner" src="img/Banner.png" alt="Banner">
<table>
<tr>
<td>
Index
</td>
<td class="separator">
<td>
<a class="active" href="seiteA.html">Seite A</a>
</td>
<td class="separator">
</td>
<td>
Seite B
</td>
</tr>
</table>
</nav>
I am new to HTML and CSS so i appreciate any help :)

Answer 1

Best practices:
It is not a good practice to use a <table> for navigation, you can use something like <ol>/<ul> as shown in nav documentation on MDN or even <div>s within display:flex container.
You can use the image as the background-image of the <nav> so that you don't have to position the navigation elements on top of it yourself.
nav {
position: relative;
height: 100px;
padding: 10px;
background-image: url("https://picsum.photos/100");
}
ol {
display: flex;
justify-content: space-around;
list-style: none;
}
li {
padding: 5px;
background: white;
}
<nav>
<ol>
<li>Seite A</li>
<li>Seite B</li>
<li>Seite B C</li>
</ol>
</nav>
Quick answer to help you move forward with what you currently have: You can make your nav a relative positioned container and absolute position your table on top of it anywhere you want.
nav {
position: relative;
}
img {
display: block;
height: 200px;
background-color: dodgerblue;
}
table {
position: absolute;
top: 50px;
left: 50%;
}
<nav>
<img class="banner" src="img/Banner.png" alt="Banner">
<table>
<tr>
<td>
Index
</td>
<td class="separator">
<td>
<a class="active" href="seiteA.html">Seite A</a>
</td>
<td class="separator">
</td>
<td>
Seite B
</td>
</tr>
</table>
</nav>