Hallo,
ich habe mehrere media queries und habe festgestellt, dass beim Anpassen z.B. des Hamburger Menüs für die Auflösung max-width:1280px (Hintergrundfarbe grau) es garnicht in dieser media query angesprochen wird, sondern mit der nächstkleineren media query bedient (max-width:700px - Hintergrundfarbe grün) wird.
html-seminar.de/woltlab/attachment/1707/html-seminar.de/woltlab/attachment/1708/
Anscheinend auch das Element "a".
(die Dinge unterhalb des HH Menüs sind auch noch nicht angepasst und sehen so verschoben aus.)
ich steh grad vorm Berg und seh ihn nicht... Kann mir jemand bitte weiterhelfen? Danke!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Titel 2018</title>
<meta charset ="UTF-8">
<!-- Link zu Stylesheets -->
<link rel="stylesheet" media="screen and (max-width: 1280px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1281px)" href="css/desktop.css">
<!-- Responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link zu JQueryBibliothek -->
<script src="script/jquery.min.js"></script>
</head>
<body>
<header>
<div class="Logos">
<img id="AKA" src="images/Logo1.png">
<img id="AI" src="images/Logo1.png">
</div>
<div class="Hauptbild">
<img id="Bild" src="images/bild.png" class="responsive">
<h1>Titel</h1>
</div>
<div id="nav-menue">
<div id="hamicon">
<div class="ham1 eins"></div>
<div class="ham1 zwei"></div>
<div class="ham1 drei"></div>
</div>
<nav class="zu weg">
<ul>
<li class="gruen"><a href="Type.html">Type</a>
<li class="hellblau"><a href="Type.html">Type</a></li>
<li class="tuerkis"><a href="Type.html">Type</a></li>
<li class="blau"><a href="Type.html">Type</a></li>
<li class="lila"><a href="Type.html">Type</a></li>
<li class="pink"><a href="Type.html">Type</a></li>
<li class="rot"><a href="Type.html">Type</a></li>
<li class="orange"><a href="Type.html">Type</a></li>
<li class="gelb"><a href="Type.html">Type</a></li>
</ul>
</nav>
</div>
</header>
<!-- Script für das Hamburger Menue -->
<script>
$('#hamicon').click(function(){
ff=$('.eins').hasClass('einszu');
if(ff==true){
$('.eins').removeClass('einszu');
$('.eins').addClass('einsauf');
$('nav').removeClass('weg');
$('nav').addClass('da');
}else{
$('.eins').removeClass('einsauf');
$('.eins').addClass('einszu');
$('nav').removeClass('da');
$('nav').addClass('weg');
}
})
</script>
<section>
<div class="block">
<div class="video">
<h2>Titel</h2>
<p>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
FLorem ipsum dolor sit ametn<br>
Lorem ipsum dolor sit amet
</p>
</div>
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<footer>
<p>
<a href=test<br>
<a href="impressum.html">Impressum</a>
</p>
</footer>
</body>
</html>
CSS - Mobile
/* Allgemeine Angaben */
body {
background-color: black;
padding: 0;
width: 100%;
min-width: 360px;
max-width: 1920px;
margin: 0 auto 0 auto;
font-family: "'Maven Pro'";
height: 300px;
}
/* Google Font Lokal auf Server legen - sonst Prob mit DSVGO */
@font-face {
font-family: "'Maven Pro'";
src: url('../fonts/maven-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local("'Maven Pro Regular'"), local("'MavenPro-Regular'"),
url('../fonts/maven-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/maven-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/maven-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/maven-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/maven-pro-v11-latin-regular.svg#MavenPro') format('svg'); /* Legacy iOS */
}
.responsive {
width: 100%;
height: auto;
}
.Logos {
padding: 10px;
}
#AKA {
width: 290px;
margin-left: 10px;
}
#AI {
width: 290px;
margin-right: 10px;
float: right;
}
.Hauptbild {
min-width: 360px;
}
/* Menue */
li {
list-style: none;
}
a {
display: block;
text-decoration:none;
color: white;
font-size:1.2em;
font-weight: bold;
height: 40px;
align-items: center;
}
nav ul li {
flex: 1;
padding: 7px;
opacity: 0.5;
cursor: pointer;
}
nav ul li:hover {
opacity: 1;
}
/* Kleinere Aufloesungen */
@media only screen and (max-width:1280px) {
body {
background-color: grey;
}
h1 {
color: #242424;
position: relative;
bottom: 70px;
font-size: 2.1em;
margin-right: 15px;
text-align: right;
}
/* Menueleiste wird zum Hamburger Menue */
#hamicon{
display:block;
width:50px;
height:35px;
opacity:0.5;
cursor: pointer;
margin-left: 20px;
margin-top: -35px;
}
#hamicon>.eins,.zwei,.drei{
width:100%;
height:10px;
border-radius:2px;
display:block;
margin-bottom:10px;
background:#C1DE1D;
}
/* Hamburger klappt auf */
.einsauf{
transform-origin:0% 100%;
transform:rotate(-10deg);
}
/* Hamburger klappt zu */
.einszu{
transform-origin:0% 100%;
transform:rotate(0deg);
}
.eins{
background:#C1DE1D;
}
.zwei{
background:#00FFC6;
}
.drei{
background:#00C3FF;
}
#hamicon:hover {
opacity: 1;
}
.weg{
display:none;
}
.da{
display:block;
}
nav {
display:none;
}
nav ul {
width: 65%;
margin:0 auto;
height: 850px;
display:flex;
flex-direction:column;
}
nav ul li {
padding: 0Px;
}
nav li{
margin-bottom: 25px;
text-align:center;
}
nav a {
text-align: center;
font-size: 1.6em;
height: 15px;
}
.gruen {
border: #C1DE1D 5px solid;
}
.hellblau {
border: #00FFC6 5px solid;
}
.tuerkis {
border: #00C3FF 5px solid;
}
.blau {
border: #0000FF 5px solid;
}
.lila {
border: #8903FF 5px solid;
}
.pink {
border: #FF007E 5px solid;
}
.rot {
border: #FF0000 5px solid;
}
.orange {
border: orange 5px solid;
}
.gelb {
border: #FFFF00 5px solid;
}
/* Video und Videotext Anordnung untereinander */
section {
display: block;
width: 700px;
text-align: center;
margin: 200px auto;
color: white;
}
.video {
border-left: black 4px solid;
height: 130px;
}
h2 {
border-left: #C1DE1D 30px solid;
text-align: left;
padding: 8px;
padding-left: 15px;
margin-bottom: 10px;
margin-top: 60px;
margin-left: 10px;
}
p {
font-size:1em;
text-align: left;
padding: 5px;
margin-left: 45px;
margin-top: 400px;
}
iframe {
margin-left: 35px;
width: 640px;
height: 360px;
}
}
/* Kleinere Aufloesungen */
@media only screen and (max-width:700px) {
body {
background-color: green;
}
iframe {
margin-left: 15px;
width: 480px;
height: 270px;
}
section {
display: block;
width: 500px;
text-align: center;
margin: 20px auto;
color: white;
}
h1 {
color: #242424;
position: relative;
bottom: 55px;
font-size: 1.6em;
margin-right:10px;
text-align:right;
}
.Logos {
padding: 10px;
}
#AKA {
width: 210px;
margin-left: 5px;
}
#AI {
width: 210px;
margin-right: 5px;
float: right;
}
}
/* Hamburger Menue */
#hamicon{
display:block;
width:50px;
height:35px;
opacity:0.5;
cursor: pointer;
margin-left: 20px;
margin-top: -45px;
}
#hamicon>.eins,.zwei,.drei{
width:100%;
height:8px;
border-radius:2px;
display:block;
margin-bottom:10px;
background:#C1DE1D;
}
.eins{
background:#C1DE1D;
}
.zwei{
background:#00FFC6;
}
.drei{
background:#00C3FF;
}
/* Menue */
li {
list-style: none;
}
a {
display: block;
padding: 5px;
text-decoration:none;
color: white;
font-size:1em;
font-weight: bold;
align-items: center;
}
nav ul li {
flex: 1;
padding: 5px;
opacity: 0.5;
cursor: pointer;
}
nav ul li:hover {
opacity: 1;
}
nav a {
font-size: 1.3em;
}
/* Kleinere Aufloesungen */
@media only screen and (max-width:480px) {
body {
background-color: black;
}
iframe {
margin-left: 5px;
width: 320px;
height: 188px;
}
section {
display: block;
width: 320px;
text-align: center;
margin: 20px auto;
color: white;
}
h1 {
color: #242424;
position: relative;
bottom: 43px;
font-size: 1.2em;
margin-right:5px;
text-align:right;
}
.Logos {
padding: 10px;
background-color: black;
}
#AKA {
width: 160px;
margin-left: 0px;
}
#AI {
width: 160px;
margin-right: 0px;
float: right;
}
/* Hamburger Menue */
#hamicon{
display:block;
width:40px;
height:25px;
opacity:0.5;
cursor:pointer;
margin-left: 15px;
margin-top: -35px;
}
#hamicon>.eins,.zwei,.drei{
width:100%;
height:5px;
border-radius:2px;
display:block;
margin-bottom:8px;
background:#C1DE1D;
}
.eins{
background:#C1DE1D;
}
.zwei{
background:#00FFC6;
}
.drei{
background:#00C3FF;
}