Problem bei wrapping in flex container

[Christian]

Hallo,

ich habe eine Seite erstellt, bei der abwechselnd einmal links Foto, rechts Text und dann wieder rechts Foto, links Text angeordnet ist. Soweit so gut. Es sieht alles nicht schlecht aus. Allerdings möchte ich, dass ab einer bestimmten Fensterbreite das Bild über den Text "wrapt"/rutscht. Hab das aktuell mit min-width beim Bild gelöst, was aber nicht ideal ist, da ich es variabel halten möchte.

Hier mein Code: https://jsfiddle.net/u1my9xh3/

Hier die Seite, auf der es "richtig" funktioniert: http://bit.ly/2zBoskE

Ab ca. 700px Breite wird das Bild nach oben gesetzt und vergrößert sich dann wieder, ehe es wieder kleiner wird.

Kann mir hier jemand helfen? Hab leider keine Ahnung wie die das gelöst haben…

Danke!

[Matthias Apsel]

Hallo Christian,

Kann mir hier jemand helfen? Hab leider keine Ahnung wie die das gelöst haben…

Die ultrakurze Antwort lautet: Mit mediaqueries

Dein HTML ist fehlerhaft und stark verbesserungswürdig.

<div class="intro block">
	<div class="content">
		<p style="text-align: center;"><h2>Tipps zu eurer</h2><br><h1>Hochzeitsplanung</h1></p>
	</div>
</div>

Überschriften dürfen nicht in Absätzen notiert werden, "Tipps zu eurer" ist garantiert keine Überschrift, du verwendest sie zudem sehr inflationär.

Nicht jedes gruppierende Element sollte ein div sein. section und article existieren.

br-Elemente sind für Zeilenumbrüche in Gedichten gedacht.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian

Hab leider keine Ahnung wie die das gelöst haben…

Grauenhaft. div-Suppe; Inline-Styles, …

Ich kann mir das nicht näher ansehen, dazu müsste ich meinen Würgreiz unterdrücken können.

Ich würde das auf die Art machen.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich würde das auf die Art machen.

Oder doch nicht, sondern auf jene Art: mit Grid.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich würde das auf die Art machen.

Oder doch nicht, sondern auf jene Art: mit Grid.

Oder doch nicht. Wenn man ein Grid will, will man ein Grid. Bitteschön.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

Ich würde das auf die Art machen.

Oder doch nicht, sondern auf jene Art: mit Grid.

Geht bei mir nicht (Win10/Edge 15)

Marc

[Gunnar Bittersmann]

@@marctrix

Oder doch nicht, sondern auf jene Art: mit Grid.

Geht bei mir nicht (Win10/Edge 15)

Geht bei mir problemlos – und bei dir wohl auch! Alle Bilder und Textinhalte werden dargestellt. Do websites need to look exactly the same in every browser?

Wieso eigentlich immer noch Edge 15? Can I use meint, der 16er wäre schon draußen und kann Grid.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Oder doch nicht, sondern auf jene Art: mit Grid.

Geht bei mir nicht (Win10/Edge 15)

Geht bei mir problemlos – und bei dir wohl auch! Alle Bilder und Textinhalte werden dargestellt. Do websites need to look exactly the same in every browser?

Du hast wohl die ursprüngliche Fragestellung ein wenig aus den Augen verloren? Der OP wollte wissen, wie man dafür sorgt, dass die Bilder mal neben, mal über dem Text stehen. Geht bei mir nicht bezog sich auf das hier gestellte Problem. 😉

Und ja, es ist durchaus in Ordnung, wenn Webseiten hier und da unterschiedlich sind. Es ist aber auch in Ordnung, wenn so eine grundlegende Designentscheidung durchgezogen wird. Es verwirrt auch, wenn Webseiten stark unterschiedlich dargestellt werden, wenn man den UA wechselt.

Wieso eigentlich immer noch Edge 15? Can I use meint, der 16er wäre schon draußen und kann Grid.

Ist eine Vorgabe meines Dienstherren und kann von mir nicht beeinflusst werden.

Marc

[Gunnar Bittersmann]

@@marctrix

Du hast wohl die ursprüngliche Fragestellung ein wenig aus den Augen verloren?

Nö …

Der OP wollte wissen, wie man dafür sorgt, dass die Bilder mal neben, mal über dem Text stehen.

Die Antwort auf diese Frage ist: nicht überall.

Es verwirrt auch, wenn Webseiten stark unterschiedlich dargestellt werden, wenn man den UA wechselt.

Ich vergleiche jetzt mal, wie die Webseite auf demselben Gerät in verschiedenen Browsern angezeigt wird. —kein Nutzer, jemals

Wieso eigentlich immer noch Edge 15? Can I use meint, der 16er wäre schon draußen und kann Grid.

Ist eine Vorgabe meines Dienstherren und kann von mir nicht beeinflusst werden.

In meiner VM läuft auch noch der 15er, deshalb die Frage. Ist Can I Use da etwas vorschnell?

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Du hast wohl die ursprüngliche Fragestellung ein wenig aus den Augen verloren?

