flexible Bilderwand

[Matthias Scharwies]

Servus!

Moin Matthias,

falls du noch irgendwo da draußen bist, bitte ich dich mal den fertigen Schmonzes anzuschauen ich hab alles brav mit relativen Größenangaben zusammen geschraubt.

Ok, sieht dich ganz gut aus!

Jetzt habe ich zwei kapitale Aufgaben zu lösen:

erstens: das "Blog" Dingens schaut auf den kleineren Monitoren fürchterlich aus, wie kann ich das verbessern ohne Mediaqueries? Könnte mir vorstellen die Ränder doch mit Pixeln zu definieren... grübel

Warum willst du auf media queries verzichten? Sie sind prinzipiell nützlich - man sollte sie jedoch nach dem Inhalt ausrichten, nicht nach eventuellen Geräteabmessungen.

In Deinem Fall hat .square-container ein padding: 3em 5em . Das sieht auf großen Bildschirmen evtl. noch ganz ok aus - auf meinem Handy aber nicht. Deshalb würde ich hier ansetzen:

/* Kompaktes Layout für mobile Geräte */
.square-container {
    padding: 0;
}

@media (min-width: 30em) { 
  /* Layout für breitere Bildschirme */ 
.square-container {
    padding: 3em 5em;
}

Oder das padding ganz weglassen!

Generell finde ich den Hintergrund problematisch, bzw. nicht nötig. Es ist ja eigentlich ein Muster, das Text anzeigt. Lesbar ist der Text ja nicht. Da die Bilderwand der Mittelpunkt ist, würde ich ihn weglassen!

Ich habe noch etwas zum HTML zu sagen: Du hast eine Div-Suppe:

<div class="square">
	<div class="content">
    	<a id="rumpelpumpel" href="https://jungmann.photo/20181231wholeyear/images/pic00.jpg" data-lightbox="rumpelpumpel" data-title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost">
        	<img src="photo-Dateien/pic00_011.jpg" alt="Schloss Bruchsal" title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost" width="800" height="533">
        </a>
    </div>
</div>

Ich habe jetzt grad nachgelesen, wie man die Quadrate in Grid erzeugt (https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3) und verstehe, warum Du die .square mit

.square {

    padding-top: 100%;
}

versiehst. Die anderen Angaben sind imho überflüssig, bzw könntest du am Anfang des CSS dies setzen:

*, ::before, ::after { 
  box-sizing: border-box; 
}

IMHO könntest Du diese Klasse aber auch auf das a-Element anwenden:

<a class="square" id="rumpelpumpel" href="https://jungmann.photo/20181231wholeyear/images/pic00.jpg" data-lightbox="rumpelpumpel" data-title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost">
   <img src="photo-Dateien/pic00_011.jpg" alt="Schloss Bruchsal" title="Schloss Bruchsal - Bau dir in deiner Gedankenwelt ein Schloss, und nicht ein Gefängnis. © H. Joost" width="800" height="533">
</a>

Da muss man wsl. a und img etwas anders gestalten (display: inline-block)

Ich würde mich (aber erst) am Wochenende mal an eine Version von mir machen.

zweitens: im IE wird kein Grid angezeigt sondern alles einfach untereinander, das ist irgendwie blöd. Beim rumstöbern hab ich auch nix brauchbares dazu gefunden... hast du evtl einen Tipp?

https://caniuse.com/#feat=css-grid

Der IE 10-11 hatten eine Version, in der Du die Angaben mit Browser-Präfix versehen musstest:

.square-container {

display: -ms-grid;
display: grid;
}

So etwas wie auto-fill kann er aber trotzdem nicht. Ich würde aber darauf verzichten. Diese Versionen sterben aus!

Herzliche Grüße

Matthias Scharwies