nicht angemeldet
Hallo in die Runde
Beim Versuch erstmals mit Flexbox zu hantieren stoße ich auf Folgendes:
Textformatierungen mit CSS werden ab einer bestimmten Verkleinerung des Viewports (Smartphone) nicht mehr dargestellt. Dasselbe geschieht mit Bildern in den Flexboxen.
Was mache ich falsch? Habe recht lange gesucht, aber nichts dazu gefunden. Bin jetzt nich so der Crack ... Bin für jede Hilfe dankbar ;)
Hier der Code:
/*flexbox */
body {
background: url(img/hintergrund-wolken.jpg) ;
background-position: left;
background-attachment: fixed;
color: black;
padding-left: 50px;
display:-webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, content, navigation, footer {
border-radius: 0px 0em 0em;
border: 1px solid;
padding: 0px;
margin: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
header {
background: #;
border-color: #d5d5d5;
display:-webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
height: 300px;
padding: 30px;
margin: 0px;
}
header * {
-webkit-flex: 1 1 0;
flex: 1 1 0;
}
header img {
-webkit-flex: 0 0 0px;
flex: 0 0 150px;
margin-right: 30px;
}
header nav {
-webkit-flex: 1 1 80%;
flex: 1 1 80%;
}
nav, nav ul, nav li{
margin: 0;
padding:0;
border:none;
}
nav ul {
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
}
nav li {
list-style-type:none;
margin: 1.3em 0;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
}
nav a {
display:inline-block;
width:95%;
background: #fffbf0;
border: 1px solid #dfac20;
margin: 0;
text-decoration: none;
text-align: center;
}
nav a:hover {
background-color: #dfac20;
}
content {
background: ;
border-color: #df6c20;
padding: 30px;
}
navigation {
display: -webkit-flex;
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
background: ;
border-color: #8db243;
}
footer {
background: ;
border-color: #8a9da8;
display:-webkit-flex;
-webkit-flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
padding: 30px;
}
footer * {
-webkit-flex: 1 1 0;
-webkit-justify-content: space-between;
flex: 1 1 0;
justify-content: space-between;
}
footer p {
text-align:right;
}
/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
header img {
margin-right: 50px;
}
nav ul {
-webkit-flex-direction: row;
flex-direction: row;
}
nav li {
margin: 0 10px;
-webkit-flex: 1 1 0;
flex: 1 1 0;
}
content {
webkit-order: 3;
order: 3;
}
news {
-webkit-flex: 1 auto;
-webkit-order: 3;
flex: 1 auto;
order: 3;
}
navigation {
/* durch auto werden die beiden asides in eine Zeile gesetzt */
-webkit-flex: 1 auto;
-webkit-order: 2;
flex: 1 auto;
order: 2;
}
footer {
webkit-order: 5;
order: 5;
}
}
/* Large screens */
@media all and (min-width: 50em) {
content {
/* Der Content wird breiter */
-webkit-flex: 5 1 0;
-webkit-order: 3;
order: 3;
flex: 5 1 0;
}
navigation {
flex: 1 1 0;
}
#news {
-webkit-flex: 2 1 0;
-webkit-order: 2;
-webkit-align-self: center;
flex: 2 1 0;
order: 2;
align-self: center;
height: 120px;
}
/* Schriften */
#text-logobar {
font-family: Century Gothic, serif, ;
font-weight: normal;
font-style: italic;
font-size: 13px;
color: rgb(230,237,225);
text-align: right;
}
#title-text {
font-family: Century Gothic, serif;
font-weight: normal;
font-size: 1.3em;
font-style: italic;
color: rgb(230,237,225);
}
#main-text-title {
font-family: Century Gothic, serif, ;
font-weight: bold;
font-style: italic;
font-size: 1.1em;
color: rgb(230,237,225);
}
#main-text {
font-family: Century Gothic, serif, ;
font-weight: normal;
font-style: italic;
font-size: 20px;
color: rgb(230,237,225);
}
#zeit-text {
font-family: Century Gothic, serif;
font-weight: bold;
font-style: italic;
font-size: 0.5em;
color: rgb(230,237,225);
}
#disclaimer-text {
font-family: Century Gothic, serif;
font-weight: normal;
font-size: 8px;
color: rgb(209,0.0);
}
/* Navigation */
.myButton {
-moz-box-shadow: -2px 1px 6px 0px #276873;
-webkit-box-shadow: -2px 1px 6px 0px #276873;
box-shadow: -2px 1px 6px 0px #276873;
background-color:rgb(255,191,0);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #29668f;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family: Century Gothic, serif;
font-size:15px;
font-style:italic;
padding:4px 6px;
text-decoration:none;
text-shadow:1px 1px 0px #010a0d;
}
.myButton:hover {
background-color:transparent;
}
.myButton:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link href="flexbox-steering.css" rel="stylesheet" type="text/css" media="screen">
<title>eigenes Flexbox-5</title>
</head>
<body>
<header id="main-text">
so, und hier irgendein Text so,<br><br> und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so,
und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text
</header>
<navigation>
<!-- Start Navigation -->
<a href="index.html" class="myButton"><div id="r6a">Home</div></a>
<!-- Abstandshalter sp1 -->
<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
<a href="ueberuns.html" class="myButton"><div id="r6a">über uns</div></a>
<!-- Abstandshalter sp1 -->
<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
<a href="leistungen.html" class="myButton"><div id="r6a">Leistungen</div></a>
<!-- Abstandshalter sp1 -->
<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
<a href="referenzen.html" class="myButton"><div id="r6a">Referenzen</div></a>
<!-- Abstandshalter sp1 -->
<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
<a href="#.html" class="myButton"><div id="r6a">Navigation</div></a>
<!-- Abstandshalter sp1 -->
<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
<a href="#.html" class="myButton"><div id="r6a">Navigation</div></a>
<!-- Abstandshalter sp1 -->
<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
<a href="impressum.html" class="myButton"><div id="r6a">Impressum</div></a><br>
<!-- Ende Navigation -->
<img src="img/1pix.spacer.gif" height="30" width="30"><br>
<!-- Ende Container Navigation rechts -->
</navigation>
<content>
<span id="main-text-title">Dieses Layout soll flexibel sein
<p>Aber sicher wird das klappen, es fehlen nur noch ein paar Erfahrungen, die ich wohl irgendwo da draussen in der so genannten Widnis finde.
</p>
<p>
Weiterhin kann nicht nur die Größendarstellung,
sondern auch die Reihenfolge der Elemente unabhängig
vom HTML-Code durch CSS festgelegt werden.
</p>
</span>
</content>
<footer>
<a href="http://www.digital-dynamic.es" target="_blank"><div id="zeit-text">another site by digital@dynamic La Palma Canarias</div></a>
<p><div id="zeit-text">© 2016 by digital@dynamic</div></p>
</footer>
</body>
</html>
Gunnar Bittersmann
marctrix