Beiträge von Sempervivum

PS: Die Spalten kannst Du leicht mit diesem CSS gleich breit machen:

.gallery-col {
    flex: 1;
}

Der Grund ist, dass ich von der Galerie in deinem Eingangsposting ausgegangen bin. Dort sind die Bilder in den Spalten unterschiedlich hoch und daher in der Höhe versetzt. Das würde nicht funktionieren, wenn man sie in Reihen anordnen würde. Und die Animation setzt voraus, dass bei übereinander liegenden Bilder der rechte und linke Rand in einer Linie ist, sonst würde es zu Überdeckungen kommen, wenn die Bilder von unten eingleiten.

OK, dann habe ich wirklich keine Erklärung. Eben noch Mal nachgesehen und getBoundingClientRect wird anscheinend von alles Browsern einschl. IE 11 unterstützt.

Zitat

Aber kannst du mir vl sagen, warum das nur online klappt und offline nicht?

Dafür habe ich leider keine Erklärung. Was benutzt Du denn offline für eine Entwicklungsumgebung und was für einen Browser? getBoundingClientRect ist relativ neu und falls Du einen Editor mit integrierter Vorschau benutzt, könnte es sein, dass diese die Funktion noch nicht unterstützt.

Wenn Du erst seit ein paar Tagen dabei bist, hast Du dir ja etwas relativ Anspruchsvolles vorgenommen. Zunächst mal sind da einige Syntaxfehler in deinem Code. Mache dich mit der Console vertraut, dort wirst Du Hinweise finden, wo die Fehler liegen.

Möglicher Weise gibt es davor noch ein a.button. So funktioniert es:

https://jsfiddle.net/Sempervivum/6ueLq1wv/2/

Lade es doch mal mit dem Javascript hoch.

Das muss übrigens noch erweitert werden für alle div.card:

https://jsfiddle.net/Sempervivum/adcz5xnq/3/

Zitat

Ein Rätsel ist mir außerdem (auch ohne Bootstrap), warum dieser Button mal am unteren Rand klebt, mal nicht.

Die Position des Buttons orientiert sich nicht am unteren Rand des Containers sondern am unteren Rand des Elementes darüber, das ist der letzte Absatz. Dort klebt er dran.

Man kann jedoch, wenn alle Stricke reißen, die Dinge mit Javascript berechnen und positionieren:

https://jsfiddle.net/Sempervivum/mr4gt716/4/

Das ändert sich ja von Minute zu Minute

Vorhin sah es noch so aus:

.cell p, .card p, .card2 p {
    /* display: inline-block; */
    font-size: 1.1rem;
    color: #6C6C6C;
    padding: 0 10px 10px 10px;
    margin: 0;
    text-align: justify;
}
@media (max-width: 890px)
.card p {
    /* width: 52%; */
}
.card p {
    /* width: 56%; */
    vertical-align: top;
    /* float: right; */
}

Nachdem ich die kritischen Einträge heraus genommen hatte, funktionierte das Umfließen.

Mir scheint, MrMurphy hat Recht: Wenn ich ein minimales Beispiel mache, ohne Breitenangaben etc. für die Absätze, floatet der Text einwandfrei.

https://jsfiddle.net/Sempervivum/mr4gt716/

Wenn man durchgehenden Text hätte, wäre es kein Problem, dann funktioniert das Umfließen. Aber Du willst den Text ja strukturieren, so dass an bestimmten Positionen ein kleiner Abstand entsteht.

Ah, verstehe, Du möchtest gerade das erreichen, dass z. B. zwei Absätze rechts vom Bild sind und der dritte darunter. Ich sehe mir das noch Mal an ...

Zitat

Schieb mal das Browserfenster zu

Das habe ich getan, aber ich kann das Problem trotzdem nicht nachvollziehen: Bei ca. 680px Breite springt die Darstellung von horizontal auf vertikal um. Einen Zwischenzustand, dass der eine Absatz rechts wäre und ein anderer unter dem Bild, kann ich nicht erkennen. Getestet in Opera und Firefox.

Zitat

Es gibt vl tatsächlich eine Lösung für mehrere p-Elemente wie ich es jetzt hier hab mit Bild vor dem ersten p-Element, sodass der Text - bei bestimmter Bildschirmbreite - dann doch unter dem Bild weiterfließt.

Ich bin fast sicher, dass es solch eine Lösung gibt, nur wenn ich mir die Seite aus deinem ersten Posting ansehe, tut es doch das alles schon: Browserfenster breit - Text steht rechts vom Bild, Browserfenster schmal - Text steht unter dem Bild. Nur ein kleiner Schönheitsfehler, dass bei einer bestimmten Breite das Bild den Raum horizontal nicht ausfüllt.

