Beiträge von Sempervivum

Sempervivum

Zitat

da alle INPUT-Felder zusammen bereits in einem großen FORM liegen. Aus Übersichtsgründen (und auch wegen zwei Hintergrundprozessen) möchte ich aber nicht alle INPUT-Felder auf einmal anzeigen lassen, sondern sie in inhaltlich logische Abschnitte unterteilen.

In dem Fall würde es sich anbieten, fieldset-Tags für die Unterteilung zu benutzen. Ich habe dafür mal eine Demo gemacht:

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test Eingabe-Events</title>
    <style>
        input:invalid {
            background-color: red;
        }

        fieldset:invalid {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <form>
        <fieldset>
            <input id="test1" required oninput="pruefung(this)">Test 1
            <input id="test2" required oninput="pruefung(this)">Test 2
            <input id="test3" required oninput="pruefung(this)">Test 3
            <button type="button">Weiter</button>
        </fieldset>
        <fieldset>
            <input id="test4" required oninput="pruefung(this)">Test 4
            <input id="test5" required oninput="pruefung(this)">Test 5
            <input id="test6" required oninput="pruefung(this)">Test 6
            <button type="button">Weiter</button>
        </fieldset>
    </form>
    <!-- Dieser Button nur zum Testen der Eingabe durch Skript: -->
    <button id="btn-for-test" onclick="eingabe('#test3', 'teststring')">Eintragen</button>
    <script>
        function eingabe(sel, val) {
            const elem = document.querySelector(sel);
            elem.value = val;
            pruefung(elem);
        }
        function pruefung(elem) {
            const
                // Wir suchen aufwärts im Baum das Fieldset wo das Input drin liegt:
                fldset = elem.closest('fieldset'),
                // Ausgehend vom Fieldset suchen wir abwärts den Button innerhalb des Fieldset:
                btn = fldset.querySelector('button');
            // Jetzt prüfen wir, ob alle Elemente im Fieldset valide bzw. 
            // in unserem Fall ausgefüllt sind. Das ist der Fall wenn das Fieldset
            // die Pseudoklasse ":valid" besitzt:
            if (fldset.matches(':valid')) {
                console.log('valid, alle Eingabefelder des aktuellen Fieldset gefüllt');
            } else {
                console.log('invalid');
            }
        }
    </script>
</body>

</html>

Alles anzeigen

So geht es mit wenigen Zeilen ganz ohne Klassen, nur die IDs für die Inputs brauchst Du wahrscheinlich, um die Werte auch durch das Skript ändern zu können.

Und, Du hast zwar nicht danach gefragt, aber ich habe ein Feature benutzt was häufig als hilfreich für den Benutzer angesehen wird: Abhängig davon ob ein Element valide oder nicht valide ist, kann man die Anzeige variabel gestalten, hier mit rotem Hintergrund bzw. Rahmen.

Sempervivum

PS: Noch einfacher geht es, wenn Du die Formularvalidierung von HTML5 benutzt:

Die Inputs in ein Formular legen und ihnen ein "required" geben, dann kannst Du mit der Funktion checkValidity prüfen, ob alles valide ist bzw. in deinem Fall alle Inputs ausgefüllt:

Code

    <form>
        <input id="test1" required oninput="pruefung()">Test 1
        <input id="test2" required oninput="pruefung()">Test 2
        <input id="test3" required oninput="pruefung()">Test 3
    </form>
    <script>
        function pruefung() {
            const frm = document.querySelector('form');
            if (frm.checkValidity()) {
                console.log('valid, alle Eingabefelder gefüllt');
            } else {
                console.log('invalid');
            }
        }
    </script>

Alles anzeigen

Sempervivum

Guten Morgen,

ich hatte gestern schon die Idee, den MutationObserver zu verwenden, aber das scheitert daran, dass beim Setzen des Value sich das DOM nicht ändert und der Observer nicht feuert. Aber hier:

MutationObserver doesn't react to changes to text input fields

I'm working on adapting an IE-specific website to other browsers. For example, onpropertychange has been used extensively, and I'm using MutationObserver to…

stackoverflow.com

wird eine Lösung vorgeschlagen: Das value-Attribut ändern, dann feuert der MutationObserver. Hat zwar den Nachteil, dass Du zweigleisig fahren musst, wenn Du auch manuelle Eingaben erfassen willst, wäre aber eine recht elegante Lösung.

Und auch zu deinem letzten Code für die Überprüfung mehrerer Inputs fällt mir ein elegantere Lösung ein:

Den betr. Inputs eine Klasse geben und sie in einer Schleife abarbeiten:

Code

<input id="input1" class="to-check">
<input id="input2" class="to-check">
<input id="input3" class="to-check">
<script>
    let alleGefuellt = true;
    document.querySelectorAll('.to-check').forEach(item => {
         if (item.value === '') {
             alleGefuellt = false;
         }
    });
    if (alleGefuellt) {
        // weiter-Button aktivieren
    } else {
        // weiter-Button deaktivieren
    }
</script>

Alles anzeigen

(ungetestet)

Sempervivum

Hallo DataPearl und willkommen im Forum!

Ich dachte zunächst, das die Events "change" oder "input" dein Problem lösen aber das war ein Irrtum, wie auch hier angegeben wird:

Pure JavaScript listen to input value change

Is there a way I can create a constant function that listens to an input, so when that the input value changes, something is triggered immediately? I am…

stackoverflow.com

Die Lösungen mit Custom-Events, die dort angegeben werden sind unnötig kompliziert. Besser eine Funktion definieren, die deine Aktionen ausführt und explizit aufrufen:

Code

    <button onclick="test1()">Test 1</button>
    <button onclick="test2()">Test 2</button>
    <button onclick="leer()">Leeren</button>
    <input id="inputeins">
    <script>
        function test1() {
            $('#inputeins').val('Test1');
            aenderung();
        }
        function test2() {
            $('#inputeins').val('Test2');
            aenderung();
        }
        function leer() {
            $('#inputeins').val('');
            aenderung();
        }
        function aenderung() {
            console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
        }
    </script>

Alles anzeigen

Oder etwas kompakter:

Code

    <button onclick="aenderung('test1')">Test 1</button>
    <button onclick="aenderung('test2')">Test 2</button>
    <button onclick="aenderung('')">Leeren</button>
    <input id="inputeins">
    <script>
        function aenderung(theValue) {
            $('#inputeins').val(theValue);
            aenderungReaktion();
        }
        function aenderungReaktion() {
            console.log('Wert von #inputeins geändert zu ' + $('#inputeins').val());
        }
    </script>

Alles anzeigen

Alternativ könnte man das auch noch etwas moderner aufziehen und das Ganze mit Klassen steuern und das Eventbubbling ausnutzen:

Code

    <button class="button-for-test1" data-val="test1">Test 1</button>
    <button class="button-for-test1" data-val="test2">Test 2</button>
    <button class="button-for-test1" data-val="">Leeren</button>
    <input id="inputeins">
    <button id="weiter">Weiter</button>
    <script>
        document.addEventListener('click', event => {
            // Wurde ein Button für das Eintragen in #inputeins gedrückt?
            if (event.target.classList.contains('button-for-test1')) {
                const
                    // Einzutragenden Wert bereit stellen:
                    dat = event.target.dataset.val,
                    input1 = document.getElementById('inputeins'),
                    weiterBtn = document.getElementById('weiter');
                input1.value = dat;
                // Ist der einzutragende Wert kein Leerstring?
                if (dat != '') {
                    // Klasse "aktiv" beim weiter-Button eintragen:
                    weiterBtn.classList.add('aktiv')
                } else {
                    // Klasse "aktiv" beim weiter-Button loeschen:
                    weiterBtn.classList.remove('aktiv')
                }
            }
            // Wurd der weiter-Button gedrückt?
            if (event.target.id == 'weiter') {
                // Weitere Verarbeitung abhängig von der Klasse "aktiv":
                if (event.target.classList.contains('aktiv')) {
                    console.log('weiter-Button gedrückt bei Zustand "aktiv"');
                } else {
                    console.log('weiter-Button gedrückt bei Zustand "inaktiv"');
                }
            }
        });
    </script>

Alles anzeigen

Dann kannst Du auch die Gestaltung des weiter-Buttons mit CSS steuern:

Code

        button#weiter {
            background-color: red;
        }

        button#weiter.aktiv {
            background-color: lightgrey;
        }

