nicht angemeldet
Hallo,
und hier noch mal eine Testdatei, bei der die Höhe der Container durch ihren Inhalt bestimmt wird.
Wenn du dir die Datei so wie sie ist in verschiedenen Browsern anschaust sollte dir bei einem der "Standardbrowser" eine unterschiedliche Darstellung auffallen.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>01</title>
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
}
/*Grundeinstellungen für diese Seite*/
@media all {
a {
color: black;
text-decoration: none;
outline: none;
display: block;
}
a:visited {
color: black;
}
}
/*Spezielle Einstellungen*/
@media all {
body {
border: 5px solid;
}
body > * {
padding: 0.5rem;
border: 2px solid;
border-radius: 0.5rem;
margin: 0.5rem;
}
nav {
}
section {
}
aside {
}
}
/*Farben*/
@media all {
html {
}
body {
border-color: orange;
}
body > * {
border-color: silver;
}
nav {
/*background-color: red;*/
}
section {
/*background-color: aqua;*/
}
aside {
/*background-color: yellow;*/
}
}
/*Flexbox Grundlayout*/
@media all {
body {
display: flex;
align-items: stretch;
align-items: flex-start;
align-items: baseline;
align-items: center;
}
nav {
flex-basis: 20%;
}
section {
flex-basis: 60%;
}
aside {
flex-basis: 20%;
}
}
/*Spezielle Höhenangaben*/
@media all {
body {
min-height: 100vh;
}
nav {
/*height: 80px;*/
}
aside {
/*height: 50px;*/
}
section {
/*height: 150px;*/
}
section {
/*min-height: 100px;*/
}
}
/* Vorlage zum Kopieren für Media Queries */
@media only screen and (max-width: 0px) {
}
</style>
</head>
<body>
<nav>
<h2>nav</h2>
<a href="#">Bugatti</a>
<a href="#">VW</a>
<a href="#">Audi</a>
<a href="#">Porsche</a>
<a href="#">Ford</a>
</nav>
<section>
<h2>section</h2>
<h1>Autobahnwahn</h1>
<p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool. Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft.</p>
<p>Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen. Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter.</p>
</section>
<aside>
<h2>aside</h2>
<p>Hier stehen unwichtige Infos.</p>
</aside>
</body>
</html>
Das sollte als Praxisfutter erst mal einige Zeit reichen.
Gruss
MrMurphy
Auge
Gunnar Bittersmann
Der Martin
Camping_RIDER