Der Header hat eine Höhe von 11rem, die Navi hat nur 9.9rem.
Ohne Kristallkugel würde ich tippen, dass der "Zwischenraum" ca. 1.1rem sind?!
Wo steht denn, dass die Nav eine Höhe von 9.9 rem besitzt? Die Mindest-Breite der Listenelemente ist lediglich 9,9 ...
- - - Aktualisiert - - -
So auf den ersten Blick sehe ich, dass der Header ein top margin von 1rem hat, könnte das daran liegen?
Schon ausprobiert, bringt leider keine Verbesserung mit sich.
Woher kommt der Freiraum unter den roten Buttons bis zum Ende der grauen Leiste?
Html Code:
<!DOCTYPE html>
<html lang="de" >
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div id="logo_banner"><img src=""></div>
<nav>
<ul>
<li><a href="">Startseite</a></li>
<li><a href="">Büro</a></li>
<li><a href="">Projekte</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS Code:
@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
html, body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
header {
margin: 1rem 0 1rem 0;
width: 100%;
height: 11rem;
}
header #logo_banner {
background-color: #bebebe;
}
header #logo_banner img {
display: block;
margin: 0 auto;
}
nav {
padding:0;
background-color: #797979;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
nav ul li {
cursor: pointer;
float:left;
margin: 0;
background-color: brown;
min-width: 9.9rem;
transition: background-color 0.5s;
}
nav ul li a {
padding: 0;
margin: 0;
font-size: 1.6rem;
font-family: 'Lato', sans-serif;
font-weight: 100;
color: white;
text-decoration: none;
display: inline-block;
}
nav ul li:hover {
background-color:#000000;
}[FONT="]Ich habe es mal so gelernt, dass ein Block-Element, welches keine Höhe zugewiesen bekommt sich dem Inhalt anpasst. Jedoch habe ich es mal ausprobiert und der Text ist einfach flooded... [/FONT]
[FONT="]
[/FONT]
[FONT="]Ich stehe entweder stark auf dem Schlauch, oder da läuft wirklich was falsch.[/FONT]
[FONT="]
[/FONT]
[FONT="]Ergebnis[/FONT]
[FONT="][Blockierte Grafik: https://www2.pic-upload.de/img/32944692/kflkdjfkljsdklfsdkjfskldjf.png][/FONT]
[FONT="]
[/FONT]
[FONT="]Code[/FONT]
[FONT="][Blockierte Grafik: https://www2.pic-upload.de/img/32944693/wkdwkdjlkwkdj.png][/FONT]
[FONT="]
[/FONT]
[FONT="]Ächtet mich, wenn der Fehler "super-mega-ersichtlich" ist. Wenn nicht... dann nicht ^_^[/FONT]