Nö …

Der OP wollte wissen, wie man dafür sorgt, dass die Bilder mal neben, mal über dem Text stehen.

Die Antwort auf diese Frage ist: nicht überall.

Verstehe ich nicht. Was willst du mir damit sagen?

Es verwirrt auch, wenn Webseiten stark unterschiedlich dargestellt werden, wenn man den UA wechselt.

Ich vergleiche jetzt mal, wie die Webseite auf demselben Gerät in verschiedenen Browsern angezeigt wird. —kein Nutzer, jemals

Wieso gleiches Gerät? Ich habe ein iPhone, ein iPad, einen Mac. Sähe alles gleich aus. Dann gehe ich zur Arbeit und setze mich an einen Win10-PC - und sehe eine Webseite, die so fremd aussieht, dass ich erst mal in der Adressleiste nachschauen muss, ob ich auf selfhtml.de oder selhtml.org gelandet bin…

Viele Nutzer. Dauernd!

Auch wenn es bei anderen Android und Windows sein mag, dafür mag der Wechsel noch häufiger stattfinden, weil es eben kein ChromeOS gibt, auf dem die gewohnten Desktop-Anwendungen laufen

Wieso eigentlich immer noch Edge 15? Can I use meint, der 16er wäre schon draußen und kann Grid.

Ist eine Vorgabe meines Dienstherren und kann von mir nicht beeinflusst werden.

In meiner VM läuft auch noch der 15er, deshalb die Frage. Ist Can I Use da etwas vorschnell?

Wie auch immer. Wird sich bei uns nicht so schnell ändern, fürchte.

Marc

[Gunnar Bittersmann]

@@marctrix

Der OP wollte wissen, wie man dafür sorgt, dass die Bilder mal neben, mal über dem Text stehen.

Die Antwort auf diese Frage ist: nicht überall.

Verstehe ich nicht. Was willst du mir damit sagen?

Dass man mit Stakeholdern am besten von vornherein klärt, dass das Endprodukt überall gut, aber nicht überall gleich aussehen wird.

Und dass „in alten Browsern soll’s aber soundso“ zusätzlichen Aufwand (also zusätzliche Kosten) verursacht, was bedacht werden will, ob sich das lohnt – oder ob gut (s.o.) nicht gut genug ist.

Ich vergleiche jetzt mal, wie die Webseite auf demselben Gerät in verschiedenen Browsern angezeigt wird. —kein Nutzer, jemals

Wieso gleiches Gerät? Ich habe ein iPhone, ein iPad, einen Mac. Sähe alles gleich aus.

Das glaube ich nicht. Auf dem iPhone (zumindest im Hochformat) werden die Bilder nicht links und rechts vom Text, sondern darüber sein.

Dann gehe ich zur Arbeit und setze mich an einen Win10-PC - und sehe eine Webseite, die so fremd aussieht, dass ich erst mal in der Adressleiste nachschauen muss, ob ich auf selfhtml.de oder selhtml.org gelandet bin…

Natürlich sollte eine Website übers corporate design wiedererkannt werden können.

Ob Bilder nun über oder links und rechts vom Text angezeigt werden, gehört wohl nicht dazu.

Und deshalb ist es auch nicht so schlimm, wenn Bilder in alten Desktop-Browsern ohne Grid-Unterstützung so positioniert werden wie auf Smartphones auch.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Der OP wollte wissen, wie man dafür sorgt, dass die Bilder mal neben, mal über dem Text stehen.

Die Antwort auf diese Frage ist: nicht überall.

Verstehe ich nicht. Was willst du mir damit sagen?

Das man mit Stakeholdern am besten von vornherein klärt, dass das Endprodukt überall gut, aber nicht überall gleich aussehen wird.

Wie immer in solchen Diskussionen, drückst du dich um die Lösung des eigentlichen Problems. Du sagst: „Es“ geht mit Grid. Wobei „es“ — also das, was der Fragensteller wollte — klar beschrieben ist. Wenn ich sage „es“ geht nicht (in einem ziemlich aktuellen Browser, immerhin Standard-Browser des weltweit meistverbreiteten Betriebssystems), erzählst du was von veralteten Browsern, nicht schlimm usw.

Mal abgesehen davon, dass ich dir in vielerlei Hinsicht recht gebe: Die Frage war bereits beantwortet: „mit media-queries“

Der Aufwand zur Lösung des konkreten Problems beträgt wie viele Minuten? — Wieso kommst du dann mit Kosten für Stakeholdern und anderen grundsätzlichen Problemen? — Das ist doch hier vollkommen unnötig.

Ich brauche 1 Minute oder so für das hier

figure img {
 width: 100%;
 height: auto;
}

figure {
 width: 100%;
}

@media screen and (min-width: 40em) {
  figure {
    float: left;
    width: whatever;
  }
}

Allein Dein Blick in caniuse hat schon mehr als die Hälfte der Entwicklungszeit verschlungen…

