grid, zwei Spalten, links Text, rechts bilder, scrollbalken verhindern

[michaah]

Hi,

in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:

{ width: 100%;
	display:grid;
	grid-template-columns: 1fr 20em; /* <-- das soll möglichst so bleiben;
bie breiter werdendem Viewport sollen die Bilder eben (zunächst) nicht 
skalieren, aber der Text immer mehr platz bekommen */
  }

Gegenwärtig ist es so, dass der Text die linken Zellen auf die notwendige Breite aufdrückt (wie das Text in fr-Zellen, bzw. Spalten nunmal macht, der Inhalt wird dadurch breiter als den Viewport) und die Bilder nach rechts aus der Zelle drückt.

Wie muss ich die Rahmenbedingungen setzen, damit das wie gewünscht klappt. (Ich hatte das schonmal hinbekommen, mein Beispiel aber gelöscht, was mich jetzt etwas nevt; ich hoffe meine spärlichen Angaben reichen aus)

[Rolf B]

Hallo michaah,

suchst Du so was?

Das einzig Spezielle war eigentlich ein max-width: 100% für das img Element.

Das h2 möchte vermutlich lieber ein h1 sein, aber so ein Artikel steht ja zumeist nicht allein auf der Seite, und der Rest der Seite steht nicht im Fiddle.

Rolf

[michaah]

Hallo michaah,

suchst Du so was?

Nein. Der Text in deinen Beispiel bricht um. Das ist ja easy-peasy ;-)

Ich möchte dass meine (erläuternden) Einzeilertexte in den linken Zellen bei engem Viewport (zunächst) in dir jeweils rechten Zellen überfließt. Je breiter dann der Viewport aufgezogen wird (bzw je breiter die devices werden) möchte ich das in die Breite ziehen, somit den Text quasi aus dem Bild herausziehen.

Ich hatte das aber wohl doch etwas anders gelöst als ich mich zunächst erinnerte, habe dann in den Tiefen der Verzeichnisse doch noch ein abgespeichertes Zwischenergebnis gefunden. Dort wurde die Gritbreite so berechnet:

@media (min-width: 30em) 
{
main { display: grid;
 grid:	  "header header" 	min-content
			    "bli bli"
			    "details details"
			    "bla blubb"
			    "bla blubb"
	 	 	    / calc((130% - 30em) + 5em) 1fr;
 }  
...
}

Damit funktioniert die Überlappung ganz gut, aber offen gestanden versteh ich nicht (mehr) warum ...

[Rolf B]

Hallo michaah,

okay. Also z-index setzen damit der Text über dem Bild ist, und etwas Spielerei mit den Grid-Bereichen.

Damit Text beim Bild bleibt, einen Container um die Zeilen. Und der Container ist das Grid. Ein einziges Grid mit Auto-Placement würde Dir die Bilder unter den Text stellen (es sei denn, ich bin mal wieder zu dumm für Grid).

So was?

Rolf

[michaah]

okay ... und etwas Spielerei mit den Grid-Bereichen.

jahhhhhh ....hmmmmmm kopfkratz

Damit Text beim Bild bleibt, einen Container um die Zeilen. Und der Container ist das Grid. Ein einziges Grid mit Auto-Placement würde Dir die Bilder unter den Text stellen (es sei denn, ich bin mal wieder zu dumm für Grid).

So was?

Rolf

Es tut in jedem Fall was es für mich tuen sollte. Aber das figure Element will verstanden sein ... das ist mir bislang noch nicht in ausreichendem Maß gelungen.

Danke.

[Rolf B]

Hallo michaah,

wenn Du das figure-Element nicht verstehst, dann kann das daran liegen, dass es daran nicht viel zu verstehen gibt und Du tiefen Sinn suchst, wo keiner ist.