Besser den resultierenden HTML-Text aus der Quellcode-Ansicht des Browsers posten.

Zitat

wo gezeigt wurde, dass es genau so funktioniert wie bei einem Bild welches man mit object-fit anpasst ohne dass es sich verzerrt.

Ja, aber wenn es sich nicht verzerrt, muss man entweder cover nehmen, dann wird etwas abgeschnitten oder contain, dann bleibt Luft.

object-fit funktioniert nur mit ersetzten Elementen, wie Bildern und Videos, siehe hier:

https://wiki.selfhtml.org/wiki/CSS/Eigen…-fit#object-fit

Ob iFrame dazu zählt, weiß ich nicht genau.

Man kann aber mit Javascript die richtigen Abmessungen berechnen und zuweisen.

Möchtest Du denn zulassen, dass das Video entweder verzerrt oder beschnitten wird? Das wäre die Konsequenz, wenn es jetzt die Breite nicht ausfüllt.

Zitat

Alle Bilder aneinander angepasst auf einer Seite.

Das kannst Du mit diesem Layout erreichen:

    <div id="gallery-cont">
        <div class="col">
            <img src="images/dia0.jpg">
            <img src="images/dia1.jpg">
            <img src="images/dia2.jpg">
            <img src="images/dia3.jpg">
            <img src="images/dia4.jpg">
            <img src="images/dia0.jpg">
            <img src="images/dia1.jpg">
            <img src="images/dia2.jpg">
            <img src="images/dia3.jpg">
            <img src="images/dia4.jpg">
        </div>
        <div class="col">
            <img src="images/busleft.png">
            <img src="images/dia1.jpg">
            <img src="images/dia2.jpg">
            <img src="images/dia3.jpg">
            <img src="images/dia4.jpg">
            <img src="images/dia0.jpg">
            <img src="images/dia1.jpg">
            <img src="images/dia2.jpg">
            <img src="images/dia3.jpg">
            <img src="images/dia4.jpg">
        </div>
        <div class="col">
            <img src="images/dia0.jpg">
            <img src="images/dia1.jpg">
            <img src="images/dia2.jpg">
            <img src="images/dia3.jpg">
            <img src="images/dia4.jpg">
            <img src="images/dia0.jpg">
            <img src="images/dia1.jpg">
            <img src="images/dia2.jpg">
            <img src="images/dia3.jpg">
            <img src="images/dia4.jpg">
        </div>
    </div>

        #gallery-cont {
            display: flex;
        }

        .col img {
            width: 100%;
            vertical-align: top;
            transition: margin-top 1s ease 0s;
        }

Allerdings wird dabei die Verteilung auf die Spalten nicht automatisch austariert, wenn die Bilder verschieden hoch sind. Dafür gibt es aber fertige Scripts, das Stichwort lautet "masonry".

Zitat

Das Einfliegen von unten ist ja schön, aber nicht zwingend.

Dafür habe ich dieses Skript geschrieben:

        const images = document.querySelectorAll("#gallery-cont img");
        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top <= (window.innerHeight || document.documentElement.clientHeight)
            );
        }
        window.addEventListener('load', onScroll);
        window.addEventListener('scroll', onScroll);
        function onScroll() {
            images.forEach(item => {
                if (isElementInViewport(item)) {
                    item.style.transform = 'translateY(0)';
                } else {
                    item.style.transform = 'translateY(200px)';
                }
            });
        }

Zitat

Und man sollte auch ein Bild anklicken können und dann durch die Galerie durchklicken können, wie das in dem Bootstrap-Template ist.

Dafür findest Du unter dem Stichwort "lightbox" zahlreiche Skripts. Mein Favorit ist Fancybox 3, das ist einfach anzuwenden und unterstützt Touch-Bedienung:

https://fancyapps.com/fancybox/3/

Funktioniert einwandfrei aber das Skript fügt nur eine Klasse bei dem a-Element hinzu. Du brauchst noch ein CSS um darauf aufbauend das Element hervorzuheben, z. B. so:

a.active {
    background-color: lightblue;
}

Zitat

Geht das denn auch, wenn durch den Link eine neue Seite aufgerufen wird oder funktioniert das nur innerhalb derselben Seite?

Ich denke schon, wenn das Skript in der aufgerufenen Seite vorhanden ist.

Wo hast Du das Skript denn platziert? Am besten am Ende des Body, vor dem schließenden </body>.

Wenn es dann nicht funktioniert, poste am besten die URL einer Testseite, damit man es sich ansehen kann.

OK, das wäre dann die Variante ohne Array. Funktioniert das denn?