Und als Ergebnis kommt dann eine Lösung, die keineswegs schneller umsetzbar ist, aber in weniger Browsern das gewünschte Ergebnis erzielt.

Marc

[Tabellenkalk]

Hallo,

width: whatever;

ist "whatever" ein gültiger Wert für width? scnr

Gruß
Kalk

[Gunnar Bittersmann]

@@marctrix

Die Frage war bereits beantwortet: „mit media-queries“

Das ist beantwortet die Frage genausowenig wie „Mach das Garagentor auf“ die Antwort auf die Frage „Wie fahre ich ein Auto?“ ist.

Media queries geben an, wann bestimmte Stilangaben wirken. Fehlt nur noch eine Kleinigkeit: was bewirkt werden soll.

Innerhalb von media queries steht die Umsetzung: eben mit Flexbox oder Grid oder der Hack mit Floats.

Ich brauche 1 Minute oder so für das hier

Ja, das sieht man dem auch an! Du hättest wenigstens noch eine Minute darüber nachdenken sollen, was da noch so alles fehlt:

• Die Bilder sollen abwechselnd links und rechts stehen, also float: left bzw. float: right

• Der Text soll neben den Bildern stehen, nicht die Bilder umfließen. (Weshalb Floats hier ein Hack sind.) Der Text braucht also auch float oder margin.

• Wenn keine unschönen Sachen bei kurzen (oder langen) Texten passieren sollen, muss unbedingt noch ein clear her. (Das kommt davon, wenn man Hacks statt vernünftigen Lösungen verwendet.)

Und als Ergebnis kommt dann eine Lösung, die keineswegs schneller umsetzbar ist

Wenn man das mit Floats umsetzen will und alles bedenkt, was dabei zu bedenken ist, dauert das auch länger als eine Minute. Von der Fehleranfälligkeit des Hacks gar nicht zu reden.

Wenn man sich in Flexbox und Grid einarbeitet, wird man auch damit schnell. Und kann davon bei zukünftigen Projekten zehren.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Die Frage war bereits beantwortet: „mit media-queries“

Das ist beantwortet die Frage genausowenig wie „Mach das Garagentor auf“ die Antwort auf die Frage „Wie fahre ich ein Auto?“ ist.

Media queries geben an, wann bestimmte Stilangaben wirken. Fehlt nur noch eine Kleinigkeit: was bewirkt werden soll.

Das habe ich anders verstanden. Die Bilder stehen ja bereits rechts und links. Insofern muss das gar nicht erklärt werden.

das sieht man dem auch an! Du hättest wenigstens noch eine Minute darüber nachdenken sollen, was da noch so alles fehlt:

Nix. Ich weiß ja nicht mal, ob es mit float umgesetzt ist oder nicht. Schien mir hier auch nicht relevant für die Lösung. Siehe oben.

Und als Ergebnis kommt dann eine Lösung, die keineswegs schneller umsetzbar ist

Wenn man das mit Floats umsetzen will und alles bedenkt, was dabei zu bedenken ist, dauert das auch länger als eine Minute.

Ist das nicht vollkommen wurscht, ob wir über eine oder zwei Minuten für ein vollständiges Beispiel reden?

Oder etwas zwischen 1,5 und 2,5 Minuten für eine Umsetzung mit einer anderen Technik?

Das linke und rechte ausrichten von Bildern ist so trivial, dass hier schlicht dein Argument des Aufwands nicht zählt. Das scheinst du selber auch so zu sehen, denn hier relativierst du diese Aussage ja, indem du den Aufwand für sinnvoll erklärst:

Wenn man sich in Flexbox und Grid einarbeitet, wird man auch damit schnell. Und kann davon bei zukünftigen Projekten zehren.

Na siehst du. Ein bisschen mehr Aufwand kann nicht schaden und die flexbox-Lösung funktioniert auch in meinem Edge. Damit hätten wir erst gar keine Diskussion gehabt. 😉

Marc

[Gunnar Bittersmann]

@@marctrix

das sieht man dem auch an! Du hättest wenigstens noch eine Minute darüber nachdenken sollen, was da noch so alles fehlt:

Nix. Ich weiß ja nicht mal, ob es mit float umgesetzt ist oder nicht.

Es ging hier daraum, dass du das mit Floats umsetzen wolltest (und das innerhalb einer Minute).

Ist das nicht vollkommen wurscht, ob wir über eine oder zwei Minuten für ein vollständiges Beispiel reden?

Du hattest damit angefangen, mit Floats ginge es schneller als mit Flexbox oder Grid.

Das linke und rechte ausrichten von Bildern ist so trivial

Warum hast du’s dann nicht richtig gemacht? 🤔

die flexbox-Lösung funktioniert auch in meinem Edge.

Wenn man ein Grid will, ist Flexbox aber (ebenso wie Floats) ein Hack.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

das sieht man dem auch an! Du hättest wenigstens noch eine Minute darüber nachdenken sollen, was da noch so alles fehlt:

Nix. Ich weiß ja nicht mal, ob es mit float umgesetzt ist oder nicht.

