Formatierung mit media queries

[wonk]

Hallo, ich möchte eine Webseite (hier nur ein Bild und ein Fließtext) in Abhängigkeit von der Breite des Betrachtergerätes (min-width: ..em) in den folgenden 4 verschiedenen Formaten darstellen, ohne das textfreie Stellen entstehen. Auf die Details von Rändern verziechte ich zunächst. Das müßte doch mit media queries (article, section...) möglich sein? Ich bekomme es aber nicht hin. Kann jemand helfen? Gruss, wonk

[Gunnar Bittersmann]

@@wonk

Das müßte doch mit media queries (article, section...) möglich sein?

Sicher.

Ich bekomme es aber nicht hin.

Was ist „es“?

Kann jemand helfen?

Wenn du nicht zeigst, was du versucht hast, kann dir niemand sagen, was du falsch gemacht hast.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[wonk]

Hallo,

das fängt schon mit der ersten Layoutversion an:

@media (min-width: 50em) 
{ article {display: grid; grid-template-columns: auto 400px}	
  #section_text {height: auto}
  #section_bild {height: 151px}
}

So bleibt das Bild zwar bei schmaler werdendem Fenster gleich breit, die Textspalte wird schmaler, aber der überfließende Text breitet sich nicht über die gesammte Fensterbreite aus.

Gruss, wonk

[Gunnar Bittersmann]

@@wonk

das fängt schon mit der ersten Layoutversion an:

@media (min-width: 50em) 
{ article {display: grid; grid-template-columns: auto 400px}	
  #section_text {height: auto}
  #section_bild {height: 151px}
}

So bleibt das Bild zwar bei schmaler werdendem Fenster gleich breit, die Textspalte wird schmaler, aber der überfließende Text breitet sich nicht über die gesammte Fensterbreite aus.

Wenn du willst, dass der Text um das Bild herumfließt, musst du die entsprechende CSS-Eigenschaft verwenden, nicht Grid.

fließen (Verb) – float

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo wonk,

das fängt schon mit der ersten Layoutversion an:

Zeig doch bitte das problematische Dokument online, z. B. bei https://bplaced.net

[…] aber der überfließende Text breitet sich nicht über die gesammte Fensterbreite aus.

gesamt hat mit sammeln zwar etymologisch was zu tun, wird aber trotzdem nur mit einem m geschrieben.

Bis demnächst
Matthias

[Rolf B]

Hallo wonk,

die gesamte Fensterbreite kann auf großen Bildschirmen ohnehin kritisch sein, da sollte eine Limitierung auf - sagenwirmal - 50em stattfinden.

Abgesehen davon, dass float hier die bessere Idee ist: Dein Grid sollte sich so, wie Du es zeigst, auf die ganze Breite verteilen. Da ist noch ein anderer Faktor im Spiel. Den findest Du nur durch Analyse der gültigen Styles in den Entwicklerwerkzeugen des Browsers.

Rolf

[wonk]

Hallo,

mit CSS klappt zwar der Übergang von 1 zu 2, nicht aber mehr das weitere.

@media (min-width: 50em) { #text {height: auto;}
								   #bild {width: 400px; height: 180px; float:right}
								   }
		@media (max-width: 50em) { #text {height: auto;}
								   #bild {width: 100%; height: auto;}
								   }

Siehe meine Versuche unter Testseite. Der Umsprung auf die 3. Layoutversion beginnt bei zu großer Breite (mit em-Angabe nicht zu korrigieren), und die variable Bildbreite für die 4.Layoutversion passt auch nicht. Bin ein Layout-Dummy, habe mich bisher mehr mit dem Inhalt beschäftigt. Dank für Eure Bemühungen.

Gruss, wonk

[Matthias Apsel]

Hallo wonk,

Unabhängig von deinem Problem empfehle ich dringend das Studium unseres Tutorials. Vieles, was man in deiner Testseite sieht, hat man vor 20 Jahren so gemacht, und manches war auch damals schon überholt.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@wonk

Siehe meine Versuche unter Testseite. Der Umsprung auf die 3. Layoutversion beginnt bei zu großer Breite (mit em-Angabe nicht zu korrigieren), und die variable Bildbreite für die 4.Layoutversion passt auch nicht.

Fürs Bild width: 100% angeben; keine Höhe, damit es sich dem Container anpasst.

Und für den Container ist das figure-Element angebracht, mit figcaption für die Bildunterschrift.

Beispiel zur Feier des morgigen Tages.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Beispiel zur Feier des morgigen Tages.

und in Berlin tatsächlich auch Feiertag.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Beispiel zur Feier des morgigen Tages.

und in Berlin tatsächlich auch Feiertag.

