Gerade wenn Du Anfänger bist, empfehle ich, gleich mit den Originalen Grid- und Flexlayout einzusteigen. Beide sind genau dafür entwickelt worden, responsive Layouts zu realisieren und einfacher anzuwenden als Bootstrap.
Einstieg in Flex hier bei HTML-Seminar:
https://www.html-seminar.de/css-flexbox.htm
Übersicht über Flex und Grid:
Ich habe es bisher noch nicht erwähnt, aber ich bin kein Freund von Bootstrap. Ist nur eine zusätzliche Schicht. Warum nicht gleich mit dem Orginal von Flex arbeiten?
Beschreibe doch mal den Hintergrund dieses Vorhabens, damit man es sich besser vorstellen kann. Machbar ist es ganz sicher.
Auch eine coole Sache das mit dem grid-auto-flow: dense;. Aber man kann auch die Einschränkungen nicht übersehen: Die Items sind an das Grid gebunden und müssen durch object-fit: cover;, d. h. Abschneiden, passend gemacht werden. Mal sehen was die Zukunft bringt und ob sich die Lösung von Firefox etablieren wird.
Im Masonry JS sind die Panoramabilder zwar klein (nämlich gleich breit wie die normalen), aber dafür können alle Bilder unterschiedliche Formate haben.
Seh ich das richtig so?
Ja, das trifft zu, beim Masonry-JS wird nichts abgeschnitten. Man kann jedoch durch die Klasse "grid-item--width2" die Breite eines Items vergrößern, aber auch nur manuell.
Das ist mir auch schon aufgefallen, dass die Texte oben kleben. Wenn Du auf der Bootstrap-Schiene bleiben willst, kannst Du die Texte mit Flex zentrieren:
<div class="col-4 column-header d-flex justify-content-center align-items-center">Dispo/Team</div>Dich stört, dass die Zellen in der oberen Zeile die Höhe nicht vollständig ausfüllen, was sichtbar ist, wenn die Rahmen aktiv sind?
Das kannst Du beheben, indem Du das Alignment auf stretch statt center setzt:
<div class="row justify-content-center align-items-stretch grid-heading">Anscheinend funktioniert die Free-Version nur für font-weight: 900; , siehe hier:
https://stackoverflow.com/questions/4789…ont-awesome-v-5
und hier:
https://fontawesome.com/how-to-use/on-…elements#define
Füge ich das hinzu werden die grünen Kamerasymbole sichtbar.
Zitat von MrMurphyMit CSS-Grid lässt sich bereits seit Jahren ein von denen so genanntes "echtes" Masonry-Grid erzeugen.
Das liest sich viel versprechend. Hast Du eine Demo? Ich finde nur dieses:
https://css-tricks.com/native-css-mas…ut-in-css-grid/
und sie schreiben, dass es erst in einem Nightly-Build von Firefox verfügbar ist.
Der Editor bringt es an den Tag: Du hast da zwei Fehler bei der Generierung des HTML:
echo "<div class='BilderBorder'><a href='PicturesBeer/$Link' data-lightbox='Show' data-title='$Brauerei'><img src='PicturesBeer/$Link' alt='Bierglas' width='240px'<br><div class='BorderColor'>$JG </div><div class='BorderColor'>$Bemerkungen </div></div>";Das img-Tag ist nicht abgeschlossen und das a-Tag ebenfalls nicht.
Ich habe da mal ein Javascript gemacht, das das Heraufskalieren unterbindet:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#img1 {
object-fit: cover;
}
#img2 {
object-fit: contain;
}
#img3 {
object-fit: contain;
width: 80vw;
height: 45vw
}
img.my-object-fit {
width: 900px;
height: 450px;
}
</style>
</head>
<body>
<img id="img1" class="my-object-fit" src="images/dia0.jpg">
<img id="img2" class="my-object-fit" src="images/dia0.jpg">
<img id="img3" class="my-object-fit" src="images/busleft.png">
<script>
document.querySelectorAll('img.my-object-fit').forEach(img => {
// Wir muessen warten, bis das Bild geladen wurde,
// damit die natuerlichen Abmessungen bekannt sind:
img.onload = (event) => {
const compStyle = getComputedStyle(event.target),
objectFit = compStyle.objectFit,
// Die Abmessungen des Bildes, die im CSS fest gelegt wurden:
csshImg = parseInt(compStyle.height),
csswImg = parseInt(compStyle.width),
// Die natuerlichen Abmessungen des Bildes:
nhImg = img.naturalHeight,
nwImg = img.naturalWidth;
if (
// Wuerde das Bild bei "contain" herauf skaliert?
(objectFit == 'contain' && (nhImg < csshImg && nwImg < csswImg))
||
// Wuerde das Bild bei "cover" herauf skaliert?
(objectFit == 'cover' && (nhImg < csshImg || nwImg < csswImg))
) {
// Herauf skalieren unterbinden:
img.style.objectFit = 'none';
img.style.height = 'auto';
img.style.width = 'auto';
}
}
});
</script>
</body>
</html>Damit es funktioniert, musst Du den Bildern, auf die es wirken soll, die Klasse my-object-fit geben und das Skript an das Ende des body stellen, vor das schließende </body>. Versuche, ob es das tut, was Du erwartest. Komplizierte Berechnungen sind es nicht, im Kern jeweils nur drei Abfragen für cover und contain.
Zitat von MrMurphyJS ist eine Programmiersprache, die zwar gerne auf Webseiten genutzt wird, mit HTML und CSS aber sachlich nicht zu tun hat. JS führt seine Berechnungen damit isoliert ohne Rücksicht auf HTML und CSS durch.
Diese Auffassung ist, sagen wir Mal, stark diskussionswürdig 
: Javascript führt das DOM und damit ein abstraktes Abbild der Struktur des Dokumentes einschl. der Möglichkeit, es dynamisch aufzubauen und zu verändern. Dieses Abbild steht gleichwertig neben dem Wege, die Struktur des Dokumentes durch die Auszeichnungssprache HTML zu beschreiben. Und es bietet auch die Möglichkeit, die CSS-Eigenschaften über das style-Attribut festzulegen und zu verändern, ebenso wie es durch CSS möglich ist. Bisher habe ich geschrieben "gleichwertig" und "ebenso", aber Javascript ist eine Programmiersprache und kann entsprechend viel mehr: Beliebige Ausdrücke berechnen und Algorithmen ausführen. Weil eine Auszeichnungssprache darüber nicht verfügt, gibt es immer wieder Situationen, wo sie nicht ausreicht, um ein Layout zu realisieren. Beispiele:
Die schlauere Lösung wäre dem Browser das Rechnen zu überlassen.
Der Browser ist in einer Programmiersprache wie C++ oder was-weiß-ich geschrieben. In einer gängigen Programmiersprache gibt es Dinge wie das DOM nicht sondern es muss erst Mal implementiert werden. Insofern ist Javascript sehr viel näher an der Struktur und Gestaltung des Dokumentes da das DOM und die Zugriffe darauf schon vorhanden sind.
Hallo Elly, auf dieses Problem bin ich auch ganz am Anfang gestoßen als ich meine Demo mit Masonry gemacht habe und leider kenne ich auch keine einfache Lösung.
Ich habe den Wert, um den man die Breite in Prozent verringern muss, so berechnet:
Bezeichnen wir die Anzahl der Bilder mit nrImgs und die Breite der Gaps mit wGap.
Die Anzahl der Gaps ist nrGaps = nrImgs - 1. Die Summe der Breite der Gaps beträgt dann
wGapSum = nrGaps * wGap = (nrImgs - 1) * wGap
Diese Summe muessen wir auf alle Bilder verteilen, um den Wert wDelta zu ermitteln, um den wir die Breite der Bilder verringern müssen:
wDelta = wGapSum / nrImgs = (nrImgs - 1) * wGap / nrImgs = (nrImgs - 1) / nrImgs * wGap = (1 - 1 / nrImgs) * wGap
So weit die Theorie. Es sollte möglich sein, den rechten Ausdruck in dem Wert für das CSS-Calc einzutragen, hier für 3 Bilder pro Zeile:
width:calc(33.333% - (1 - 1 / 3) * 10px);
So mit meiner Demo getestet, wo ich im Javascript gutter: 10 verwendet hatte und funktioniert dort.
Ebenfalls ganz am Anfang fand ich es ein wenig enttäuschend, dass masonry.js einem diese Rechnerei nicht abnimmt.
Bei MDN gibt es eine ganz gute Demo für vertical-align:
https://developer.mozilla.org/de/docs/Web/CSS/vertical-align
Dass baseline der Defaultwert für Bilder ist, ist für mich auch eines der Mysterien von CSS, denn es ist fast immer unerwünscht, außer man will Smileys relativ zur Schrift ausrichten.
Das Problem mit der Schrift hast Du anscheinend lösen können?
Häufiges Problem. Der Grund ist, dass der Default-Wert für vertical-align baseline ist, dadurch entsteht unten eine kleine Lücke. Du kannst das beheben, indem Du für die img-Elemente vertical-align z. B. auf top setzt.
Bei einem kurzen Blick auf Masonry und Fancybox kann ich nichts über Kategorien finden. Bei Fancybox kann man die Bilder unterschiedlichen Galerien zuordnen, das hat aber nur den Effekt, dass das Durchblättern bei geöffneter Fancybox auf die Bilder der betr. Galerie beschränkt ist. Aber das ist ja wahrscheinlich nicht, was Du dir vorstellst? Wenn Du bei Masonry bleiben willst, ist dann wahrscheinlich Handarbeit angesagt: Den Bildern die Kategorien z. B. in je einem data-Attribut zuordnen und dann filtern.
Wenn der Wert schon in der Liste bzw. im Select drin ist, brauchst Du ja nur noch das Attribut "selected" zu setzen. Eine Schleife über die Optionen und das Attribut setzen, wenn die Werte übereinstimmen:
<script>
var XYZ = "3";
</script>
<select name="Auswahl" id="choose">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<script>
document.querySelectorAll('#choose option').forEach(opt => {
if (opt.textContent == XYZ) {
opt.selected = true;
}
});
</script>OK, aber ich sehe keinen Grund, das ohne die DOM-Methoden zu machen oder das HTML vorzubereiten und einzufügen?
Ich stimme MrMurphy so weit zu, dass ein Grid für dein Layout besser geeignet ist. Der Grund dafür, dass sich deine Tabellenzellen nicht an deine Vorgaben halten, ist jedoch ein anderer:
Um diese Tabellen herum liegt ein doppeltes <pre> (vermutlich durch den Shop vorgegeben). Dieses hat per Default ein white-space: pre; Weil dieses an die Tabellenzellen vererbt wird, verhindert es, dass der Text umgebrochen wird:
html-seminar.de/woltlab/attachment/2922/
Überschreibe ich dies durch white-space: normal; , wird der Text umgebrochen und die Tabellenzellen halten die vorgegebene Breite ein:
Ja die können ruhig abgeschnitten werden.
Dafür hast Du ja mit object-fit: cover; schon eine Lösung gefunden.
Ich nehme an, das verbleibende Problem ist dann dieses:
Problem an der ganzen Sache ist, dass auch relativ kleine Bilder dabei sind.
Bei meinem Versuch wurden diese dann auf die Weite gestreckt.
Das heißt, Du willst nicht, dass kleine Bilder herauf skaliert werden?