Beiträge von Sempervivum

Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:

        div.modal-body div.grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 6fr 1fr;
        }

Und das Umschalten auf vertikale Anordnung ist kinderleicht:

            div.modal-body div.grid-container {
                grid-template-columns: 1fr;
            }

Aber auch bei der jetzigen Lösung mit Tabellen könntest Du es vereinfachen und auf die Klassen verzichten, wenn Du nth-of-type verwendest:

:nth-of-type | CSS-Tricks

The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level

css-tricks.com

AFAIK ist Axel der Admin. Ich kann schon so viel sagen, dass dieses Forum arg zu gespammt wurde durch Posten eines scheinbar harmlosen Beitrages und Hineineditieren von Links ein paar Tage später. Ich vermute stark, dass das Editieren deshalb gesperrt wurde.

Vermutlich ein Schreibfehler: @media (max-width: 7700px)

Auch hier hilft es weiter, konsequent auf Flex zu setzen: Statt in der Mediaquery auf Wrapping umzuschalten, die Richtung auf column setzen:

@media (max-width: 770px) {
    .flex-container {
        /* flex-wrap: wrap; */
        margin-bottom: 25px;
        flex-direction: column;
    }
}

Dann gibt es noch eine Spezialität bei Flex: Der Default für min-width und min-height ist auto, d. h. Bilder können nicht unter ihre natürliche Größe schrumpfen. Also diese auf einen sehr kleinen Wert setzen:

.flex-item-right img {
    min-width: 1px;
    min-height: 1px;
}

Zitat

Wie würdest du das das Machen 2 Boxen mit 2/3 und 1/3 Aufteilung. Also so ungefähr.

Das ist sehr einfach zu machen: Linke Box flex: 2; und rechte Box flex: 1;.

Worin besteht denn das Problem genau? Wenn ich die Breite des Browserfensters ändere sieht es auch unter 700px ganz ordentlich aus, nur am Übergang zuckt es ein wenig.

Du benutzt für flex Prozentwerte, das war mir neu weil ich bisher nur dimensionslose Werte genommen hatte. Aber Browser und VS-Code akzeptieren es und ich musste erst nachlesen, wie sie es interpretieren. Bin dann hier fündig geworden:

CSS Reference Guide: flex - LogRocket Blog

The CSS flex property is a shorthand for setting how flexible items will grow or shrink to fill their parent container.

blog.logrocket.com

Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?

flex-item-left>h1 finde ich aber ich weiß nicht genau, was Du erreichen willst? Soll diese Überschrift über dem Text stehen? Dann musst Du entweder flex-direction: column; hinzu fügen oder einfach das display: flex; weg lassen, dann bauen sich die Elemente ohnehin übereinander auf.

Dass es da schon einen Block gibt, hatte ich gar nicht gesehen. Dann brauchst Du nur das flex-wrap: wrap; in den unteren zu übernehmen und kannst auf den ersten verzichten.

#filter>ul bedeutet, dass das ul ein direktes Kind ist während ein Leerzeichen bedeutet, dass es irgend ein Nachfahre sein kann, also auch Enkel, Urenkel etc.

Das ist hier ganz gut beschrieben:

CSS/Tutorials/Selektoren/Kombinator – SELFHTML-Wiki

Das einfachste dürfte sein, die Buttons mit flex anzuordnen und den Zeilenumbruch frei zu geben:

#filter ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.5em;
}

Versuche es, mir gefällt es mit center am besten, weil dann die großen Zwischenräume in der Mitte nicht auftreten.

Das liegt an diesem CSS:

Zitat

justify-content: space-between;

Wie der Begriff schon sagt, wird der leere Raum zwischen die Elemente gelegt und in diesem Fall ist ziemlich viel leerer Raum: 2 Elemente + gab. Versuch mal center statt dessen.

Nichts ist so einfach, dass es nicht getestet werden muss. Da fehlt noch ein toLowerCase:

Fancybox.bind('[data-filter="' + value.toLowerCase() + '"] a');