Ja. Und der 75. Jahrestag wäre ein guter Anlass gewesen, den 8. Mai bundesweit als Feiertag einzuführen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ja. Und der 75. Jahrestag wäre ein guter Anlass gewesen, den 8. Mai bundesweit als Feiertag einzuführen.

Zum 70. Jahrestag hatte ich genau dieses Bild am Ende meines Talks auf der Front-Trends in Warschau gezeigt (ab 29:00 im Video).

Ich wollte es gestern noch in die Vortragsfolien einbauen, wo es jetzt(?) unter CC-Lizenz verfügbar ist. Die Folien hab ich wohl nur noch als PDF, also einfach in der macOS-Vorschau geöffnet, die eine Folie mit dem Bild als PDF hinzugefügt, abgespeichert – aber weder Speakerdeck noch Notist wollten das so generierte PDF annehmen, hm…

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[MudGuard]

Hi,

und in Berlin tatsächlich auch Feiertag.

Hm. ganz oben steht:

Nächster gesetzlicher Feiertag in Berlin

Christi Himmelfahrt am 21.5.2020 (Donnerstag)

cu,
Andreas a/k/a MudGuard

[Matthias Apsel]

Hallo MudGuard,

Danke für den Hinweis. Muss ich morgen mal auf die Suche gehen …

Bis demnächst
Matthias

[Rolf B]

Hallo wonk,

bitte erläutere genauer, welche Layoutversion was sein soll und welches Verhalten der Seite du erwartest. Das bekomme ich aus deinen Andeutungen nicht heraus.

Dein Menü ist übrigens nicht bedienbar. Wer keine Maus hat, kann es nicht benutzen. Popup-Menüs nur mit CSS funktionieren schlecht bis gar nicht. Ich habe gerade die Quelle für ein besseres Beispiel nicht zur Hand, aber jemand anderes bestimmt.

Wie auch immer. Guck Dir mal das hier an. Kein Wort JavaScript, alles CSS. Ist das Fenster breit genug, wird es ein Grid, andernfalls stehen die Elemente untereinander. Und es ist nur ein einziger Media-Breakpoint.

Es ist natürlich nicht fertig. Im schmalen Modus muss man das Top-Menü noch ausblenden (eventuell - nicht zwingend) und eine bedienbare Methode anbieten, um es zu nutzen. Im breiten Modus ebenso. Das Fiddle zeigt nur die Umschaltung zwischen schmal und breit.

Kleiner Nachteil: Die 5 Bilder oben werden im HTML immer angesprochen, auch wenn das CSS sie ausblendet. Aber sie sind nicht groß, das kann man verschmerzen, und ein guter Browser sollte die Bilder auch nicht laden wenn sie nicht sichtbar sind. Aber es ist nicht so einfach, auf das Umschalten eines @media Break mit JavaScript zu reagieren, dafür scheint es kein Event zu geben. Ich finde nur diverse Tricks und Hacks dazu, die ich mir selbst erstmal anschauen müsste.

Rolf

[wonk]

Hallo!

Danke für Eure Hilfen! Die Version Version nur mit divs erfüllt jetzt meine bescheidenen Ansprüche, wie ich sie in dem ersten Posting dargestellt hatte. Es war nur die Zuordnung der styles zu den tags nicht korrekt. Die vorgeschlagene Version von Gunnar habe ich unter Version mit figure probiert, funktioniert eigentlich weitgehend genauso.

Die Menübedienung klappt bei mir auch auf dem Tablett und Smartphone ohne Maus.

Die Site ist 10 Jahre alt und designmäßig sicherlich veraltet. Ich möchte mich aber nach wie vor auf Inhalte konzentrieren und sie nur so weit umarbeiten, dass sie auf kleinen Bildschirmen halbwegs lesbar ist.

Gruss, wonk

[Gunnar Bittersmann]

@@wonk

Die Menübedienung klappt bei mir auch auf dem Tablett und Smartphone ohne Maus.

Sie klappt nicht auf Desktop mit Tastaturbedienung.

Du hast das Öffnen der Untermenü mit mouseover-Eventhadler gemacht; per Tastatur öffnet sich da nichts. Das Menü ist nicht bedienbar.

Um es bedienbar zu machen, sollten die Menüpunkte „Entwicklung“, „Energie“, „Wind“ usw. <button>s sein, die auf Click das jeweilige Untermenü öffnen und die anderen schließen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Um es bedienbar zu machen, sollten die Menüpunkte „Entwicklung“, „Energie“, „Wind“ usw. <button>s sein, die auf Click das jeweilige Untermenü öffnen und die anderen schließen.

Es ist angerichtet.

Siehe auch Probleme mit Nav.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!