Ich habe versucht die responsive Navigation von HTML-Seminar zu übernehmen diese wird jedoch falsch dargestellt bzw. fuktioniert nicht.
https://www.html-seminar.de/toggle-menue-0…umschaltung.htm
HTML
<html>
<head>
<title>PP</title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a15587f23f.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="nav-menue">
<a href="#" id="bereichlogo">HTML-Seminar.de</a>
<nav id="steuerung" role="navigation">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">HTML lernen</a></li>
<li><a href="#">Beispiele</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</nav>
<a class="menue-button menue-button-beschr-close" href="#nav-menue-zu">MENÜ zu</a>
<a class="menue-button menue-button-beschr-open" href="#nav-menue">MENÜ auf</a>
</header>
<div id="background"></div>
<main>
<section>
<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>
<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>
<div class="news_box">
<div class="news_box_title"><h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1></div>
<div class="news_box_content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<a href="#" class="button_1">---</a>
</div>
</section>
</main>
<footer>
</footer>
</body>
</html>Code
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fafafa;
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
}
#background {
background-image: url(images/background.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.85;
}
main {
max-width: 950px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.news_box {
margin-top: 50px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 2px;
display: flex;
flex-direction: column;
}
.news_box_title {
margin: 10px;
text-align: center;
}
.news_box_content {
text-align: center;
}
.button_1 {
display: block;
margin: 10px;
padding: 10px;
border: 1px solid #f0f0f0;
border-radius: 2px;
letter-spacing: 4px;
text-align: center;
text-decoration: none;
}
footer {
margin-top: 100px;
background-color: #1a1a1a;
height: 150px;
}
/*responsive Elemente*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 800px) {
main {
margin-right: 20px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.news_box {
margin-top: 20px;
}
}
/*responsive Elemente*/
/*Schriften,Überschriften&Links*/
h1 {
font: 18px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
}
a {
font: 13px/1.65em "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
text-decoration: none;
}
/*Schriften,Überschriften&Links*/
/*fremder Code*/
header {
background-color: yellow;
background-color: gray;
width: 100%;
float: left;
border-bottom: 1px solid black;
}
#bereichlogo {
color: white;
background-color: limegreen;
display: block;
padding: 0.5em;
text-decoration: none;
float: left;
}
#bereichlogo {
width: auto;
}
#steuerung li {
list-style: none;
float: left;
}
#steuerung a {
display: block;
height: 100%;
width: 100%;
padding: 0.5em;
text-decoration: none;
color: white;
background-color: gray;
}
.menue-button {
display: none;
}
#steuerung {
float: right;
}
#steuerung a:hover {
color: black;
background: orange;
}
/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
/* Menü-Button oben rechts einblenden bei kleiner als 600px */
@media only screen and (max-width:800px) {
.menue-button {
display: block;
}
.menue-button {
background-color: darkblue;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0.5em;
color: white;
cursor: pointer;
text-decoration: none;
}
#bereichlogo {
width: 100%;
}
#steuerung {
float: left;
width: 100%;
display: none;
}
#steuerung li {
width: 100%;
border-bottom: 2px solid silver;
}
.menue-button:hover {
color: black;
background: orange;
}
}
/* die Magie, um die Steuerung einzublenden (auch auf mobile Devices) */
#nav-menue:target #steuerung {
display: block;
}
/* ausblenden des Menü-Buttons zum öffnen - somit wird der zum Schließen sichtbar */
#nav-menue:target .menue-button-beschr-open {
display: none ;
}
/* Allgemein Anweisungen */
section {
padding: 0.5em;
float: left;
width: 100%;
}
h1, p {
margin: 0.5em 0 0 0;
}
/*fremder Code*/