Sempervivum

Hallo Tamaleus

wenn ich das richtig verstehe, müsste das variabel mit Parametern so aussehen:

Code

// Inhalt von script.js
async function ladeAusschnitt(
	url, // Die URL der Quellseite
	srcID, // Die ID des Abschnitts auf der Quellseite
	dstID // die ID des Abschnitts auf der Zielseite
) {
	try {
		// 1. Datei abrufen
		const response = await fetch(url);

		// 2. Antwort in Text umwandeln
		const text = await response.text();

		// 3. Optional: Nur einen bestimmten Teil extrahieren (Ausschnitt)
		const parser = new DOMParser();
		const doc = parser.parseFromString(text, 'text/html');
		const ausschnitt = doc.querySelector(srcID).innerHTML;

		// 4. In das Ziel-Element einfügen
		document.getElementById(dstID).innerHTML = ausschnitt;
	} catch (error) {
		console.error('Fehler beim Laden:', error);
	}
}

// Funktion beim Seitenstart ausführen
ladeAusschnitt('mnu2-arturs-docs-archiv-div15.php', '#ada-id15', 'ziel-container15');

Alles anzeigen

Ungetestet, versuche ob es funktioniert und melde dich wieder, wenn nicht.

Das ist jetzt ein wenig ineffizient weil Du bei jedem Aufruf die komplette Quellseite laden musst. Besser wäre es eigentlich, gleich auf der Serverseite das Filtern zu erledigen. Aber Du schreibst ja, dass Du schon glücklich wärst, wenn es auf diese Weise funktioniert.

Beste Grüße, Ulrich

Sempervivum

Hallo Tamaleus willkommen zurück!

Ich habe einen Blick auf deine Dateien geworfen und offenbar sollen diese Abschnitte statisch und sofort beim Laden der Seite eingefügt werden. In dem Fall wäre es einfacher, das auf der Serverseite mit PHP zu erledigen.

Beste grüße, Ulrich

Sempervivum

Guten Morgen Kaspar und willkommen im Forum!

Folgende Hinweise zu deinem Problem:

Bist Du schon mit der Console vertraut? Rechtklick auf der Seite und dann "(Element) untersuchen". Dort bekommst Du Fehlermeldungen, die dir zeigen, wo genau Du suchen musst.
Datatables ist bewährt und sehr gut, aber auch ein wenig in die Jahre gekommen. Es gibt eine Alternative, die einfacher anzuwenden ist und kein jQuery braucht: https://tabulator.info/ Da Du ganz am Anfang ist, empfehle ich, gleich damit einzusteigen. Auch die spaltenspezifische Filterung ist ganz einfach mit einem headerFilter:"input" zu machen.
Wenn Du anfängst, lässt Du am besten erst Mal alle Erweiterungen weg und bringst es so zum Laufen. Bei Tabulator findest Du ein "Getting Started" - "Quick Start".

Wenn Du dann noch nicht zum Ziel kommst, poste dein HTML, JS und CSS hier. Oder, noch besser, bring es online, damit man es live untersuchen kann.

Beste Grüße, Ulrich

Sempervivum

Das ist mir auch schon untergekommen: button- und a-href-Tag vertragen sich nicht. Lösung: Das a-href-Tag mit CSS als Button stylen.

Sempervivum

Ich habe das jetzt getestet und bei mir funktioniert dieser Link einwandfrei, auch das Öffnen im selben Tab. Ich dachte erst, es liegt daran, dass der Link http ungesichert verwendet aber das hat sich nicht bestätigt. tasso.net leitet auf die gesicherte Verbindung um.

Poste am besten Mal die URL der vollständigen Seite.

Sempervivum

Wie öffnest Du denn die URLs in der Linksammlung? Möglicher Weise in einem iFrame? Das mögen manche Webmaster nicht und blockieren es.

Sempervivum

Hallo Nebbiolo,

eine Variable aus PHP in Javascript zuzuweisen ist sehr einfach.

Ersetze dies:
var max_size = 350;

durch dies:
var max_size = <?php echo $max_size; ?>;

Sempervivum

Hallo Tim und willkommen im Forum!

Erst mal zu deiner Detailfrage:

Zitat

Ich habe auch schon überlegt ob if(strlen nciht mit dem decimal Feld kompatibel ist?

Vermutlich bezieht sich das auf die Validierung der Eingaben. Auch wenn die betr. Werte in der DB vom Typ int sind, sind die Werte, die aus den Eingabefeldern kommen, Strings. Daher ist es nicht verkehrt, ihre Länge zu prüfen.

Der Kern der Sache scheint mir jedoch dieser Code zu sein:

Code

if ((strlen($Schraube)) > 0 and (! ctype_alpha($Schraube))) {
    echo "Data Error";
    exit;
}

Hier steigst Du aus wenn die Länge >0 ist, d. h. eine Eingabe vorhanden. Das ist jedoch der richtige Fall, d. h. Du musst die Abfrage genau umgekehrt machen.

Darüber hinaus: Wie ist denn dieser Code entstanden?

Dein HTML ist fehlerhaft. Benutze den Validator und behebe die Fehler:
https://validator.w3.org/
Das Javascript ist sehr stark veraltet. Benutze fetch, dann wird alles viel einfacher und übersichtlicher:
https://www.w3schools.com/js/js_api_fetch.asp
Im Zusammenhang mit fetch kann dir auch das FormData-Objekt die Arbeit sehr erleichtern, Du brauchst dann nicht die URL von Hand zusammen zu bauen:
https://javascript.info/formdata
Auch das Tabellenlayout ist veraltet. Informiere dich über Flexlayout:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Im PHP benutzt Du PDO, das ist schon Mal sehr positiv. Geh am besten noch einen Schritt weiter und benutze Prepared Statements:
https://www.php-einfach.de/mysql-tutorial/crashkurs-pdo/

Viel Erfolg und beste Grüße, Ulrich

Sempervivum

Nein, das meinte ich nicht sondern beim WHERE:

WHERE (tabelle1.autor = tabelle2.user AND `tabelle1.id`= ?) LIMIT 10"

Kann auch tabelle2 sein, das habe ich nicht untersucht.

Sempervivum

Du prüfst in der where-Klausel eine ID ab. Weil es diese in beiden Tabellen gibt ist das mehrdeutig. Du musst, ebenso wie bei den anderen Spaltennamen, den Tabellennamen davor stellen.

Sempervivum

Zitat

nur bekomm ich die boxen nicht gleich ... die mittlere will einfach nicht höher werden.

Hast Du das HTML und CSS so übernommen wie ich es gepostet habe? Bei mir, nachdem ich deinen Code übernommen hatte, war das genau so. Grund waren die überflüssigen div-Container, hier:

Code

               <section class="contact-section">
                    <div class="contact-form-container">

Dabei nahm die umgebende section die selbe Höhe ein wie die benachbarten aber das div darin nicht.

Sempervivum

Und das CSS:

Code

        /* Grundlegende Stile */
        :root {
            --primary-color: #ffa800;
            --secondary-color: #f4f7fa;
            --text-color: #333;
            --white: #fff;
            --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--secondary-color);
        }

        .container {
            max-width: 1100px;
            margin: auto;
            padding: 0 20px;
        }

        /* Header */
        .header {
            background: var(--primary-color);
            color: var(--white);
            padding: 60px 0;
            text-align: center;
        }

        .header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .special-heading {
            font-size: 1em;
            font-family: 'Arial', sans-serif;
            color: purple;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: bold;
            padding-bottom: 50px;
        }

        .header p {
            font-size: 1.2rem;
        }

        /* Hauptinhalt */
        .main-content {
            padding: 60px 0;
            display: grid;
            grid-template-columns: 1fr;
        }

        .call-to-action {
            text-align: center;
            margin-bottom: 30px;
        }

        .call-to-action h2 {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        .contact-section {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }

        .contact-form-container,
        .call-button-container {
            background: var(--white);
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
        }

        .contact-section h3 {
            text-align: center;
            margin-bottom: 25px;
            color: var(--primary-color);
        }

        /* Formular-Styling */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        /* Button-Styling */
        .btn {
            display: inline-block;
            background: var(--primary-color);
            color: var(--white);
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s;
            width: 100%;
            text-align: center;
        }

        .btn:hover {
            background: #0056b3;
            transform: translateY(-2px);
        }

        /* Anruf-Button */
        .call-button-container {
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }

        .call-btn {
            text-align: center;
            margin-bottom: 25px;
            margin-top: 20px;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .call-btn .icon {
            font-size: 1.5rem;
        }

        .call-button-container {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        /* Formular-Status-Nachrichten */
        .form-status {
            margin-top: 20px;
            text-align: center;
            font-weight: 600;
        }

        .form-status.success {
            color: green;
        }

        .form-status.error {
            color: red;
        }

        .faq-section {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
            background: var(--white);
            box-shadow: var(--box-shadow);
        }

        .faq-item {
            margin-bottom: 10px;
        }

        /*.faq-question {
    display: block; /* or inline-block 
    padding: 10px;
    background-color: #f0f0f0;A
    border: 1px solid #ccc;
    text-decoration: none; /* Entfernt Unterstreichung 
    color: #333; /* Textfarbe 
    transition: background-color 0.3s ease;  /*Hover-Effekt 
}*/

        .faq-question:hover {
            background-color: #e0e0e0;
        }

        /* Footer */
        .footer {
            background: var(--text-color);
            color: var(--white);
            text-align: center;
            padding: 20px 0;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            /* Halbtransparenter Hintergrund */
            display: none;
            /* Zuerst ausgeblendet */
            justify-content: center;
            align-items: center;
        }

        .popup {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        #closePopup {
            margin-top: 10px;
        }

        .overlay.show {
            display: flex;
            /* Popup anzeigen */
        }

        /* Responsivität für kleinere Bildschirme */
        @media (max-width: 768px) {
            .contact-section {
                flex-direction: column;
                gap: 20px;
            }
        }


        /* details>div {
            padding: .5em;
        }

        details {
            border: thin solid;
        }

        summary {
            position: relative;
            line-height: 300%;
            padding-left: 1em;
            font-weight: bold;
        }

        summary::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E");
            position: absolute;
            width: 1em;
            aspect-ratio: 1;
            right: 1em;
            top: .2em;
            transition: all 0.5s;
        }

        details[open] summary::after {
            transform: scale(1, -1);
            filter: hue-rotate(250deg)
        } */

        details>div {
            padding: .5em;
        }

        details {
            border: thin solid;
        }

        summary {
            /* position: relative; */
            /* line-height: 300%; */
            padding-left: 1em;
            font-weight: bold;
            display: flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.3em 0.2em 0.3em 0.2em;
            gap: 0.2em;
        }

        summary::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath fill='green' d='m0,8 v-4 l5,5 v-10 h5 v10 l5,-5 v4 l-7.5,7.5 z'/%3E%3C/svg%3E");
            /* position: absolute; */
            width: 1em;
            aspect-ratio: 1;
            transform: translateY(0.1em);
            /* right: 1em;
            top: .2em; */
            transition: all 0.5s;
        }

        details[open] summary::after {
            transform: scale(1, -1);
            filter: hue-rotate(250deg)
        }

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

        main.main-content {
            grid-template-columns: 1fr;
        }

        @media (min-width: 50em) {
            body {
                margin: 0 auto;
                max-width: 50em;
                gap: 1em;
            }

            main.main-content {
                grid-template-columns: 1fr 1fr 1fr;
            }

            .call-to-action {
                grid-column: 1/4;
            }

Alles anzeigen

Da war einiges doppelt und evtl. müsste noch mehr bereinigt werden aber mir fehlte die Zeit.

Die FAQ-Elemente sind jetzt recht klein. Wenn da Inhalt rein kommt, könnte es zu Schwierigkeiten kommen.

Und Du hattest geschrieben, dass sich alles verschiebt, wenn man ein Akkordeon auf klappt. Das ist bei meiner Lösung auch so. Will man das vermeiden, müsste man die z. B. die Höhe begrenzen und den Overflow sichtbar machen. Aber dann wird es wahrscheinlich Probleme geben, wenn man ein Element ganz unten auf klappt.

Sempervivum

Zitat

ich danke dir für deine geduld.

Da nicht für, Geduld gehört dazu beim Programmieren.

Das Layout, dass dein HTML und CSS ergibt, sah ein wenig wild aus. Ich habe mich mal nach dem Bild in Posting #9 gerichtet und die Elemente so angeordnet. Zu viel um alles zu erklären, ich habe u. a. überflüssige Container entfernt.

Bei den Pfeilen des summary-details hast Du mit abs. Positionierung gearbeitet und dabei haben sich gleich die Nachteile offenbart: Element überlappen sich. Du kannst den Text und den Pfeil sehr gut mit Flexlayout neben einander anordnen.

Code

<body>
    <header class="header">
        <div class="container">
            <h1>Testseite</h1>
            <h2 class="special-heading">Testseite erklärung</h2>

            <p>
                “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor
            </p>
            <p> incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
                Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt
                mollit anim id est laborum.”
            </p>
        </div>
    </header>

    <main class="main-content">
        <section class="call-to-action">
            <h2>Kontaktieren Sie uns noch heute!</h2>
            <p>Nutzen Sie unser Formular oder rufen Sie uns direkt an.</p>
            <p>
                Für ein persönliches Gespräch erreichen Sie uns Montag bis Freitag
                von 00:00 bis 24:00 Uhr
            </p>
        </section>

        <section class="contact-form-container">
            <h3>Kontaktformular</h3>
            <form id=" contactForm" class="contact-form">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" name="name" required />
                </div>
                <div class="form-group">
                    <label for="email">E-Mail</label>
                    <input type="email" id="email" name="email" required />
                </div>
                <div class="form-group">
                    <label for="message">Nachricht</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn">Nachricht senden</button>
            </form>
            <div id="formStatus" class="form-status"></div>
        </section>
        <section class="call-button-container">
            <h3>Direkt anrufen</h3>

            <a href="tel:+49123456789" class="btn call-btn">
                <span class="icon">📞</span> Jetzt anrufen!
            </a>
            <p>+49 123 456789</p>
        </section>
        <section class="faq-section">
            <h1>ANTWORTEN AUF HÄUFIG GESTELLTE FRAGEN</h1>
            <div>
                <details name="acc">
                    <summary>Frage?</summary>
                    <div class="content">
                        <p>Antwort</p>
                    </div>
                </details>
                <details name="acc">
                    <summary>Frage</summary>
                    <div class="content">
                        <p>Antwort </p>
                    </div>
                </details>
                <details name="acc">
                    <summary>Frage </summary>
                    <div class="content">
                        <p>Antwort</p>
                    </div>
                </details>
            </div>
            <details name="acc">
                <summary>Frage</summary>
                <div class="content">
                    <p>Antwort</p>
                </div>
            </details>


            <!-- Mehr summary-details-Elemente -->

        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025Alle Rechte vorbehalten.</p>
        </div>
    </footer>
</body>

Alles anzeigen

Sempervivum

Ich wiederhole mich ungern, aber:

Zitat

Poste das HTML und CSS oder am besten die URL der Seite.

D. h. das neueste mit deinem Versuch, die Accordeons einzubauen. Ohne das kann man dir nicht weiter helfen.

Sempervivum

BTW:

Zitat

Ich habe versucht die per KI anpassen zu lassen, die wollen aber immer auf Krampf die html und php zu einer zusammenzufassen.

Das höre ich nicht zum ersten Mal, dass die KI alles global galaktisch in einer Datei zusammen würfeln will. Auch mit inline-CSS und -JS. Anscheinend besteht da noch Lernbedarf bei der KI

Sempervivum

Häufig ist hier der Browser-Cache der Schuldige. Versuche, die Zeit an die URL anzuhängen:

fetch('check-state.php?switch=a&t=' + Date.now(), { method: 'GET' })

Beiträge von Sempervivum

Inhalt von input ändern und zeitgleich auf Inhalt prüfen

Inhalt von input ändern und zeitgleich auf Inhalt prüfen

Inhalt von input ändern und zeitgleich auf Inhalt prüfen

Inhalt von input ändern und zeitgleich auf Inhalt prüfen

Erbitte Hilfe bei Javascript-Funktion mit 3 Parametern, in HTML an beliebiger Stelle aufrufbar

Erbitte Hilfe bei Javascript-Funktion mit 3 Parametern, in HTML an beliebiger Stelle aufrufbar

Das erste JavaScript - DataTables MultiFilter

Button für Telefonanruf anklickbar

Probleme mit manchen externen Links, neuer Tab erzwungen

Probleme mit manchen externen Links, neuer Tab erzwungen

Variable Konstante übergeben

mysql, php und Dropdown

DB-Abfrage mit array-Werten will nicht klappen

DB-Abfrage mit array-Werten will nicht klappen

Aufklappender menüpunkt

Aufklappender menüpunkt

Aufklappender menüpunkt

Aufklappender menüpunkt

Slider-Position ändern wenn Webseite neu geladen wird

Slider-Position ändern wenn Webseite neu geladen wird