Ich habe mal wieder eine Frage, da ich langsam wahnsinnig werde...
Ich habe eine Oberfläche mit Hamburger-Button erstellt. Der Hintergrund ist schwarz (bzw. in einer anderen Version grün). Der Hamburger-Btn hat dann die Farbe #fff zugewiesen bekommen. Im Firefox, Edge und Chrome auf dem PC sieht alles aus wie gewünscht. Nur auf dem Handy (S9) mit chromeBrowser ist der Button grau (biogli.de und oglialoro.de, letzeres nur eine "OberflächenStudie").
Ich habe alles versucht, Farben ganz raus, bis auf Hintergrund und Burger usw. Ich kann auch die Farbe verändern. z.B. auf "red". In allen Browsern rot, nur auf dem Handy grau. Ich verstehe es nicht... Bitte HILFE
Anbei die Html- und CSS-Datei:
<!doctype html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<!-- CSS-Datei: -->
<link href="StyleSheet_biogliFlex.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Teko:600,700" rel="stylesheet">
<title>Home of Marco Oglialoro</title>
</head>
<body bgcolor="#000">
<header class="wrapper">
<label for="menu-toggle" class="label-toggle"><span>&WCF_AMPERSAND☰</span></label>
<h1 class="titel"><a href="index.php">MARCO OGLIALORO</a></h1>
</header>
<nav class="HauptNav">
<input type="checkbox" id="menu-toggle" onclick="">
<nav class="wrapper">
<ul>
<li><a href="WebDesign.php">WEB-DESIGN</a></li>
<li><a href="Tennis.php">TENNIS</a></li>
<li><a href="Rezepte.php">REZEPTE</a></li>
<li><a href="Fotos.php">FOTOS</a></li>
<li><a href="phpBB_01/index.php">BIO-FORUM</a></li>
<li></li>
</ul>
</nav>
</nav>
<aside id="aside_nav">
aside für Navigationselemente
</aside>
<main>
main Content
</main>
<aside>
aside second content
</aside>
<footer>
<p>Copyright Marco Oglialoro 2018
<ul>
<li><a href="Downloads.php">DOWNLOADS</a></li>
<li><a href="Kontakt%20und%20Disclaimer.php">KONTAKT UND DISCLAIMER</a></li>
</ul>
</footer>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------
*{
padding: 0;
margin: 0;
}
body { /* hier der oberste Flex-Container */
margin: 0 auto; /*Zentrieren der Seite*/
max-width: 80em; /*Feste Breite für den Flex-Container, damit er der Text auf Widescreens nicht
ewig in die Breite gezogen wird (schlecht lesbar)*/
display: -webkit-flex; /*InternetExplorer-Patch immer zuerst, wird dann von normal überschrieben*/
display: flex; /*dadurch werden alle direkten Kind Elemente zu FlexItems
Achtung, Divs nicht in 2 Ebenen verschachteln, da sonst kein Flex mehr*/
-webkit-flex-flow: row wrap; /*InternetExplorer-Patch*/
flex-flow: row wrap; /*Wenn die Elemente die verfügbare Breite überschreiten werden
Sie umgebrochen in die nächste Zeile*/
}
/* ==============================================================================================
mobileFirst alles was hier festgelegt wird gilt erstmal auch für die andern Displays (es
sei denn es wird ueberschrieben================================================================*/
header, nav, main, aside, footer {
font-family: 'Teko', calibri, sans-serif;
padding: 0.75em;
margin: 0.75em;
-webkit-flex: 1 100%; /*InternetExplorer-Patch*/
flex: 1 100%; /*flex 1 alle bekommen die gleiche Breite, 100% des gesamten Body wird genutzt*/
}
main, aside, footer {
border-radius: 0 0.5em 0.5em;
border: 1px solid;
}
header { /*Header selbst zum Flex-Container, um anordnen zu können*/
display:flex;
flex-flow: row nowrap; /*damit Hamburger, Titel und Logo nebeneinander sind und NICHT umgebrochen werden*/
border: none;
}
header * {
flex: 1 1 0%;
}
nav {
flex: 1 1 100%;
margin: 0;
padding: 0;
border: none;
}
nav ul {
margin: 0;
padding: 0;
display: flex; /* wieder ein Flex-Container */
flex-direction: column;
}
nav li {
list-style-type:none;
margin: 1.3em; /*muss sein, sonst im Internet-Explorer Elemente ineinander geschoben*/
padding; 0;
flex: 1 1 100%;
border-top: solid 1px silver;
}
nav a {
display:inline-block;
width: 95%;
margin: 0;
padding: 1em 0 1em 0; /*um besser breite Schaltflächen zum Klicken zu haben*/
text-align: center;
text-decoration: none;
}
/* ==Toggle Navigation unsichtbar auf kleinem Displays biss die Checkbox gecheckt wird ======*/
nav ul {
visibility: hidden;
height: 0;
}
nav #menu-toggle:checked ~ nav ul {
visibility: visible;
height: 100%;
}
h1.titel {
font-size: 1.3em;
margin-top: .7em;
}
h1.titel a {
text-decoration:none;
}
header .label-toggle {
font-size: 2em;
flex: 0 0 2em; /*Feste Breite des Hamburger-Toggles seiner em, damit der Titel max. Platz hat*/
margin-top: .15em;
}
nav #menu-toggle {
visibility: hidden;
}
/* ==footer =================================================================================*/
footer {
display: flex;
flex-flow: row wrap;
}
footer * {
flex: 1 1 0%;
justify-content: space-between;
}
footer p {
text-align: right;
}
footer ul {
margin: 0;
padding: 0;
display: flex; /* wieder ein Flex-Container */
flex-direction: column;
}
footer li {
list-style-type:none;
margin: 1.3em; /*muss sein, sonst im Internet-Explorer Elemente ineinander geschoben*/
padding; 0;
flex: 1 1 100%;
}
footer a {
display:inline-block;
width: 95%;
margin: 0;
padding: .5; /*um besser breite Schaltflächen zum Klicken zu haben*/
text-align: right;
text-decoration: none;
font-size: .9em;
}
/* ==mittlereDisplays überschreibt moblieFirst bei Viewport >= 37em==============================
=================================================================================================*/
@media all and (min-width: 49em) {
h1.titel {
padding-left: 1.5em;
margin-right: 2.2em;
}
nav.HauptNav {
border-top: solid silver .5px;
border-bottom: solid silver .5px;
margin-bottom: 1em;
}
nav ul {
flex-direction: row;
visibility: visible; /*ab dieser Größe Navigation immer sichtbar ...*/
height: 100%;
}
header .label-toggle { /* ... und der Hamburger-Toggle-Button immer weg */
visibility: hidden;
font-size: 0em;
flex: 0 0 0em; /*Feste Breite des Hamburger-Toggles seiner em, damit der Titel max. Platz hat*/
}
nav li {
margin: 0 0 10px 0;
flex: 1 1 0%;
border: none;
}
nav a {
padding: 0; /* damit die Menu-Punkte nicht mehr breit zum tappen sind*/
}
aside{
flex: 1 auto; /* durch auto werden die beiden asides in eine Zeile gesetzt */
}
main {
order: 2;
}
#aside_nav {
flex: 1 auto; /* durch auto werden die beiden asides in eine Zeile gesetzt */
order: 3;
}
aside {
order: 4;
}
footer {
order: 5;
}
}
/* ==grosseDisplays überschreibt moblieFirst bei Viewport >= 50em================================
=================================================================================================*/
@media all and (min-width: 50em) {
main {
order: 3;
flex: 3 1 0%; /*main soll 3x so breit sein wie die asides*/
}
aside {
flex: 1 auto;
}
#aside_nav {
flex: 1 1 0%; /*%-Angabe nötig bei flex-base, da sonst der InternetExplorer spinnt*/
order: 3;
}
}
/* ==Farben ==========================================================================
=====================================================================================
fff weiss
000 schwarz
*/
header {
background: #000;
color: #fff;
}
.label-toggle {
color: #fff;
}
nav {
background-color: transparent;
border-color: white;
}
nav a {
color: #fff;
}
nav a:hover, nav a:focus {
color: gold;
}
h1.titel a {
color: #fff;
}
h1.titel a:hover, h1.titel:focus {
color: gold;
}
main {
border-color: silver;
color: #fff;
}
aside {
background-image: linear-gradient(90deg, #000000, #555555, #000000);
border-color: silver;
color: #fff;
}
footer {
background: #000;
border-color: silver;
color: #fff;
}
footer a {
color: #fff;
}
footer a:hover, nav a:focus {
color: gold;
}
/* ==EndeFarben =======================================================================
=======================================================================================*/