Es ging hier daraum, dass du das mit Floats umsetzen wolltest (und das innerhalb einer Minute).

Nein. Es ging darum, wie man für kleine Bildschirme eine andere Darstellung erreichen kann. Antwort: mit media queries.

So jedenfalls habe ich das Anliegen verstanden - aber sagte ich das nicht bereits... 😉

Ich klammere mich gar nicht an float. inline-block oder flex-box funktionieren bei mir auch.

Ist das nicht vollkommen wurscht, ob wir über eine oder zwei Minuten für ein vollständiges Beispiel reden?

Du hattest damit angefangen, mit Floats ginge es schneller als mit Flexbox oder Grid.

Ähem:

Und dass „in alten Browsern soll’s aber soundso“ zusätzlichen Aufwand (also zusätzliche Kosten) verursacht, was bedacht werden will, ob sich das lohnt – oder ob gut (s.o.) nicht gut genug ist. - Gunnar Bittersmann

Nein. Du hast mal wieder auf dem Aufwand herumgeritten, den es bedeutet, alte Browser zu unterstützen. Daraufhin habe ich gesagt, dass der Aufwand winzig ist. Ob es nun eine Minute braucht oder zwei ist mir egal.

Ich habe geschrieben "sowas" (Beispiel für eine althergebrachte Technik, hier halt mit float) ist schnell runtergeschrieben…

Das linke und rechte ausrichten von Bildern ist so trivial

Warum hast du’s dann nicht richtig gemacht? 🤔

Weil das bereits in der "problematischen Seite" funktioniert. War ja gar nicht gefragt. Herrgottnochmal. Stell dich doch nicht dümmer, als du bist!

die flexbox-Lösung funktioniert auch in meinem Edge.

Wenn man ein Grid will, ist Flexbox aber (ebenso wie Floats) ein Hack.

Was für eine Weisheit! - Allerdings hast du vergessen zu erwähnen, dass der Hack im Gegensatz zu Deiner coolen Lösung funktioniert. Nicht nur in allen zukünftigen, sondern auch in allen aktuellen Browsern.

Die Hacks sind eine pragmatische Lösung. Bald werden sie nicht mehr nötig sein. Ich freue mich drauf.

Und all das Gerede von dir ändert nichts daran, dass meine Aussage "Geht bei mir nicht (Win10/Edge 15)" stimmt.

Übrigens: wenn du über Dein Beispiel länger nachgedacht hättest, würde es den Edge unterstützen. Auch mit CSS Grid kann man zwei Elemente so nebeneinander stellen, dass es im Edge 15 funktioniert…

Das mit dem Glashaus und den Steinen, weißt schon 😉

Marc

PS: Ich bin mir recht sicher, dass du dein Beispiel absichtlich so bereit gestellt hast. Schade, dass du es für ausgeschlossen hältst, dass mein Beispiel so ist, wie es sein sollte. Dann wärest du auch darauf gekommen, wieso ich es so und nicht vollständig geschrieben habe. Nachdem ich es nun aber zweimal erklärt habe, dürfte es eindeutig sein?!?

[Gunnar Bittersmann]

@@marctrix

Ich habe geschrieben "sowas" (Beispiel für eine althergebrachte Technik, hier halt mit float) ist schnell runtergeschrieben…

(Quelle)

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Ich habe geschrieben "sowas" (Beispiel für eine althergebrachte Technik, hier halt mit float) ist schnell runtergeschrieben…

[Grid ist leichter als Flex und float]

Wie immer sind pauschale Aussagen bei konkreten Problemen vollkommen sinnfrei…

Wie du schon selbst sagtest, geht bei der Grid-Lösung, die auch im Edge das Problem des OP löst der Charme verloren und es wären vendor-prefixe nötig und alles in allem mindestens so komplex wie die float-Lösung.

Das trifft für echte Grids nicht zu — die mit floats umzusetzen ist tatasächlich komplex und mir scheint, das hatte Jen Simmons hier im Kopf. Wenn es aber nur darum geht mal zwei Kästen nebeneinander zu stellen ist ihre von dir zitierte Aussage schlicht falsch.

Ich hätte das - wenn ich es entwickelt hätte - vermutlich mit flexbox gemacht.

Ohne lang nachzudenken.

Mit mehr Nachdenken und der Vorgabe, es möglichst einfach zu machen, hätte ich wohl inline-block genommen. Da hätte ich ohne es ausprobiert zu haben, noch ein oder zwei Zeilen CSS sparen können (für einen Container, aus dem die floats nicht ausbrechen können — vielleicht brauche ich die aber an anderer Stelle, wo Bilder von Text umflossen werden sollen sowieso. Oft hat man ja sowas eh schon im CSS stehen…).

Und nach Erscheinen von Edge 17 würde ich es wohl mit grid machen (und zwar mit grid-areas und sprechenden Namen, die ich besonders charmant finde).

