Header Elemente nebeneinander
Moin moin,
Ich bin ganz neu dabei und versuche mich gerade an einer Testwebseite.
Ich möchte den Header wie folgt aufbauen:
Ganz oben die Überschrift mittig,
da drunter 2 Links nebeneinander und ganz rechts ein Bild mit einem Logo.
Leider wird man das Logo immer unter den Links angezeigt.
Der hier verwendete Code
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
min-height:100vh;
}
header{
display:flex;
flex-direction:column;
}
.header_row{
display:flex;
}
header img{
height:30px;
}
header .logo{
background:yellow;
padding:10px;
}
header .nav {
background: lightblue;
height: 100px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
flex-direction: row;
}
main {
flex:1;
background: red;
color: white;
display: flex;
font-size: 150px;
text-align: center;
align-items: center;
justify-content: space-around;
}
footer{
height:60px;
background:black;
color:white;
font-size:50px;
text-align:center;
}
</style>
</head>
<body>
<header>
<div class="header_row logo">
<img src="/image/htmlforumlogo3.png">
</div>
<div class="header_row nav">
<div class="left">
<button>Button</button>
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
<div class="right">
<a href="">Kontakt</a>
</div>
</div>
</header>
<main>
MAIN
</main>
<footer>
FOOTER
</footer>
</body>
</html>