Beiträge von Sempervivum

Sempervivum

a) ist eine Aufgabe, die sehr häufig auftritt. Die althergebrachte Methode besteht darin, die Elemente oben und unten zu fixieren. Dann hat man das Problem, dass die Haupt-Inhalte zunächst verdeckt werden und man muss dies z. B. mit Margins lösen. Eine moderne Variante besteht darin, den Haupt-Container mit Flexlayout so einzurichten, dass er genau den freien Raum ausfüllt.

Für die gescrollte Tabelle gibt es dann auch zwei Möglichkeiten: Wenn Du möchtest, dass die Scrollbar sichtbar ist und die Position anzeigt, kannst Du bei dem Verfahren bleiben, die Scrollposition zu animieren. Wenn Du auf die Scrollbar verzichten kannst, kannst Du die Tabelle ebenfalls mit der Webanimation-API scrollen.

Code

    <p id="textBox1" class="textBox">
        <span>News Ticker --- Short Text ---&nbsp;</span>
    </p>
    <main>
<!-- Hier dann deine gescrollte Tabelle -->
    </main>
    <p id="textBox2" class="textBox">
        <span>News Ticker --- You can add a text here --- It might be very long --- Even longer than screen
            width --- Please let me
            know if this ticker is fine ---&nbsp;</span>
    </p>

Alles anzeigen

Code

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
        }

        .textBox {
            height: 2em;
            overflow: hidden;
            line-height: 2em;
            padding: 0;
            width: 100%;
            background-color: lightblue;
            flex: 0 0 auto;
        }

        .textBox span {
            display: inline-block;
            white-space: nowrap;
            font-size: 2em;
        }
    </style>

Alles anzeigen

Sempervivum

Zitat

Nur hat mir noch niemand erklären können wie man den einen Hintergrund ohne Höhenangabe erstellt.

I. allg. hat der betr. Container auch einen Inhalt in Form von Text, Bildern etc. Dann stellt sich die Höhe dem entsprechend ein und das Hintergrundbild passt sich an.

Hat er keinen Inhalt, sehe ich keinen Sinn darin, ein Hintergrundbild zu verwenden, sondern Du kannst dann auch ein img-Tag nehmen, wo sich die Abmessungen automatisch einstellen.

Sempervivum

Was das Flackern betrifft, habe ich keine Idee, wie man es beheben kann. Möglicherweise gibt es da in den Einstellungen der Browser etwas verstecktes aber das entzieht sich meiner Kenntnis.

Sempervivum

Das geladene Skript ist das Polyfill für die Webanimation-API von dem ich schrieb. Wahrscheinlich brauchst Du es nicht mehr, denn inzwischen müsste auch Edge diese unterstützen. Versuche es!

Sempervivum

Selektor und Geschwindigkeit als Parameter, damit man mehrere Laufschriften verwenden kann:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Demo Webanimation including Polyfill</title>

    <style>
        body {
            margin: 0;
        }

        .textBox {
            height: 2em;
            overflow: hidden;
            line-height: 2em;
            padding: 0;
            width: 100%;
            background-color: lightblue;
        }

        .textBox span {
            display: inline-block;
            white-space: nowrap;
            font-size: 2em;
        }
    </style>

    <script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
</head>

<body>
    <p id="textBox1" class="textBox">
        <span>News Ticker --- Short Text ---&nbsp;</span>
    </p>
    <p id="textBox2" class="textBox">
        <span>News Ticker --- You can add a text here --- It might be very long --- Even longer than screen
            width --- Please let me
            know if this ticker is fine ---&nbsp;</span>
    </p>
    <script>
        function doScroll(selector, v) {
            const outerEle = document.querySelector(selector);
            const innerEle = outerEle.querySelector("span");
            const outerWidth = outerEle.offsetWidth;
            const scrollAmount = innerEle.offsetWidth;
            while (innerEle.offsetWidth < outerWidth) {
                innerEle.textContent += innerEle.textContent;
            }
            innerEle.textContent += innerEle.textContent;
            const innerWidth = innerEle.offsetWidth;
            // v = s / t
            // t = s / v
            // s = der Weg bzw. scrollAmount
            // v = die Geschwindigkeit als Konstante
            const duration = scrollAmount / v;
            let ani;
            const anikf = [
                { transform: 'translate(0)' },
                { transform: 'translate(-' + scrollAmount + 'px)' }
            ];
            const aniopt = {
                duration: duration,
                iterations: 1,
                fill: 'forwards',
                direction: 'normal',
                iterations: Infinity
            };
            ani = innerEle.animate(anikf, aniopt);
        }
        doScroll('#textBox1', 0.1);
        doScroll('#textBox2', 0.05);
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Kurzer Text auf breitem Fenster:

Code

