nicht angemeldet
Hallo Gunnar
Vielen Dank für die Antwort! - Ich habe mich auf eure Bemühungen hin (auch nochmal Dank an Matthias!) irgendwie moralisch verpflichtet gefühlt, es doch noch einmal zu versuchen, aber obwohl durchaus Fortschritte zu verzeichnen sind, ist mir die Umsetzung leider noch immer nicht (vollständig) gelungen.
Ich habe dein Beispiel, welches ziemlich exakt meiner Vorstellung entspricht (Chapeau!), fast 1:1 übernommen, aber aus irgendeinem Grund schaut es bei mir nicht ganz so aus wie bei dir. :-/
Vorweg: Ich habe mich entschlossen, den gesamten Inhalt doch in ein <div class="wrap"> einzuwickeln und als Bezugsrahmen nicht <body> zu nehmen, da ich - sofern Browserunterstützung besteht - den Hintergrund der Seite mittels WebGL gestalten (und animieren) will, also mit einem <canvas> - und das sollte das Browserfenster nach Möglichkeit vollständig ausfüllen (body > canvas { width: 100%; height: 100%; }).
Lange Rede, kurzer Sinn, meine leider nicht richtig funktionierende Adaption sieht so aus:
<body>
<div class="wrap">
<header class="top">
</header>
<nav>
</nav>
<main role="main">
</main>
<footer class="bottom">
</footer>
</div>
</body>
Nebenbei: <header> und <footer> sind Teil einer Klasse, da ich innerhalb meiner <article> noch mehr Elemente von der Sorte habe und ich den CSS-Code dadurch lesbarer finde...
body {
padding: 0 5%; /* aus oben genannten Gründen nicht optimal, aber zu Testzwecken... */
}
.wrap {
margin: auto;
max-width: 42em;
}
@media (min-width: 30em) {
.wrap {
display: flex;
flex-wrap: wrap;
}
.top {
order: 1;
width: 100%;
}
nav {
flex-grow: 1;
max-width: 16em;
order: 2;
}
main {
flex-grow: 2;
order: 3;
}
.bottom {
order: 4;
width: 100%;
}
}
Das sieht im Ergebnis fast aus wie in deinem live-Beispiel, mit dem einzigen Unterschied, dass <nav> und <main> leider immer untereinander angezeigt werden, und nicht wie in deinem Beispiel und wie von mir gewünscht nebeneinander, egal wie breit ich das Browserfenster ziehe!
EDIT
Ich habe auch nochmal deinen Beispiel-Code aus diesem Post ausprobiert, also...
body {
padding: 0 5%;
}
.wrap {
margin: auto;
max-width: 42em;
display: flex;
flex-wrap: wrap;
}
.top, nav, main, .bottom {
flex: 1 100%;
}
.top {order: 1}
nav {order: 2}
main {order: 3}
.bottom {order: 4}
@media (min-width: 30em) {
nav {flex: 4 auto}
main {flex: 1 auto}
}
...aber das hat die Sache eher verschlimmbessert, insoweit, als zwar immernoch <nav> und <main> untereinander dargestellt werden, jetzt aber auch noch die Breite von <nav> den ganzen Inhaltsbereich ausfüllt, während das bei deinem ersten Beispiel noch funktioniert hatte.
Was mache ich falsch?
PS: Und falls du noch eine Idee hast, wie ich das gewünschte Layout mit html, body { margin: 0; padding: 0; } vereinbaren kann, so dass keine selbst- oder durch Browserdefaults verursachten Leerräume entstehen und das <canvas> das ganze Browserfenster ausfüllen kann, dann wäre das wirklich fabelhaft!
Nochmals Gruß und Dank,
var
Matthias Scharwies
Gunnar Bittersmann
Matthias Apsel
Tabellenkalk