<figure> ist eins der Elemente aus dem semantischen Web. D.h. man soll das Markup seiner Seiten so gestalten, dass die HTML Elemente aussagen, welche Art von Inhalt hier vorliegt. Zu Beginn waren HTML Elemente eher auf „wie soll das aussehen“ gestrickt, denk an <i> für italic, <u> für underline. Für's Aussehen ist heute CSS da. Das HTML soll vor allem aussagen: was bedeutet das.

<figure> steht für Bilder, Illustrationen, Diagramme, Codeschnipsel etc, auf die im Hauptdokument Bezug genommen wird, die man aber auch in einen anderen Teil des Dokuments oder in einen Anhang verlegen könnte. Zu einer figure gehört normalerweise auch einen Titel, der steckt in <figcaption>. <figcaption> muss erstes oder letztes Element in der <figure> sein.

Mehr gibt's da nicht zu verstehen. Zugegeben, Browser bringen ein paar Default-Formatierungen für figures mit (Abstände und Ränder), die Du natürlich nach Wunsch anpassen kannst.

Rolf

[Gunnar Bittersmann]

@@Rolf B

<figure> ist eins der Elemente aus dem semantischen Web.

Nein, überhaupt nicht.

Das semantische Web ist was völlig anderes und hat nichts mit Elementtypen zu tun.

😷 LLAP

[Rolf B]

Hallo Gunnar,

okay, wieder was gelernt.

Gemeint habe ich: Es ist ein Element, das mit HTML 5 eingeführt wurde, um Semantik, also Bedeutung, ins Markup zu bringen.

Dass "semantisches Web" eine andere Semantik einführt, hatte ich nicht unterschieden.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dass "semantisches Web" eine andere Semantik einführt, hatte ich nicht unterschieden.

Und ich rede mir da seit Jahren den Mund fusslig:

• https://forum.selfhtml.org/self/2005/jan/15/linktipp-semantischer-code-ist-der-anfang-von-gutem-design/748300#m748300

• https://forum.selfhtml.org/self/2005/jul/29/was-ist-semantik/848226#m848226

• https://forum.selfhtml.org/self/2007/may/5/element-fuer-verfasser-autor-eines-textes-semantisch/1115916#m1115916

• https://forum.selfhtml.org/self/2010/jan/22/ein-paar-fragen-zum-thema-webdesign/1423166#m1423166 ff.

😷 LLAP

[Gunnar Bittersmann]

@@michaah

in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:

Grid-Zellen können sich überlappen.

In meinem Beispiel geht main über die volle Breite; img nur über einen Teil davon.

😷 LLAP

[Rolf B]

Hallo Gunnar,

okay, ich hatte es mit Nummern gemacht.

Aber was ist der Unterschied zwischen full-main und main-end? Ich kannte bisher nur letzteres.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Gunnar,

okay, ich hatte es mit Nummern gemacht.

Und media query, den man nicht braucht.

Aber was ist der Unterschied zwischen full-main und main-end?

Das eine ist falsch; das andere richtig.

Im Pen berichtigt.

😷 LLAP

[michaah]

@@michaah

in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:

Grid-Zellen können sich überlappen.

In meinem Beispiel geht main über die volle Breite; img nur über einen Teil davon.

😷 LLAP

Das schaut auch nachvollziehbar aus. Werde ich mir morgen genau anschauen.

Danke.

[Gunnar Bittersmann]

@@michaah

in einen Zweispalten-grid-design soll der Text in den linken Zellen in die Bilder der rechten Zellen überfließen:

Bist du sicher, dass das keine Hintergrundbilder sind?

😷 LLAP

[michaah]

Hi

Bist du sicher, dass das keine Hintergrundbilder sind?

Es sind definitiv keine Hintergründe sondern Inhalte. Das ist sicher.

Technisch gesehen ist das für mich allerdings das am einfachsten nachvollziehbare Beispiel von euch Beiden. Da fällt es mir richtig schwer einen Inhalt nicht als HG zu behandeln.

Danke dafür ;-) .