<body>
    <p class="textBox">
        <span id="mySpan">News Ticker --- Short Text ---&nbsp;</span>
    </p>
    <script>
        function doScroll() {
            v = 0.1;
            const innerEle = document.querySelector(".textBox span");
            const outerEle = document.querySelector(".textBox");
            const outerWidth = outerEle.offsetWidth;
            const scrollAmount = innerEle.offsetWidth;
            while (innerEle.offsetWidth < outerWidth) {
                innerEle.textContent += innerEle.textContent;
            }
            innerEle.textContent += innerEle.textContent;
            const innerWidth = innerEle.offsetWidth;
            // v = s / t
            // t = s / v
            // s = der Weg bzw. scrollAmount
            // v = die Geschwindigkeit als Konstante
            const duration = scrollAmount / v;
            let ani;
            const anikf = [
                { transform: 'translate(0)' },
                { transform: 'translate(-' + scrollAmount + 'px)' }
            ];
            const aniopt = {
                duration: duration,
                iterations: 1,
                fill: 'forwards',
                direction: 'normal',
                iterations: Infinity
            };
            ani = innerEle.animate(anikf, aniopt);
        }
        doScroll();
    </script>
</body>

Alles anzeigen

Sempervivum

Zitat

Für das CSS solltest du nur class verwenden.

Die Forderung habe ich schon häufig gelesen. Was ich noch nicht gelesen habe ist eine stichhaltige und überzeugende Begründung dafür. Und auch keine Referenz dafür.

Sempervivum

Ich habe mal eine Demo, die ich früher mit Webanimation gemacht hatte, heraus gesucht und auf deine Gegebenheiten angepasst. Den Text habe ich durch das Script verdoppelt. Dadurch läuft er ohne Lücke endlos durch.

Einschränkungen:

Der Text muss die Fensterbreite mindestens ausfüllen, andernfalls müsste man ihn mehr als ein Mal vervielfachen.
Ist verbesserungsfähig in Bezug darauf, dass man die wesentlichen Parameter als Parameter übergeben könnte, wahrscheinlich auch die Richtung.
Die Demo von früher enthielt ein Polyfill, ich habe nicht untersucht, ob man das heute noch braucht.

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Demo Webanimation including Polyfill</title>

    <style>
        body {
            margin: 0;
        }

        .textBox {
            height: 2em;
            overflow: hidden;
            line-height: 2em;
            padding: 0;
            width: 100%;
            background-color: lightblue;
        }

        .textBox span {
            display: inline-block;
            white-space: nowrap;
            font-size: 2em;
        }
    </style>

    <script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
</head>

<body>
    <p class="textBox">
        <span id="mySpan">News Ticker --- You can add a text here --- It might be very long --- Even longer than screen
            width --- Please let me
            know if this ticker is fine&nbsp;</span>
    </p>
    <script>
        function doScroll() {
            v = 0.1;
            const innerEle = document.querySelector(".textBox span");
            const outerEle = document.querySelector(".textBox");
            innerEle.textContent += innerEle.textContent;
            const innerWidth = innerEle.offsetWidth;
            const outerWidth = outerEle.offsetWidth;
            const scrollAmount = innerWidth / 2;
            // v = s / t
            // t = s / v
            // s = der Weg bzw. scrollAmount
            // v = die Geschwindigkeit als Konstante
            const duration = scrollAmount / v;
            var ani;
            var anikf = [
                { transform: 'translate(0)' },
                { transform: 'translate(-' + scrollAmount + 'px)' }
            ];
            var aniopt = {
                duration: duration,
                iterations: 1,
                fill: 'forwards',
                direction: 'normal',
                iterations: Infinity
            };
            ani = innerEle.animate(anikf, aniopt);
        }
        doScroll();
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Zitat

a) da mit CSS die Animationen in Sekunden angegeben wird hatte zur Folge, dass bei kurzen Texten die Animation viel zu langsam war und bei langen Texten viel zu schnell.

b) die "Berechnung" der Breite war mir nicht möglich. Daher wurde der Text dann entweder nicht ganz raus oder rein gescrollt

Daher war ich auf JavaScript ausgewichen.

Da bin ich voll bei dir. Reine CSS-Lösungen sind gut und schön, aber wenn es um Erweiterungen und Änderungen geht, ist es eine Qual, sie anzupassen.

Es gibt jedoch die Webanimation-API:

https://wiki.selfhtml.org/wiki/JavaScript/Animation

Da kann man problemlos mit JS die Parameter der Animation berechnen und einstellen, z. B. die Dauer abhängig von der Länge des Textes.

Sempervivum

Als Einstieg eignet sich auch das Tutorial hier:

Kontaktformular Tutorial

Sempervivum

Wahrscheinlich geht es auch mit SQL aber mit einer einfachen Nachverarbeitung ist es sehr einfach. Ich habe es mit einem Mockup getestet:

Code

