Guten Tag ich hätte eine Frage, und zwar bin ich gerade dabei eine eigene Website zu erstellen. Dafür habe ich ein Navigationssystem, welches bei einer bestimmten Größe zu einem Dropdown Navigationssystem wird, wenn die Seite z.B. auf Handys geöffnet wird, dass sich das ganze Menü dann in ein Dropdown verwandelt. Wenn man meine Internetseite ganz normal am PC öffnen soll, dann soll dort unter der Navigationsleiste ein Bild sein. Das funktioniert auch alles super. Sobald es jedoch auf Handy Größe sich umstellt, dann ist das Bild zwar immernoch auch in der richtigen Größe da, aber es verdeckt das Dropdown Navigationssystem. Ist es möglich, dass man einen Befehl gibt, dass sobald sich das Dropdown Menü öffnet das Bild im Hintergrund ist, also dass das Dropdown Menü über dem Text ist? Die beiden Codes sind unten. Es geht um das Bild image9.jpg.png. Das ist im Weg (also vor dem Text) sobald sich das Dropdown Menü öffnet. Ich will aber, dass das Dropdown Menü wenn man es aufmacht das Bild verdeckt und man die einzelnen Navigationspunkte sehen kann.
Ich hoffe ihr versteht was ich meine. Vielen Dank schonmal
Ich hoffe ihr versteht was ich meine. Vielen Dank schonmal
HTML:
<!DOCTYPE html>
<html>
<head>
<title>The Bergmann Method </title>
<link rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="top">
<br>
<div id="navigation">
<img src="deutschland.png" alt="Deutsch">
<a href="#">Deutsch</a>
<img src="england.png" alt="Englisch">
<a href="#">Englisch</a>
<br>
<br>
<br>
</div>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<a href="#">Über Mich</a>
<a href="#">Services</a>
<a href="#">Kontakt</a>
<a href="#">Shop</a>
<a href="#">The Bergmann Method</a>
<a href="#">Meine Lizenzen</a>
</div>
</div>
<div id="image">
<img src="image9.jpg.png" alt="The Bergmann Method">
</div>
CSS:
html, body {
height: 100%;
width: 100%;
background-color: grey;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
#navigation {
text-align: center;
}
#navigation a {
color: white;
text-decoration: none;
background-color: black;
border-radius: 20px;
padding: 6px;
}
#navigation a:hover {
padding-top: 10px;
padding-bottom: 10px;
}
.nav {
border-bottom: 1px solid black;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
text-align: center;
}
.menu a {
clear: right;
text-decoration: none;
color:white;
margin: 0 10px;
line-height: 70px;
background-color: black;
border-radius: 20px;
padding: 6px;
}
.menu a:hover {
padding-bottom: 10px;
padding-top: 10px;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
}
#toggle {
display: none;
}
@media only screen and (max-width: 800px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
margin: 0;
border-bottom: 1px black;
background-color: transparent;
color: black;
}
#toggle:checked + .menu {
display: block;
}
}
#image img {
width: 80%;
height: auto;
margin-top: 16px;
margin-bottom: 16px;
display: block;
margin: 20px auto;
}
Zuletzt bearbeitet:
