Beiträge von Sempervivum

Sempervivum

Rufe die Datei benutzer.php mal direkt im Browser auf und prüfe, ob sie das ausgibt, was Du erwartest.

Sempervivum

Ich verwende mit bestem Erfolg das kostenlose Freefilesync für die Sicherung meiner persönlichen Daten. Kopiert nur die Dateien, die sich seit der letzten Synchronisation geändert haben, daher ist die Sync. im Nu erledigt.

Sempervivum

Flex ist zwar sehr häufig nützlich aber in diesem Fall nicht notwendig. So funktioniert es:

https://codepen.io/Sempervivum/pen/vYNxoZr?editors=1000

Sempervivum

"Ich konnte auch im Internet nichts entsprechendes finde." Ich leider auch nicht, mir ist nur eine Lösung mit Javascript eingefallen:

Code

    <script>
        const cells = document.querySelectorAll('div.grid-funk > div');
        cells.forEach((item, idx) => {
            const iRow = parseInt(idx / 3),
                theClass = 'row-' + iRow;
            item.classList.add(theClass);
            item.addEventListener('mouseover', () => {
                document.querySelectorAll('div.grid-funk > div.' + theClass).forEach((item, idx) => {
                    item.classList.add('hovered');
                });
            });
            item.addEventListener('mouseout', () => {
                document.querySelectorAll('div.grid-funk > div.' + theClass).forEach((item, idx) => {
                    item.classList.remove('hovered');
                });
            });
        });
    </script>

Alles anzeigen

CSS:

Code

    .grid-funk>div.hovered {
        background-color: lightgray;
    }

Sempervivum

Am einfachsten geht das, indem man der betr. Tabellenzelle eine Klasse gibt:

<td class="bold-on-hover">Inhalt</td>

Dann kann man die Schrift in dieser Zelle fett machen:

Code

#tbl_ersatzteil tbody tr:hover td.bold-on-hover {
    font-weight: bold;
}

Sempervivum

Die Standard-Überschriften kannst Du doch beliebig mit CSS anders stylen. Warum möchtest Du selbst welche definieren?

Sempervivum

Zitat

Was ist "best use"? Meiner Auffassung nach der schlankere HTML-Code in Form einer einzigen ul ohne Unterliste. Was meint Ihr?

Ich bin da anderer Meinung: Hier spielt nicht nur eine Rolle, wie schlank der HTML-Code ist und wie leicht er sich stylen lässt sondern auch die Logik bzw. Semantik: Die Unterpunkte sind jeweils einem Hauptpunkt unter- bzw. zugeordnet und das sollte sich auch direkt im HTML wiederspiegeln.

Zitat

In CSS brauche ich so so oder so einen Klassenselektor für die Unterliste.

Nicht unbedingt:

CSS für die Listenelemente der Hauptliste:

Code

nav>ul>li {
}

CSS für die Listenelemente der Unterliste:

Code

nav>ul>li>ul>li {
}

Sempervivum

Mit Gridlayout ist das recht einfach, hier eine Demo:

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Zwei-Spalten-Layout mit Grid</title>
    <style>
        body {
            margin: 0;
        }

        .grid-2-cols {
            margin-left: 3em;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1em 1em;
        }

        section {
            padding: 0.5em;
        }
    </style>
</head>

<body>
    <section>
        <h1>Die Hauptüberschrift</h1>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua.
        </p>
    </section>
    <div class="grid-2-cols">
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
        <section>
            <h2>Die Überschrift</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
                et dolore
                magna aliquyam erat, sed diam voluptua.
            </p>
        </section>
    </div>
</body>

</html>

Alles anzeigen

Ich verstehe deine Frage erst Mal so, dass Du dieses Layout haben möchtest. Wenn Du auch das "Weitere Ergebnisse ...:" haben willst, muss man das noch etwas erweitern.

Sempervivum

Bootstrap für das Layout ist heute überflüssig, denn es gibt Grid und Flex.

Sempervivum

Das Metatag mit dem charset ist nur die eine Seite der Medaille. Du musst deine Dateien aber auch in UTF-8 speichern, sonst hilft das nichts.

Sempervivum

Wie Axel es gemacht hat, sehe ich, aber nicht deinen Code. Posten diesen doch mal.

Sempervivum

Zitat

Der Befehl wird dadurch schon ganz schön aufwändig:

Das trifft allerdings zu Wenn Du dagegen mein Posting nicht ignorierst, ist es für jeden Button ein Einzeiler, wie bisher, plus ein paar Zeilen CSS, diese aber nur einmal für alle Buttons.

Sempervivum

Ich würde anders herum vorgehen: Es bei dem a-href-Tag belassen, das button-Tag weglassen und das a-href-Tag mit CSS so gestalten, dass es wie ein Button aussieht. Wird ebenfalls so empfohlen, z. B. bei Stackoverflow.

Sempervivum

Zitat

