Flexbox/Höhe?
franzsen
1 0 0 franzsen
0 0 
Matthias Apsel
0 franzsen
0 
Camping_RIDER
0 
Auge
Flexbox/Höhe?
franzsen
Flexbox habe ich ja soweit einmal verstanden und angewendet (sh. Musterseite im Web). Trotzdem tauchen immer wieder neue Fragen auf da ich ja jedes Element (u. CSS) versuche auf verschiedene Weise auszuprobieren um die verschiedenen Wirkungsweisen zu erlernen.
Die Flexbox bekommt automatisch die Höhe durch den Inhalt in den items bzw. der Höhe die man den items zuweist. Auch eine Breite kann ich den items geben. Wenn ich nun der Flexbox eine bestimmte Größe gebe kann ich die items senkrecht und waagrecht verschieben. Sobald ich aber im Beispiel dem "header" eine Breite von 100% gebe und einen wrap dadurch erzwinge geschieht es, daß zwischen dem header und den zwei anderen ein Leerraum entsteht. Woher und wodurch kommt dieser? Oder übersehe ich beim code etwas?
<!doctype html>
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 800px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
outline: 1px solid;
}
/*************/
header {
height: 80px;
<!--width: 100%;-->
background-color: red;
outline: 1px solid;
}
nav {
margin-top: 0;
width: 400px;
background-color: green;
outline: 1px solid;
}
footer {
width: 400px;
background-color: blue;
outline: 1px solid;
}
</style>
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
<p>Navigator</p>
<p>Navigator</p>
<p>Navigator</p>
<p>Navigator</p>
</nav>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Die Überlegung ist, den "header" in die Flexbox miteinzubeziehen aber er soll an oberster Stelle zu stehen kommen. Das gleiche sollte mit dem "footer" passieren.
Sinnvoller scheint mir den header und footer nicht miteinzubeziehen, wodurch sie automatisch an den Anfang bzw. Ende kommen.
--
LG Franz
LG Franz
-
Hallo
Die Überlegung ist, den "header" in die Flexbox miteinzubeziehen aber er soll an oberster Stelle zu stehen kommen. Das gleiche sollte mit dem "footer" passieren.
Sinnvoller scheint mir den header und footer nicht miteinzubeziehen, wodurch sie automatisch an den Anfang bzw. Ende kommen.Das verstehe ich nicht. Meinst du eventuell einen "Sticky Footer"?
Woher und wodurch kommt dieser?
Durch das "Flex" von Flexbox, also dem flexiblen Verhalten.
Das ist zwar vorgegeben, aber für unerfahrene Nutzer nicht unbedingt nachvollziehbar.
In deinem Beispiel passiert folgendes:
Du gibst dem body eine feste Höhe. Die drei innenliegenden Container stehen nebeneinander und füllen diese Höhe nicht komplett aus, es entsteht Leerraum. Entscheidend ist in deinem Beispiel der Leeraum unter dem höchsten der drei Container.
Wenn der header 100% breit wird müssen die beiden anderen Container in die nächste Zeile rutschen.
Im Flexboxmodell wird in diesem Fall der Leerraum zwischen den beiden jetzt vorhandenen Zeilen aufgeteilt. Und zwar gleichmäßig in Differenz der beiden höchsten Boxen jeder Zeile.
Bei drei Zeilen würde der ursprüngliche Leerraum entsprechend gedrittelt werden. Und so weiter.
Gruss
MrMurphy
-
Hallo
Die Überlegung ist, den "header" in die Flexbox miteinzubeziehen aber er soll an oberster Stelle zu stehen kommen. Das gleiche sollte mit dem "footer" passieren.
Sinnvoller scheint mir den header und footer nicht miteinzubeziehen, wodurch sie automatisch an den Anfang bzw. Ende kommen.Das verstehe ich nicht. Meinst du eventuell einen "Sticky Footer"?
Nein. Mein Fehler war alle items in eine Flexbox zu legen. Inzwischen habe ich das so gelöst, daß ich eine verschachtelte Flexbox gestalte (header, Inhalt, footer) und den Inhalt wiederum als Flexbox (Navigation, Section). Somit habe ich weniger Probleme.
Woher und wodurch kommt dieser?
Durch das "Flex" von Flexbox, also dem flexiblen Verhalten.
Das ist zwar vorgegeben, aber für unerfahrene Nutzer nicht unbedingt nachvollziehbar.
In deinem Beispiel passiert folgendes:
Du gibst dem body eine feste Höhe. Die drei innenliegenden Container stehen nebeneinander und füllen diese Höhe nicht komplett aus, es entsteht Leerraum. Entscheidend ist in deinem Beispiel der Leeraum unter dem höchsten der drei Container.
Wenn der header 100% breit wird müssen die beiden anderen Container in die nächste Zeile rutschen.
Genau das tun sie ja nicht sondern es ist ein Leerraum zwischen header und restlichen items. Ich hatte ja in anderen Fällen auch der Flexbox eine feste Höhe bzw. Breite gegeben und mit "space-between" wurde der Leerraum aufgeteilt. Wenn ich die Höhe bei Body entferne dann fügen sich die nächsten items an den header an aber einen Zwischenraum wie bei justify: space-between bzw. ein align-items: flex-end geht dann ja nicht da es nur die niedrigeren items verschiebt; das höchste item bleibt am header kleben. Bleibt dann nur ein margin um zwischen den vertikalen items einen Leerraum zu schaffen.
Im Flexboxmodell wird in diesem Fall der Leerraum zwischen den beiden jetzt vorhandenen Zeilen aufgeteilt. Und zwar gleichmäßig in Differenz der beiden höchsten Boxen jeder Zeile.
Bei drei Zeilen würde der ursprüngliche Leerraum entsprechend gedrittelt werden. Und so weiter.
Genau das ist ja nicht erwünscht. Bei "direction: row" und einer fixen Breite der Flexbox ordnen sich die items automatisch am Anfang nacheinander an. Mit "justify: space-around" wird der restliche Leerraum aufgeteilt. Mein Denkfehler scheint hier einerseits die Anordnung "row" und gleichzeitig durch den Zeilenumbruch "column" zu sein. Bei vertikaler Verteilung muß man anscheinend etwas umdenken.
LG Franz
-
Hallo
Die Überlegung ist, den "header" in die Flexbox miteinzubeziehen aber er soll an oberster Stelle zu stehen kommen. Das gleiche sollte mit dem "footer" passieren.
Sinnvoller scheint mir den header und footer nicht miteinzubeziehen, wodurch sie automatisch an den Anfang bzw. Ende kommen.Das verstehe ich nicht. Meinst du eventuell einen "Sticky Footer"?
Hier habe ich ein Beispiel gefunden:
Der obere Teil verschwindet und das Menü bleibt dann oben fixiert wenn man blättert. Ebenso verändert sich das Menü wenn man die Breite verkleinert. Das ist wahrscheinlich für Mobile gedacht.
Gibt es da für diese Technik eine Anleitung?--
LG Franz-
Hallo,
dafür benötigst du JavaScript, allein mit HTML und CSS läßt sich eine zunächst mitscrollende und dann am oberen Fensterrand fixierte Navigation nicht erstellen.
Dafür gibt es zur Zeit nur für den Firefox eine Insellösung.
So eine fixierte Navigation ist nur bei sehr langen Seiten sinnvoll. Ansonsten braucht die außer weltfremden Webseitenerstellern niemand wirklich.
Insgesamt ist die von dir verlinkte Seite aber eher ein Beispiel wie man es nicht machen soll.
Bei blockiertem JavaScript ist die eingeklappte Navigation nicht mehr nutzbar.
Der fixierte Bereich ist viel zu hoch und nimmt damit zu viel Platz weg. Wenn so eine Fixierung not tut, dann sollte der fixierte Bereich nur eine ganz geringe Höhe haben.
Zumindest bei mir springt der fixierte Bereich beim Scrollen vor der endgültigen Fixierung rauf- und runter, das nervt.
Und noch vieles mehr.
Gruss
MrMurphy
-
Hallo MrMurphy1,
dafür benötigst du JavaScript, allein mit HTML und CSS läßt sich eine zunächst mitscrollende und dann am oberen Fensterrand fixierte Navigation nicht erstellen.
Ja, leider.
Dafür gibt es zur Zeit nur für den Firefox eine Insellösung.
Ja, leider. (und Safari)
So eine fixierte Navigation ist nur bei sehr langen Seiten sinnvoll. Ansonsten braucht die außer weltfremden Webseitenerstellern niemand wirklich.
Ein Beispiel von mir http://brückentage.info/2016/brueckentage-deutschland-2016.html
Auf der Seite, wo ich das Vorgehen erläutert habe, wurde quasi über Nacht ;-) die Unterstützung von SSI eingestellt. Muss ich bei Gelegenheit mal umbauen. (http://selfhtml.apsel-mv.de/scroll/scroll.html) Ist natürlich blöd, wenn die Navigation nicht zu sehen ist.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Hallo Matthias Apsel,
Muss ich bei Gelegenheit mal umbauen. (http://selfhtml.apsel-mv.de/scroll/scroll.html) Ist natürlich blöd, wenn die Navigation nicht zu sehen ist.
Repariert.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) -
Aloha ;)
So eine fixierte Navigation ist nur bei sehr langen Seiten sinnvoll. Ansonsten braucht die außer weltfremden Webseitenerstellern niemand wirklich.
Ein Beispiel von mir http://brückentage.info/2016/brueckentage-deutschland-2016.html
Kein gutes Beispiel - imho. (Vielleicht eher ein Beispiel dafür, dass eine Verwendung nicht so sinnvoll ist.) Die Navigation wird erst nach einem gewissen Scrollen fixiert (was ja der Sinn der Aufgabe war, oder?), aber dadurch entsteht ein sehr unschönes, störendes "Springen" dieses Seitenteils.
Ein besseres Beispiel ist da vielleicht die Seite der Süddeutschen Zeitung (verlinkt habe ich einen beliebigen Artikel). Hier ist (wenn ich den TO richtig verstanden habe) ein Header umgesetzt, der zunächst mitscrollt und dann sticky bleibt (wenngleich hier @Gunnar Bittersmanns an anderer Stelle vorgebrachte Kritik teilweise zutrifft - hätte man vielleicht im Detail auch besser lösen können), sowie die
social media buttons, die fixiert "mitgleiten" - aber nur für die Höhe des Artikels (auch bei denen treten leider teils ungünstige Effekte auf).Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[-
Hallo Camping_RIDER,
Kein gutes Beispiel - imho. (Vielleicht eher ein Beispiel dafür, dass eine Verwendung nicht so sinnvoll ist.) Die Navigation wird erst nach einem gewissen Scrollen fixiert (was ja der Sinn der Aufgabe war, oder?), aber dadurch entsteht ein sehr unschönes, störendes "Springen" dieses Seitenteils.
Das Springen entsteht weil zusätzlich zum Fixieren auch die Höhe auf die Bildschirmhöhe gebracht wird und die Navigation so für sich selbst scrollbar wird.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Aloha ;)
Kein gutes Beispiel - imho. (Vielleicht eher ein Beispiel dafür, dass eine Verwendung nicht so sinnvoll ist.) Die Navigation wird erst nach einem gewissen Scrollen fixiert (was ja der Sinn der Aufgabe war, oder?), aber dadurch entsteht ein sehr unschönes, störendes "Springen" dieses Seitenteils.
Das Springen entsteht weil zusätzlich zum Fixieren auch die Höhe auf die Bildschirmhöhe gebracht wird und die Navigation so für sich selbst scrollbar wird.
Nein, nicht nur. Dadurch, dass die Fixierung erst entsteht, wenn ich ein ganzes Stück runtergescrollt habe (also auch, wenn die Navigation schon ein ganzes Stück runtergescrollt ist), springt der Inhalt der Navigation nach oben, wenn die Fixierung einsetzt (da dann an meinem oberen Bildschirmrand wieder der Anfang der Navigation zu sehen ist, und nicht die Mitte der Navigation wie direkt vor dem Sprung). Im Vergleich dazu ist die Veränderung der Höhe nur marginal störend.
Ein sinnvoller Effekt kommt (allerdings nur bezogen auf meine spezifische Bildschirmhöhe) nur dann zustande, wenn ich zunächst die Navigation im scrollbaren Zustand ganz nach unten gescrollt habe - dann ist der Inhalts-Sprung unmerklich. Daher weiß ich auch, dass die Verstörung am Scrollen des Inhalts und nicht an der Größenänderung liegt ;)
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[-
Hallo Camping_RIDER,
Vielleicht reden wir auch an einander vorbei.
Meine Überlegungen:
Der Effekt wird unter zwei Bedingungen ausgelöst, 1. der Inhalt ist länger als die Navigation, 2. das untere Ende der Navigation erreicht den unteren Rand des Viewports. Das kommt praktisch nur für die Seiten, die sich mit den Brückentagen beschäftigen, infrage, nicht für beispielhaft die Ferienkalender. Ich unterstelle, dass ein Besucher, der auf den Brückentagsseiten weit nach unten scrollt, sich für die Brückentage interessiert und biete ihm deshalb die Links zu den Brückentagsseiten bevorzugt an. Deshalb scrolle ich also die Navigation an den Anfang. Zudem erschwere ich nicht das Erreichen der anderen Links, etwa zu den Ferienkalendern, was jedoch geschehen würde, wenn ich auf das scrollbar machen verzichten würde. Insgesamt ist die Navigation etwas überladen und die Seite sieht auch etwas angestaubt aus, wenn du also zündende Ideen hast, immer her damit.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Aloha ;)
Meine Überlegungen:
Der Effekt wird unter zwei Bedingungen ausgelöst, 1. der Inhalt ist länger als die Navigation, 2. das untere Ende der Navigation erreicht den unteren Rand des Viewports. Das kommt praktisch nur für die Seiten, die sich mit den Brückentagen beschäftigen, infrage, nicht für beispielhaft die Ferienkalender.
Das ist soweit klar - und auch vollkommen in Ordnung.
Ich unterstelle, dass ein Besucher, der auf den Brückentagsseiten weit nach unten scrollt, sich für die Brückentage interessiert und biete ihm deshalb die Links zu den Brückentagsseiten bevorzugt an. Deshalb scrolle ich also die Navigation an den Anfang.
Das scrollen passiert aber - und das ist meine Kritik - zumindest bei mir erst dann, wenn ich schon nach unten gescrollt habe. Und genau dadurch kommt dieses Springen zustande, das ich kritisiere. Es geht nur darum, dass - für den User ohne sichtbaren Grund - auf einmal etwas geschieht, womit der User nicht rechnet (der User scrollt den gesamten Viewport nach unten und an einem bestimmten Punkt geschieht was mit der Navigation). Das wirkt für mich hektisch.
Zudem erschwere ich nicht das Erreichen der anderen Links, etwa zu den Ferienkalendern, was jedoch geschehen würde, wenn ich auf das scrollbar machen verzichten würde. Insgesamt ist die Navigation etwas überladen und die Seite sieht auch etwas angestaubt aus, wenn du also zündende Ideen hast, immer her damit.
Warum an der Stelle überhaupt eine fixierte Navigation? Ich sehe keinen rechten Gewinn dadurch, und eben den negativen Aspekt des hektischen Eindrucks. Aber abgesehen davon:
Im Moment geht die Navigation bei mir erst auf fixierten Zustand über, sobald ich die Seite bis "Jahreswechsel + Heilige Drei Könige" heruntergescrollt habe. Wenn, dann sollte die Navigation (um visuelle Sprünge zu vermeiden) aber dann fixiert werden, sobald sie oben an den Rand des Viewport trifft - also sehr viel früher, sobald der header aus dem Viewport verschwunden ist. Dann wird durch die Fixierung auch kein sichtbarer, hektischer Sprung ausgelöst. Also genau so, wie es auf der zweiten Seite deiner Erklärung zur Technik (http://selfhtml.apsel-mv.de/scroll/scroll-02.html) auch der Fall ist (nur dass da die Scrollbalken fehlen, um auf eine überlange Navigation zugreifen zu können). Es liegt also nicht an der grundsätzlichen Idee, nur ist irgendwas an der Umsetzung bei der Brückentags-Seite mEn schiefgelaufen.
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
-
-
-
-
-
Insgesamt ist die von dir verlinkte Seite aber eher ein Beispiel wie man es nicht machen soll.
Was genau ist der Fehler? Die Farbgestaltung, etc. ist natürlich nicht das non plus ultra und wird sich noch ändern. Welchen Vorschlag würdest Du machen?
--
LG Franz-
Aloha ;)
Insgesamt ist die von dir verlinkte Seite aber eher ein Beispiel wie man es nicht machen soll.
Was genau ist der Fehler? Die Farbgestaltung, etc. ist natürlich nicht das non plus ultra und wird sich noch ändern. Welchen Vorschlag würdest Du machen?
Gemeint war die von Matthias verlinkte Seite und mir gings nicht um die Farbgestaltung oder anderes, sondern lediglich um die teil-fixierte Navigation, die bei mir springt. Änderungsvorschläge dazu - siehe die Diskussion mit Matthias zu dem Thema.
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller Erreichbar manchmal im Self-TS (ts.selfhtml.org) oder sonst - wenn online - auf dem eigenen TeamSpeak-Server (fritz.campingrider.de) oder unter: # Facebook # Twitter # Steam # YouTube # Self-Wiki # ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[-
Hallo
Insgesamt ist die von dir verlinkte Seite aber eher ein Beispiel wie man es nicht machen soll.
Was genau ist der Fehler? Die Farbgestaltung, etc. ist natürlich nicht das non plus ultra und wird sich noch ändern. Welchen Vorschlag würdest Du machen?
Gemeint war die von Matthias verlinkte Seite
Da franzsen MrMurphy1 antwortete, der seinerseits auf eines von franzsens Postings antwortete, vermute ich mal, dass die nicht nachahmenswerte Seite nicht die von Matthias sondern die von franzsen verlinkte Devolo-Seite ist.
Und die ist schon allein deswegen Murks, weil sie die Bedienung von Teilen der Navigation von JavaScript abhängig macht. Das gilt für die Klappmenüpunkte „Geschäftskunden“, „Über devolo“ und „Presse“ sowie den Rest des Menüs, wenn der sich bei schmaleren Viewports hinter dem Burger verbirgt.
Tschö, Auge
PS: @Christian Kruse: Seit wann sind denn hier im Forum groß geschriebene Tags (konkret „WebGL“) erlaubt? Sollten die nicht samt und sonders klein geschrieben werden?
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“-
Hallo Auge,
PS: @Christian Kruse: Seit wann sind denn hier im Forum groß geschriebene Tags (konkret „WebGL“) erlaubt?
Seit der @Matthias Apsel darum gebeten hat. Ich hatte sogar eine Validation drin, die das sichergestellt hat.
Sollten die nicht samt und sonders klein geschrieben werden?
IMHO ja.
LG,
CK-
Hallo Christian Kruse,
PS: @Christian Kruse: Seit wann sind denn hier im Forum groß geschriebene Tags (konkret „WebGL“) erlaubt?
Seit der @Matthias Apsel darum gebeten hat. Ich hatte sogar eine Validation drin, die das sichergestellt hat.
Ich kann mich dran erinnern, aber auch an deine Antwort, dass die
[…] samt und sonders klein geschrieben werden [sollten]
Insofern find ich das zwar gut, aber das ist doch tatsächlich an mir vorbeigegangen. (https://github.com/ckruse/cforum/issues/229)
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
-
-
-
-
-
-
-