Auch dein "ich-optimiere-für-keinen-Browser"-Zitat ist in der Regel Unsinn. Denn in der Regel bekommt man Vorgaben. Manchmal kann man beratend auf die Vorgaben Einfluss nehmen, aber wenn der Designer eine hübschere Variante haben will, wird sich meist dafür entschieden. Insofern ist es gar nicht unsere Entscheidung als Entwickler, ob wir den Edge unterstützen und ab welcher Version. Meine Erfahrung aus dem (Arbeits-) Leben.

Fun Fact: in der neuen Auflage meines CSS-Buches beschreibe ich für den Einstieg die Umsetzung eines einfachen CSS-Grids mit sprechenden Namen und grid-area - weil das Buch mindestens ein, vielleicht zwei Jahre "halten" muss und schon bei Erscheinen Edge 16 raus ist.

Ich habe also gar nichts gegen Deine Lösung. Persönlich kann, darf und will ich aber nicht auf die 2 Spalten im Edge 15 verzichten. Und das ist ein ebenso legitimes Anliegen wie Deines, den elegantesten und bestwartbaren Code zu erstellen. Wie gesagt: bald gibt es keine Argumente mehr, es irgendwie anders zu machen. Außer man lässt Faulheit neues zu lernen als Argument gelten. 😂

Zu diesen Leuten gehöre ich allerdings nicht und ich hätte wohl längst den Beruf gewechselt, wenn mir das viele Neu mehr Last als Freude wäre. Ich fände es langweilig Webseiten zu entwickeln, wenn ich immer mit denselben Werkzeugen arbeiten müsste. - Obwohl es selbst damit immer wieder neue kreative Wege zu erlernen gab, um mit den bescheidenen vorhandenen Mitteln so zu hacken, dass man auch exotische Designwünsche umsetzen konnte.

Marc

[Gunnar Bittersmann]

@@marctrix

Ich habe geschrieben "sowas" (Beispiel für eine althergebrachte Technik, hier halt mit float) ist schnell runtergeschrieben…

„Sowas“ kann dann so aussehen:

<img/> <div>…</div>
<div>…</div> <img/>
<img/> <div>…</div>
<div>…</div> <img/>
<img/> <div>…</div>

Weil das bereits in der "problematischen Seite" funktioniert.

… mit

img, div { float: left }
img + img, div + div { clear: left }

funktioniert das auch – für breite Viewports.

Nur dass man nicht mal eben schnell die Bilder bei schmalem Viewport über den Text bekommt. Es soll ja so aussehen:

Bild
Text
Bild
Text
Bild
Text
Bild
Text
Bild
Text

und nicht so:

Bild
Text
Text
Bild
Bild
Text
Text
Bild
Bild
Text

Und das geht eben nicht „mit media queries“.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Nur dass man nicht mal eben schnell die Bilder bei schmalem Viewport über den Text bekommt. Es soll ja so aussehen:

Und das geht eben nicht „mit media queries“.

Abwechselnd float: left und float: right verwenden 😉

Marc

[Gunnar Bittersmann]

@@marctrix

Nur dass man nicht mal eben schnell die Bilder bei schmalem Viewport über den Text bekommt. Es soll ja so aussehen:

Und das geht eben nicht „mit media queries“.

Abwechselnd float: left und float: right verwenden 😉

Ja, darauf wollte ich ja hinaus: Im Markup sollten img und div immer in derselben Reihenfolge stehen.

Keine Ahnung, ob das bei der eingangs gezeigten Seite so war. Weißt schon: Würgreflex. 😉

Und wenn’s nicht der Fall ist, wird’s eben schwierig, die Ansicht für schmale Viewports man eben schnell nachzurüsten.

LLAP 🖖

[marctrix]

Hej Gunnar,

[problematische Seite hat mehr Probleme als dem OP bewusst ist]

Du hast damit recht. Ich hatte auch verstanden, dass dein Ansatz „alles wegwerfen und richtig machen“ war 😉

Es nützt nur recht wenig, deinen Code-Schnipsel in das bestehende Tohuwabohu einzusetzen. Der Hinweis auf die schlechte Ausgangsbasis war ja bereits gegeben.

Vielleicht kannst du mit deinen Würgreflexen ja demnächst weniger exhibitionistisch umgehen. Muss ja nicht jeder wissen, was du wann ausscheidest 😀

Marc

[Gunnar Bittersmann]

@@marctrix

Ich hatte auch verstanden, dass dein Ansatz „alles wegwerfen und richtig machen“ war 😉

Und das konsequent. Deiner kam mir schwankend vor: mal wolltest du nachrüsten, mal von neu erstelltem Markup ausgehen.

Vielleicht kannst du mit deinen Würgreflexen ja demnächst weniger exhibitionistisch umgehen. Muss ja nicht jeder wissen, was du wann ausscheidest 😀

ICH HAB NICHTS AUSGESCHIEDEN!

Den Würgreflex konnte ich ja noch unterdrücken – indem ich mir die Seite nicht näher angesehen habe. 😉

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Ich hatte auch verstanden, dass dein Ansatz „alles wegwerfen und richtig machen“ war 😉

Und das konsequent. Deiner kam mir schwankend vor: mal wolltest du nachrüsten, mal von neu erstelltem Markup ausgehen.