Dies ist eine Code Competition bei der ich nur JavaScript verwenden darf.

Das erklärt natürlich einiges. Ich hatte mich schon gewundert, warum Du dafür keine serverseitige Lösung andenkst, aber dachte "er wird schon wissen, was er tut"

Sempervivum

Ich habe zwar keine Ahnung von Firebase aber mit solchen asynchronen Vorgängen ist es immer gleich: Dort wo Du die Liste generierst, bist Du nicht direkt in der Funktion readData sonden in der anonymen Funktion des then. Notierst Du dort return, verlässt Du letztere Funktion mit diesem Rückgabewert aber nicht readData. Du musst bei dem asynchronen Konzept bleiben und deinen weiteren Code in der anonymen Funktion notieren und ausführen. Ggf. damit es eleganter ist und falls die Funktion readData universeller sein soll, diesen Code in einer Funktion als Callback übergeben.

Sempervivum

Der Code ist jederzeit zugänglich durch Rechtsklick - Seitenquelltext anzeigen o. ä. aber hier ist er nochmal:

HTML

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

<head>
    <meta charset="utf-8" />
    <title>Swipe Demo</title>
    <style>
        body {
            margin: 0;
        }

        #img-container {
            width: 100%;
            display: flex;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;
        }

        #img-container img {
            width: calc(100vmin - 20px);
            height: calc(100vmin - 20px);
            object-fit: contain;
            min-height: 1px;
            flex: 0 0 100%;
            scroll-snap-align: center;
        }
    </style>
</head>

<body>
    <div id="img-container">
        <img src="images/bild1.jpg">
        <img src="images/bild2.jpg">
        <img src="images/bild3.jpg">
        <img src="images/bild4.jpg">
        <img src="images/bild5.jpg">
        <img src="images/buddenbrookhaus_01.jpg">
        <img src="images/burgtor_01.jpg">
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

Vielleicht so:

http://localhost:8080/_HP-Subdomain/…vertically.html

Sempervivum

Ich bin zwar nicht Sailor aber ich bin ein wenig verwirrt: Ganz am Anfang hast Du von vertikalem Scrollen geschrieben und auch bei dem Link dort wird vertikal gescrollt. Aber zuletzt geht es um horizontales Scrollen?

Für des horizontale habe ich vor ein paar Tagen für einen anderen Thread so etwas gemacht:

https://webentwicklung.ulrichbangert.de/thread363-swipe-images-2.html

Funktioniert auch auf Touch-Geräten durch Wischen.

Sempervivum

Zitat

Wären die Formulare dann auch einzeln Speicherbar?

Dafür müsstest Du den Dateinamen der Zieldatei angeben. Entweder durch Eingabe durch den Benutzer (fehleranfällig) oder indem Du ein Select dafür anlegst. Dann braucht es das Formular nur einmal zu geben, voraus gesetzt, die Dateien sind alle gleich aufgebaut.

Sempervivum

Zitat

wenn ich zb. 20 Bilder in einer Thumbnail -ansicht untereinander habe und zb. auf das 9. klicke, wie kann dann das 9. Bild kommen und ich in beide Richtungen swipen, also vor zum 1. und bis zum letzten.

Das lässt sich machen, wenn man mit Ankern arbeitet:

https://webentwicklung.ulrichbangert.de/thread363-swipe-images-3.html

Allerdings hat man dann nicht dieses schöne weiche Scrollen.

Zitat

Oder tüfteln wir da grad an etwas herum, für das es coole dienste wie eben zb. fancybox gibt ?

Das kann gut sein: Ich kenne da ein Skript namens Swiper, wo man die Galerie formatfüllend anlegen kann und ebenfalls durch Wischen navigieren:

https://swiperjs.com/demos/#thumbs_gallery

Wie Du siehst hat man auch dieses weiche Scrollen wenn man auf ein Thumbnail klickt. Außerdem lässt sich diese Galerie auch am PC durch Wischen mit der Maus bedienen. Ich habe schon Benutzer kennen gelernt, die es vom Handy kannten und erwarteten, dass es auch am PC funktioniert.

Beiträge von Sempervivum

JavaScript Load

Backup als Schutz gegen Ransomware

Langes Bild in Box scrollen

Zeile hervorheben bei Grid?

Zelle in Tabelle hervorheben

Umbruch für eigene h1 erzwingen

Verschachteln von Listen in HTML5?

Layout für Anzeige der Suchmaschiene

Bootstrap verwenden

Umlaute falsch angezeigt auf PHP Seiten

Verschachteln von Listen in HTML5?

Input statt Button: Keine Argumente

Input statt Button: Keine Argumente

Meetingplaner

Array mit Objekten zurückgeben

Vertikale Bildergalerie zum Scrolen

Vertikale Bildergalerie zum Scrolen

Vertikale Bildergalerie zum Scrolen

HTML mit Platzhaltern "automatisieren"

sticky header funktioniert bei effekten nicht