nicht angemeldet
Hallo,
hier der Quelltext für die Testdatei ohne Inhalt. Das body-Element hat zur Kennzeichnung einen deutlichen roten Rahmen und Fensterhöhe. Die einzelnen div haben noch keine Höhenangaben.
Du kannst so zum Beispiel mal die Höhe des body entfernen (auskommentieren) und schauen was passiert.
Die Zahlen im body-Bereich und CSS-Quelltext ( nth-child() ) stimmen überein, so dass eine direkte Zuordnung immer problemlos möglich ist. Die Farbbezeichnungen befinden sich ebenso im body-Bereich und ihm CSS-Quelltext.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
margin: 0;
}
}
/*Grundeinstellungen für diese Seite*/
@media all {
}
/*Spezielle Einstellungen*/
@media all {
body {
border: 3px solid;
}
body > * {
padding: 0.5rem;
border: 1px solid;
border-radius: 0.5rem;
margin: 0.5rem;
}
h2 {
padding: 0.5rem;
margin: 0;
}
}
/*Farben*/
@media all {
html {
}
body {
border-color: red;
}
body > * {
border-color: silver;
}
body > :nth-child(1) {
background-color: blue;
}
body > :nth-child(2) {
background-color: yellow;
}
body > :nth-child(3) {
background-color: orange;
}
body > :nth-child(4) {
background-color: green;
}
body > :nth-child(5) {
background-color: gray;
}
body > :nth-child(6) {
background-color: gold;
}
}
/*Flexbox Grundlayout*/
@media all {
body {
display: flex;
}
body > * {
}
body > :nth-child(1) {
}
body > :nth-child(2) {
}
body > :nth-child(3) {
}
body > :nth-child(4) {
}
body > :nth-child(5) {
}
body > :nth-child(6) {
}
}
/*Spezielle Höhenangaben*/
@media all {
body {
min-height: 100vh;
}
body > * {
}
body > :nth-child(1) {
}
body > :nth-child(2) {
}
body > :nth-child(3) {
}
body > :nth-child(4) {
}
body > :nth-child(5) {
}
body > :nth-child(6) {
}
}
</style>
</head>
<body>
<div>
<h2>1 blue</h2>
</div>
<div>
<h2>2 yellow</h2>
</div>
<div>
<h2>3 orange</h2>
</div>
<div>
<h2>4 green</h2>
</div>
<div>
<h2>5 gray</h2>
</div>
<div>
<h2>6 gold</h2>
</div>
</body>
</html>
Gruss
MrMurphy
Auge
Gunnar Bittersmann
Der Martin
Camping_RIDER