Ich wollte da eigentlich gar nichts ändern. Habe den Quellcode überhaupt nicht angeschaut, da der OP sich ja auch weiter nicht mehr gemeldet hatte.

Für mich war die Sache mit "media-queres" eigentlich erledigt… 😉

ICH HAB NICHTS AUSGESCHIEDEN!

Gut für uns alle, würde ich mal sagen 😂

Marc

[Matthias Apsel]

Hallo marctrix,

Für mich war die Sache mit "media-queres" eigentlich erledigt… 😉

zumal ich der Antwort auch das Adjektiv ultrakurz mitgegeben habe und ebenso auf einige Unzulänglichkeiten (aus dem Fiddle) hingewiesen habe.

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Für mich war die Sache mit "media-queres" eigentlich erledigt… 😉

zumal ich der Antwort auch das Adjektiv ultrakurz mitgegeben habe und ebenso auf einige Unzulänglichkeiten (aus dem Fiddle) hingewiesen habe.

Genau. Damit war für mich alles gesagt. Im Grunde finde ich ja die Bemühungen von @Gunnar Bittersmann löblich, mit vorbildlichem Code dann noch einen drauf zu setzen. Das geht in den Diskussionen, die ich mit ihm habe vielleicht manchmal unter. Denn die vielen plusse von mir, kann er ja nicht zuordnen. Und andere mitlesende auch nicht. Daher sei es mal gesagt: lieber Gunnar, du kriegst von mir viel mehr Sternchen für deinen Einsatz als Kritik.

Vielleicht hilft dir das mit meiner vergleichsweise seltenen Kritik in Zukunft souveräner umzugehen?!?

Marc

[Gunnar Bittersmann]

@@marctrix

Wie immer in solchen Diskussionen, drückst du dich um die Lösung des eigentlichen Problems.

Mitnichten.

Du sagst: „Es“ geht mit Grid. Wobei „es“ — also das, was der Fragensteller wollte — klar beschrieben ist. Wenn ich sage „es“ geht nicht (in einem ziemlich aktuellen Browser, immerhin Standard-Browser des weltweit meistverbreiteten Betriebssystems), erzählst du was von veralteten Browsern, nicht schlimm usw.

Wie immer in solchen Diskussionen verweise ich auf progressive enhancement.

Gehört, dass Bilder links/rechts/über dem Text erschienen, zur Grundfunktionalität der Seite? Wohl kaum. Da sind wir uns wohl einig.

Layout ist enhancement. Und je besser der Browser, desto besser kann das Layout aussehen.

Und ja, es ist „nicht schlimm“, wenn das Layout in zweitbesseren Browsern nicht bestens aussieht – solange es auch in diesen gut aussieht.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wie immer in solchen Diskussionen, drückst du dich um die Lösung des eigentlichen Problems.

Mitnichten.

Du sagst: „Es“ geht mit Grid. Wobei „es“ — also das, was der Fragensteller wollte — klar beschrieben ist. Wenn ich sage „es“ geht nicht (in einem ziemlich aktuellen Browser, immerhin Standard-Browser des weltweit meistverbreiteten Betriebssystems), erzählst du was von veralteten Browsern, nicht schlimm usw.

Wie immer in solchen Diskussionen verweise ich auf progressive enhancement.

Gehört, dass Bilder links/rechts/über dem Text erschienen, zur Grundfunktionalität der Seite? Wohl kaum. Da sind wir uns wohl einig.

Angesichts der Frage: wie kriege ich die Bilder bei schmalen Viewports übereinander und auf breiten Viewports nebeneinander, erscheint mir das jetzt als albern und auch keiner weiteren Diskussion mehr wert…

Schreib doch einfach die MS-Schreibweise dazu, dann klappt es auch im IE15. Und ja, das ist ein Mehraufwand. Soll ich dir die zwei Minuten bezahlen? … facepalm

Marc

[Gunnar Bittersmann]

@@marctrix

Schreib doch einfach die MS-Schreibweise dazu, dann klappt es auch im IE15. Und ja, das ist ein Mehraufwand. Soll ich dir die zwei Minuten bezahlen? … facepalm

Nein, die gesamte Zeit. Mit 2 Minuten ist das nicht getan (sonst hätte ich’s ja gemacht).

Die Grid-Variante verwendet Features von Grid, die es in der alten, von Edge 15 unterstützten Spec noch nicht gab.

LLAP 🖖

PS: Der Pluspunkt für dich ist mal wieder ein typischer Dem-Bittersmann-haste’s-jetzt-aber-gegeben-Punkt – von jemanden, der nicht der Lage ist oder sich gar nicht erst die Mühe machen wollte zu überschauen, was da fachlich eigentlich dahintersteckt.

[marctrix]

Hej Gunnar,

@@marctrix

Schreib doch einfach die MS-Schreibweise dazu, dann klappt es auch im IE15. Und ja, das ist ein Mehraufwand. Soll ich dir die zwei Minuten bezahlen? … facepalm

