Frage zu frickl-Beispiel

[Kurt]

Hallo!

Ich habe mit dem Beispiel
etwas getestet. Warum hat aber meine Änderung grid-template-columns: 1fr 1fr; in Jsfiddle keine Änderung in der Fußzeile zur Folge?

[Gunnar Bittersmann]

@@Kurt

Warum hat aber meine Änderung grid-template-columns: 1fr 1fr; in Jsfiddle keine Änderung in der Fußzeile zur Folge?

Weil footer wegen grid-column: 1 / -1 über alle Spalten geht.

🖖 Live long and prosper

[Rolf B]

Hallo Kurt,

Gunnar hat es begründet, hier im Wiki steht mehr dazu.

Dumme Frage: Wenn Dich das Nichtändern der Fußzeile gewundert hat - was hattest Du erwartet?

Rolf

[Eric]

Dumme Frage: Wenn Dich das Nichtändern der Fußzeile gewundert hat - was hattest Du erwartet?

Ich hatte gedacht, dass dann Kontakt und © 2021 SELFHTML

in zwei Spalten nebeneinander stehen

[Rolf B]

Hallo Eric,

du musst beachten, welche HTML Elemente am Grid-Layout teilnehmen. Das body-Element ist als display:grid festgelegt, und das bedeutet, dass seine direkten Kind-Elemente die Grid-Items sind^[1].

Das sind:

• header
• aside id="news"
• main
• footer

Dadurch, dass Du grid-template-columns von 1fr 3fr auf 1fr 1fr änderst, verändest Du lediglich das Verhältnis der Spaltenbreiten. Zuerst war es 1:3 (also 25% und 75% der Gesamtbreite), danach war es 1:1 (also jeweils 50% der Gesamtbreite).

WÜRDE der footer nur in einer Grid-Spalte stehen (was er nicht tut, siehe Gunnar), wäre er dadurch breiter oder schmaler geworden. Das hätte aber nichts daran geändert, dass die Copyright-Notiz in einem p Element steht, das als Block-Element auf eine neue Zeile kommt^[2].

Wenn Du "Kontakt" und "© 2021 SELFHTML" nebeneinander haben willst, dann musst Du den Inhalt des footer beeinflussen. Derzeit sind alle Kind-Elemente des Footers float:right und clear:right, d.h. sie landen am rechten Rand, stapeln sich aber nicht nebeneinander auf. Entfernen von clear:right würde sie schon nebeneinander setzen - aber ich würde das nicht tun. Besser wäre ein display:flex auf den footer mit justify-content: end;

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
	display: flex;
	justify-content: end;    /* Flex-Inhalt rechtsbündig */
	column-gap: 1em;         /* Abstand zwischen den Flex-Items */
}

footer * {
    margin: 0;     /* Die Default-Margins von p entfernen */
}

Rolf

---

1. Abgesehen von Manipulationen mit display:contents, die hier zu weit führen würden ↩︎

2. Was man wiederum auf diverse Arten beeinflussen kann, aber das ist hier nicht der Fall ↩︎

[Kurt]

Hallo,

danke für die Unterstützung. Allerdings habe ich festgestellt, dass grid für Halbneulinge gehobenen Alters zu kompliziert ist. Ich möchte mich daher auf flex konzentrieren. Dazu habe ich gleich eine Frage. Ich habe, um flex-content zu verstehen ein

Beispiel

gemacht.

Warum kommen die Zellen mit space-around nicht in eine eigenen Zeile wie die übrigen jeweils 3 Zellen?

[Gunnar Bittersmann]

@@Kurt

Allerdings habe ich festgestellt, dass grid für Halbneulinge gehobenen Alters zu kompliziert ist.

Da gibt es gegenteilige Meinungen: Grid ist einfach. Und ich glaube nicht, dass das nur für Ganzneulinge gilt.

Beispiel

Warum kommen die Zellen mit space-around nicht in eine eigenen Zeile wie die übrigen jeweils 3 Zellen?

Weil sich <div class="flex-container5"> innerhalb von <div class="flex-container4"> befindet. Vermutlich unbeabsichtigt?

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Weil sich <div class="flex-container5"> innerhalb von <div class="flex-container4"> befindet. Vermutlich unbeabsichtigt?

Code vernünftig zu formatieren (einzurücken) hilft, sowas zu entdecken.

JSFiddle bietet mit „Tidy the code with Prettify“ (was sich hinter einem nichtssagenden Icon verbirgt, das nur beim Hovern erschient 😡) eine Möglichkeit, Code automatisiert zu formatieren.