$result = [
    ['date' => '10.10.2020', 'name' => 'Faustus', 'punkte' => 99],
    ['date' => '03.10.2020', 'name' => 'Faustus', 'punkte' => 90],
    ['date' => '25.09.2020', 'name' => 'Faustus', 'punkte' => 75],
];
$ref = $result[count($result) - 1]['punkte'];
foreach ($result as &$row) {
    $row['diff'] = $row['punkte'] - $ref;
}
var_dump($result);

Sempervivum

BTW: Inzwischen gibt es semantische Tags wodurch das Ganze übersichtlicher werden würde:

https://wiki.selfhtml.org/wiki/HTML/Tuto…nstrukturierung

Zur Verwendung empfohlen!

Sempervivum

Sehr gut, auf diese Weise kommen wir weiter.

Das ist kein Problem des CSS sondern die Grafik selber hat unten einen transparenten Bereich, wo der Hintergrund des #footer durchscheint:

html-seminar.de/woltlab/attachment/2650/

Sempervivum

Auf deinem Screenshot sehe ich den Abstand aber bei mir tritt er nicht auf. Kannst Du das online stellen und die URL posten?

Welchen Browser benutzt Du, möglicher Weise hat dieser andere Default-Werte als meiner (Opera)?

Sempervivum

Zitat

Das margin-bottom: -200px; vom #wrapper wird ignoriert

Bei mir wird es nicht ignoriert sondern der überlagerte Teil des #wrapper verschwindet unter dem #footer weil #footer nach dem #wrapper notiert wird. Gib dem #wrapper einen hohen z-index und ein position: relative; :

Code

#wrapper {
    width: 900px;
    margin: 0 auto;
    margin-top: -300px;
    margin-bottom: -200px;
    display: flex;
    flex-direction: row;
    z-index: 100;
    position: relative;
}

Zitat

#footer_background hat einen größeren Abstand zu unterem Bildschirmrand ist aber dennoch fast richtig ausgerichtet.

Das kann ich auf meiner Testseite nicht nachvollziehen.

Sempervivum

Da musst Du dem #footer noch ein position: relative; verpassen, damit der überlagerte Container relativ zu diesem ausgerichtet wird (so wie Du es in deinem Posting #5 schon hattest):

Code

        #footer {
            position: relative;
            height: 612px;
            background-image: url(images/dia0.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        #footer_background {
            width: 100%;
            position: absolute;
            bottom: 0;
            height: 293px;
            background-image: url(images/busleft.png);
            background-repeat: no-repeat;
            background-size: cover;
        }

Alles anzeigen

Sempervivum

Zitat von wakeme

Bei dem Code wird die Grafik gar nicht angezeigt.

Das liegt vermutlich hieran:

Zitat von Sempvervivum

Ich musste lediglich ... dem überlagerten, absolut positionierten, die Breite 100% geben, damit er sichtbar wird.

Aber ohne das HTML kann man nur Rätsel raten ...

Sempervivum

Leider schreibst Du nicht, was denn genau nicht funktioniert. Dein CSS funktioniert bei mir einwandfrei, wenn ich eine Testdatei anlege. Ich musste lediglich einen main-Bereich hinzu fügen, um den Footer nach unten zu bekommen und dem überlagerten, absolut positionierten, die Breite 100% geben, damit er sichtbar wird.

Gibt sicher auch andere Varianten, mit Flex ginge es auch, wenn man die überlagerte Grafik nicht absolut positioniert.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Footer multiple background</title>
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
        }

        #footer {
            flex: 0 0 auto;
            position: relative;
            height: 612px;
            background-image: url(images/dia0.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        #footer_background {
            position: absolute;
            bottom: 0;
            height: 293px;
            width: 100%;
            background-image: url(images/busleft.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <main>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit
        amet.
    </main>
    <footer id="footer">
        <div id="footer_background"></div>
    </footer>
</body>

</html>

Alles anzeigen

Sempervivum

Gern geschehen! Für welchen Variante hast Du dich denn entschieden?

Sempervivum

Ja, mit Javascript geht es natürlich auch:

Auf der Ausgangsseite die Links genau so.

Auf der Reporting-Seite kannst Du den Dateinamen wie hier beschrieben aus der URL ermitteln:

https://developer.mozilla.org/de/docs/Web/API/URLSearchParams

Wenn du den Dateinamen hast, kannst Du im object-Tag das Attribut data setzen:

Code

document.querySelector('object').data = 'unterverzeichnis/' + dateiname;

Würde auch mit Ajax gehen, aber so ist es einfacher.

Beiträge von Sempervivum

Laufschrift erstellen

Footer fälschlicherweise mittig ausgerichtet

Laufschrift erstellen

Laufschrift erstellen

Laufschrift erstellen

Laufschrift erstellen

Footer fälschlicherweise mittig ausgerichtet

Laufschrift erstellen

Laufschrift erstellen

Formular mit multiblen Checkboxen

Subtraktion von Werten in verschiedenen Zeilen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Überlappen von Divisionen

Laden verschiedener Textdateien über ein Dropdown-Menü

Laden verschiedener Textdateien über ein Dropdown-Menü