OMG, PHP und Javascript durcheinander gebracht. In Javascript muss man Pluszeichen verwenden, um Strings mit Variablen zu verketten, also so:

Fancybox.bind('[data-filter="' + value + '"] a');

Ich hatte das getestet in der Console aber mit einem festen Selektor und nicht mit einer Variablen.

2. habe ich mir jetzt angesehen. Das liegt daran, dass es in der Galerie ganz am Ende ein Dummy-Element gibt, das mit :after erzeugt wurde:

    .image-gallery::after {
        content: "";
        flex-basis: 350px;
    }

Ich vermute, Du hast das eingefügt, um die Darstellung für eine bestimmte Anzahl von Spalten und Elementen passend zu machen? Aber in diesem speziellen Fall bringt das die Anordnung durcheinander.

einen Fehler gemacht, die Variable heißt value, nicht filter:

Fancybox.bind('[data-filter="' . value . '"] a');

1. Das ist allerdings suboptimal und liegt daran, dass Fancybox alles im Bauch hat nachdem es erst Mal initialisiert ist.

Die Lösung ist aber relativ einfach: In der Callback-Funktion für das Filtern die Fancybox zerstören und neu initialisieren:

        const liItem = document.querySelectorAll('#filter ul li');
            const figureItem = document.querySelectorAll('div.image-gallery figure');

            liItem.forEach(li => {
                li.onclick = function () {
                    //active
                    liItem.forEach(li => {
                        li.classList.remove('active');
                    })
                    li.classList.add("active");

                    //Filter
                    const value = li.textContent;
                    figureItem.forEach(figure => {
                        if (figure.dataset.filter == value.toLowerCase() || value == "All") {
                            figure.classList.remove('hidden');
                        } else {
                            figure.classList.add('hidden');
                        }
                    });
                    Fancybox.destroy();
                    Fancybox.bind('[data-filter="' . filter . '"] a');
                }
            });  

(ganz unten)

2. sehe ich mir jetzt an ...

Hier verschafft sich Flex Vorrang wegen dieser Anweisung: justify-content: space-between;. Wenn Du das auf center setzt, rücken die Bilder sofort zusammen.

Zu 1.: Nein, da liegen wir vollkommen auseinander. Bei mir sind sie gleich sichtbar aber Du musst offenbar erst eine Filtertaste drücken.

Lade doch mal mit Strg+F5 neu, dein CSS ist ausgelagert und es könnte ein Problem mit dem Cache sein.

Zu 2.: Das würde bewirken, dass die Taste hervor gehoben wird aber ich erwarte nicht, dass das die Bilder sichtbar macht.

Übrigens: In meinem vorigen Posting habe ich vergessen, das CSS zu kommentieren: Es soll bewirken, dass Überschrift und Filterleiste immer oben am Platz bleiben und nicht vertikal springen wenn man den Filter umschaltet.

Auf jeden Fall sind jetzt die Bilder gleich nach dem Laden sichtbar, das ist schon Mal sehr gut.

Was ich beobachte ist, dass die Galerie immer vertikal mittig im Container liegt, deshalb verschieben sich Überschrift und Filterleiste je nach Filterung.

#galerie {
    background-color: rgb(56, 52, 59);
    min-height: 100vh;
    padding-bottom: 40px;
    justify-content: flex-start;
}

Jetzt verstehe ich überhaupt nichts mehr: Bei meinem Posting #57 waren nach dem Laden alle Bilder sichtbar und keine Klasse "hidden" im figure. Also alles in Ordnung.

Jetzt ist die Klasse jedoch drin, auch in der Quelltextansicht und folgerichtig keine Bilder sichtbar. In dem folgenden Screenshot habe ich mit dem Seiteninspektor die Klasse gelöscht und sofort wird das eine Bild sichtbar.

pasted-from-clipboard.png

Auf jeden Fall muss diese Klasse heraus aus dem HTML. Wenn Du sie in deinem Editor nicht siehst, müssen wir weiter forschen.