Nein, die gesamte Zeit. Mit 2 Minuten ist das nicht getan (sonst hätte ich’s ja gemacht).

Die Grid-Variante verwendet Features von Grid, die es in der alten, von Edge 15 unterstützten Spec noch nicht gab.

@media screen and (min-width: 30em) {
  .wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

.box:nth-child(1) {
  -ms-grid-column: 1;
}
.box:nth-child(2) {
  -ms-grid-column: 2;
}

Hat jetzt tatsächlich 5 Minuten gedauert, allerdings das komplette Beispiel (nicht nur die MS-Unterstützung) von jemandem der mit grid noch recht unerfahren ist. Es mag eleganter gehen (siehe dein Beispiel). Aber immerhin: es funktioniert.

PS: Der Pluspunkt für dich ist mal wieder ein typischer Dem-Bittersmann-haste’s-jetzt-aber-gegeben-Punkt – von jemanden, der nicht der Lage ist oder sich gar nicht erst die Mühe machen wollte zu überschauen, was da fachlich eigentlich dahintersteckt.

Es geht mir nicht da drum, es dir zu geben. Kann ich auch gar nicht. Du bist in den meisten Punkten fitter als ich. Hier bist du einfach meiner Meinung nach am Thema vorbei geschossen.

Irgendwie habe ich das Gefühl, du musst unbedingt überall grid unterbringen. Auch da wo es etwas weit hergeholt ist - hier ging es ja gar nicht mehr um "wie bekomme ich das nebeneinander", sondern wie bekomme ich das auf schmalen Bildschirmen übereinander.

Die Antwort war: mit media-queries.

Dein Lösungsansatz war, das bisher vorhandene komplett zu ignorieren und einen neuen Weg vorzuschlagen. Kann man machen, ist auch eleganter. Macht aber mehr Mühe (die du ja immer als Argument dafür nimmst, etwas zu unterlassen).

Und auf einen Hinweis wie "in dem mir zur Verfügung gestellten Browser klappt das (also das, wonach meiner Meinung nach explizit gefragt wurde) aber nicht", reagierst du genauso, als ob man „es dir geben wollte“. Das ist von mir aus nicht so gemeint, auch wenn sich da mitunter ein genervter Unterton einschleichen mag, weil es echt viel Geduld fordert, sich mit dir durch solche Threads zu kämpfen.

Wenn du so viel Geduld aufbringen würdest, wie du anderen abverlangst, wartest du einfach noch ein paar Monate ab, dann kann man deinen Weg gehen.

Wie viele andere muss ich die letzten beiden Versionen der meisten Browser unterstützen. Sobald der Edge 17 draußen ist, werde ich sofort überall an deine Lösung ein Plus dran setzen.

Was dir offenbar vollkommen entgangen ist: ich habe ich ja deine Lösung nicht kritisiert. Nur darauf hingewiesen, dass da die Unterstützung für einen wichtigen Browser fehlt. Und zwar für das, was hier explizit gefragt wurde. Wie kann ich es machen, dass ich zwei unterschiedliche Darstellungen erhalte. Genau diese unterschiedlichen Darstellungen liefert Dein Ansatz im Edge nicht. Dass kannst du jetzt runterspielen, schönreden oder was auch immer. Es ist einfach keine Lösung auf das Problem, vor dem hier jemand steht. So hübsch Dein Ansatz auch ist!

Angesichts dieser nicht ganz bis zu Ende gedachten Lösung dann allerdings von anderen komplett fertig umgesetzte Lösungen zu fordern ist — unfair (ist wohl das passendste Wort an dieser Stelle).

Übrigens sind IMHO alle Plus-Punkte, die du in diesem Thread bekommen hast von mir…

Die wollte ich dir geben… 😉

Und du hattest schon einen Ansatz, den ich für den heute besten Ansatz halte.

Es mag ein Hack sein, aber schon ein ziemlich eleganter. Und auch den werden wir bald nicht mehr brauchen.

Marc

[Gunnar Bittersmann]

@@marctrix

Die Grid-Variante verwendet Features von Grid, die es in der alten, von Edge 15 unterstützten Spec noch nicht gab.

Hat jetzt tatsächlich 5 Minuten gedauert …

Ich hätte dazuschreiben müssen, dass ich mich damit auf die Ein-Grid-Variante beziehen wollte (zumal die ein einem anderen Zweig war).

(Alles IIRC; ich will jetzt nicht extra nachschlagen.) Benannte Gridlinien gab’s in der alten Spec nicht. Da hätte man die Nummern nehmen können; dann geht aber der Charme verloren. grid-column-gap gab’s nicht, da hätte man mit noch mehr Gridlinien arbeiten müssen. grid-auto-flow: dense – da steigen die alten Browser wohl ganz aus. Und für die alten Browser müsste man auch die Zeilen vordefinieren; das wird wohl tricky, wenn man deren Anzahl bei variablen Inhalten nicht kennt und die auch jeweils an den Inhalt angepasste Höhe haben sollen.

TL;DR: Ich vermute, diese Umsetzung geht nach der alten Spec gar nicht.

Die Für-jeden-Block-ein-eigenes-Grid-Variante kriegt man mit der alten Syntax sicher auch für Edge und IE hin.

PS: Der Pluspunkt für dich ist mal wieder ein typischer Dem-Bittersmann-haste’s-jetzt-aber-gegeben-Punkt – von jemanden, der nicht der Lage ist oder sich gar nicht erst die Mühe machen wollte zu überschauen, was da fachlich eigentlich dahintersteckt.

Es geht mir nicht da drum, es dir zu geben. […] reagierst du genauso, als ob man „es dir geben wollte“.

Damit warst doch nicht du gemeint. Du kannst doch nichts dafür, wenn dir jemand anderes einen Punkt gibt.

Dein Lösungsansatz war, das bisher vorhandene komplett zu ignorieren und einen neuen Weg vorzuschlagen.

Was mit „Würgreiz“ hinreichend begründet war. 😉

Macht aber mehr Mühe

Glaube ich in diesem Fall nicht. In Gammelcode rumzupfuschen dürfte mehr Mühe machen als eine einfache andere Lösung zu implementieren (ob nun Flexbox oder Grid, sei an dieser Stelle mal dahingestellt).

Was dir offenbar vollkommen entgangen ist: ich habe ich ja deine Lösung nicht kritisiert. Nur darauf hingewiesen, dass da die Unterstützung für einen wichtigen Browser fehlt.

Und ich sage: fehlt nicht. Die Lösung wird auch von Edge unterstützt. Nochmal Jeremy Keith: “I support every browser …but I optimise for none.”

LLAP 🖖

[Matthias Apsel]

Hallo marctrix,

Wieso eigentlich immer noch Edge 15? Can I use meint, der 16er wäre schon draußen und kann Grid.

Offensichtlich hat MS den 16er noch nicht an alle verteilt, ich hab auch noch den 15er und automatische Updates.

Bis demnächst
Matthias

[Martl]

Hallo Christian,

...auf der es "richtig" funktioniert...

tut es nicht. Mit "JavaScript only" ist es wie weiland mit "Flash"; wer sich nicht darauf einlässt - und das mit gutem Grund - sieht schlicht: Nichts.

Grüße, Martl

[Gunnar Bittersmann]

@@Martl

...auf der es "richtig" funktioniert...

tut es nicht. Mit "JavaScript only" ist es wie weiland mit "Flash"; wer sich nicht darauf einlässt - und das mit gutem Grund - sieht schlicht: Nichts.

Nicht nur wer sich nicht darauf einlässt (JavaScript-Ausschalter sind womöglich gar eine zu vernachlässigende Gruppe), sondern auch alle, bei denen JavaScript nicht ausgeführt wird, weil

• es wegen abgebrochener Netzwerkverbindung nicht geladen wird
• eingebundene fehlerhafte Third-Party-Scripte die Ausführung der eigenen Scripte verhindern
• …

Ich habe mir die fragliche Seite jetzt nicht ohne JS angesehen, aber wenn man dann tatsächlich nichts sieht, ist es Unvermögen der Entwickler.

JavaScript lässt sich vortrefflich als progressive enhancement einsetzen Beispiel: ein ähnlicher Fall, wo die Breite anhand eines bestimmten Inhalts gesetzt wird – wobei auch dort min-content zum Ziel führt.

LLAP 🖖

[Martl]

Hallo Gunnar,

...zu vernachlässigende Gruppe

woher Du Weisheit diese nehmen?

Grüße, Martl

(Yoda, ungesicherte Zitate: Binsenweisheiten meist ohne tiefere Bedeutung für das Leben sind.)

[Gunnar Bittersmann]

@@Martl

...zu vernachlässigende Gruppe

woher Du Weisheit diese nehmen?

Das war nicht die Weisheit, sondern: „womöglich zu vernachlässigende Gruppe“. Hängt von konkreten Fall ab.

Der Punkt ist aber: Es ist ziemlich egal, warum JavaScript nicht ausgeführt wird. Wichtig ist zu beachten, dass JavaScript nicht immer ausgeführt wird – und zwar bei weitaus mehr Nutzern nicht als man denken mag.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

• eingebundene fehlerhafte Third-Party-Scripte die Ausführung der eigenen Scripte verhindern

Gerade vor einer Woche live gesehen: Irgendeins von Heydon Pickerings ARIA-Beispielen funktionierte nicht richtig. Das JavaScript zickte rum. Es stellte sich raus, dass ein von Disqus eingebundenes Script die Ausführung des eigenen blockierte. WTF.

Kaum hat er Disqus rausgeschmissen, ging alles wie gewollt.

LLAP 🖖

PS: Disqus sollte man wohl sowieso rausschmeißen. Das dient nicht dazu, Diskussionen zu Artikeln zu ermöglichen, sondern dazu, Nutzer zu tracken. Beware of Disqus!

PPS: Heydon meinte, seine ARIA-Beispiele können wir sowieso vergessen und uns besser seinen Inclusive Components widmen. 😉