🖖 Live long and prosper

PS: Ich hab bei der Gelegenheit mal unter die Haube geschaut. JSFiddle ist nicht nur schlecht designt (s.o.); die Entwickler haben von HTML keinen blassen Schimmer. Völlig inaccesible. Unacceptable.

[Kurt]

PS: Ich hab bei der Gelegenheit mal unter die Haube geschaut. JSFiddle ist nicht nur schlecht designt (s.o.); die Entwickler haben von HTML keinen blassen Schimmer. Völlig inaccesible. Unacceptable.

Gibt es bessere Alternativen?

[Rolf B]

Hallo Kurt,

wenn DU damit klarkommst, dann nimm es. Ich arbeite seit vielen Jahren damit, bin aber vielleicht auch einfach zu faul, mich an etwas anderes zu gewöhnen.

Alternativ gibt's z.B. codepen.io oder TryIt von W3Schools.

An unserer eigenen Lösung Frickl arbeiten wir noch an Version 2.0, die Version 1 kannst Du im Wiki zum Ausprobieren bei vielen Codebeispielen aufrufen. Wir haben allerdings nicht den Anspruch, eine ernsthafte Konkurrenz zu jsFiddle, Codepen oder TryIt zu sein.

Rolf

[Gunnar Bittersmann]

@@Kurt

Gibt es bessere Alternativen?

Ich nutze CodePen. Und es gibt’s auch Dabblet.

Besonders vorteilhaft – vor allem für CSS: Änderungen sind sofort sichtbar, ohne dass man einen Button „⟳ Run“ drücken muss. (Wenn man das bei JavaScript-Entwicklung nicht so haben möchte, lässt sich das in CodePen einstellen.)

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

das geht in jsFiddle mittlerweile auch...

Rolf

[Gunnar Bittersmann]

@@Rolf B

das geht in jsFiddle mittlerweile auch...

Wenn man’s weiß … Die Option hatte ich in dem überfrachteten UI nicht gefunden. Hinter einem Icon versteckt. So ziemlich jede Anwendung verwendet für Einstellungen ein Zahnrad-Icon. Die Designer von JSFiddle (falls da jemals Designer im Spiel waren) dachten sich, wir sind schlauer als der Rest und machen’s anders. Das ist nicht schlau, sondern das Gegenteil.

JSFiddle ist was für Leute, die Lust haben, diese Plattform erstmal zu erlernen. Hab ich nicht. Ich erwarte von so einer Plattform, dass ich sie intuitiv benutzen kann. JSFiddle versagt darin.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

ich habe jsFiddle immer intuitiv benutzt. Du verlangst, dass das Tool genau so aussieht, wie DU es erwartest.

ICH hingegen breche mir bei Codepen regelmäßig die Finger und meide es deshalb.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Du verlangst, dass das Tool genau so aussieht, wie DU es erwartest.

Quatsch.

Wenn alle Welt ein Zahnrad als Icon für Einstellungen verwendet, sollte man erwarten, das JSFiddle sich auch daran hält.

Erwartungskonformität ist in ISO 9241, Teil 110: Interaktionsprinzipien festgeschrieben; das hat nichts mit persönlichen Vorlieben zu tun.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

na gut, es ist ein Schalter. Was erwartest Du, wenn Du einen Schalter siehst?

Im Wiki habe ich nach dem Makeover einen Schraubendreher und einen Maulschlüssel gekreuzt übereinander als Icon für die Settings verwendet. Warum hast Du das nicht sofort gerügt, wenn es dermaßen ekelhaft falsch ist?

Rolf

[Gunnar Bittersmann]

@@Rolf B

na gut, es ist ein Schalter. Was erwartest Du, wenn Du einen Schalter siehst?

Ich erwarte keinen Schalter als Icon zu sehen. Wenn ich einen sehe, müsste ich erst überlegen, was der wohl bedeuten könnte. Das sollte ich nicht müssen, das ist der Punkt. Don’t make me think!

Im Wiki habe ich nach dem Makeover einen Schraubendreher und einen Maulschlüssel gekreuzt übereinander als Icon für die Settings verwendet. Warum hast Du das nicht sofort gerügt, wenn es dermaßen ekelhaft falsch ist?

Nicht gesehen.

Außerdem: Äpfel und Birnen. Neben Schraubendreher und Maulschlüssel steht deutlich „Einstellungen“. Das ist eine ganz andere Situation als bei JSFiddle.

🖖 Live long and prosper