flexible Bilderwand

[bugfix]

Moin Matthias,

Hier ist mein Versuch: test.html

Das hat auf den ersten, zweiten und dritten Blick eine andere Qualität als meine div-Suppe :) auch wen ich das css auf den ersten, zweiten und dritten Blick nicht verstehe, das zieh ich mir morgen mal rein...

appropos: weisst du obs in der Wiki einen Abschnitt gibt der die Notation der Reihenfolge und Verbindung der Aufrufe auf verständliche Weise erklärt ist? Das hier ist zum Lernen ungeeignet, zumindest für mich. Wie finde ich heraus wie die ganzen Zeichen (Selektoren?) zu kombinieren sind?

Die Kästchen werden 15rem (oder etwas mehr breit) - es gibt keinen Rand. Die Höhe ist identisch!

...auf jeden Fall eleganter als ineinander gestopfte divs zu verbiegen...

Es wird mit .square-container::beforeein Pseudoelement gebildet, das mit dem padding-bottom-Fix die gleiche Breite und Höhe erhält. Mit *:first-child wird es vor das grid positioniert und ist durch grid-row 1/1 und grid-column: 1/1 unsichtbar.

...genau so etwas meine ich ...

Der Blog-Link ist immer links oben, der Kontakt-Link mit grid-column: -2/ -1 immer rechts oben. Die Schreibschrift ist Hintergrund und nicht Teil des HTML, sondern über CSS formatiert.

Ganz klar auch die bessere Lösung, allerdingens: den Kontakt-Link nach rechts oben zu verschieben ist gut gemeint wegen der Erreichbarkeit etc. ...finde ich allerdings nicht so schick, insbesondere bei kleinem Monitor hängen die beiden Dinger (Blog & Kontakt) dann immer aufeiander, das ist unhübsch. Den Kontakt hatte ich nach unten verfrachtet, weil die allermeisten Kontakt- oder Impressungslinks eben dort sind, der User ist quasi schon gewöhnt den Kram unten zu suchen.

Du kannst alle Bilder hovern, aber auch mit der Tab-Taste antabben.

Hovern find ich super, allerdings geht das ja bei Touchscreens nicht, deswegen hatte ich ungehoovert opacity:1; und gehoovert opacity:nullkommairgeendwas; dann schaut das ganze am Toucscreen halt "normal" aus.

Ich werde die Tage die Überschrift und den Blog-Link verschönern.

Ist dir aufgefallen, dass sich die Rastergröße bei den beiden Kästchen anders verhält als beim Rest? Beide, aber besonders der Blog-Link bleiben beim verkleinern des Browserfensters größer (imho erheblich, hab mir ne Schablone gebastelt) als alle anderen Kacheln. Mir Scheint dass sich da was überlagert, der Effekt zeigt sich nur in der Breite, nicht in der Höhe.

Danke schon mal im Voraus & auf Wiederlesen!

der torsten