Beiträge von Sempervivum

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' })

Sempervivum

Da finde ich zwar in script.js Code für Popups aber leider kein HTML.

Außerdem wird im Javascript mit getElementById gearbeitet, deshalb wird das JS nur für ein Akkordeon funktionieren.

Sempervivum

Um dieses Problem zu lösen müsste man das Ganze im Zusammenhang sehen. Poste das HTML und CSS oder am besten die URL der Seite.

Sempervivum

Im Moment ist meine Zeit ein wenig knapp, vielleicht findet sich jemand anders und nimmt sich des Problems an.

Wie schon geschrieben wäre es am besten wenn Du das online stellen könntest. Hast Du überhaupt Webspace?

Sempervivum

Zitat

Ich frage mich auch welche Checklist ich bei solchen Fehlern durchgehen müsste.

Dafür gibt es keine generelle Regel. Man muss sich das abhängig vom Fehler, der auftritt, überlegen.

Zitat

IDs und Klassen kontrolliert.

Das habe ich auch gemacht und bemerkt, dass das Element "deck-container" mit getElementById ermittelt wird, im HTML steht dies jedoch als Klasse.

Sempervivum

PS: Wenn ich mir deinen Code ansehe, finde ich nur einen Eventlistener für den Button für das Austeilen. Keinen für das Aufdecken und auch keinen für das Mischen. Du musst die noch hinzu fügen.

Sempervivum

Zitat

wie gehst du in solchen fällen vor?

Bist Du schon mit den Entwicklerwerkzeugen deines Browser vertraut? Vor allem der Debugger wäre bei JS sehr hilfreich. Du kannst damit den Ablauf des Skripts verfolgen, Variablen ansehen etc. ohne jedes Mal Ausgaben mit console.log einbauen zu müssen.

Sempervivum

Zitat

Hast du eine Idee wie ich den Code am besten sagen kann im welchen Bereich noch Runde 1 von 4 Runden (4 Leben jeder Spieler) ist?
Die KI hat mir gesagt, dass ich pro aus teil klick messen könnte welche Runde gerade ist. Und den Button dann bis zur nächsten runde sperre. Das klingt mir aber irgendwie zu unüblich und nicht als Best Practise. Wie würdest du das machen ?

Das verstehe ich jetzt nicht, vermutlich weil ich das Spiel und die Regeln nicht kenne. Kannst Du es genauer erklären?

Sempervivum

Zitat

Jetzt lassen sich auf einmal doch die Karten austeilen, es lag wohl an der Reihenfolge der Codeabfolge. Ich fülle die Kind Elemente von Stapel mit Script generierten IMG-Tags, weil ich die Vorderseiten der Karten aus dem Backend erst ausliefere(damit niemand auf die Idee kommt über Element untersuchen zu schummeln).

Vollständig verstehe ich das nicht aber ich vermute: Du zeigst erst nur die Rückseiten der Karten an und lädst die Vorderseiten dann mit Ajax nach. Allerdings finde ich das nicht in dem Code, den Du angehängt hattest. Aber wenn Du etwas nachlädst findet das fast immer asynchron statt und das kann zu Problemen führen. Hast Du das Spiel schon online? Es wäre hilfreich, wenn man es sich in Aktion ansehen könnte.

Sempervivum

Ja, das hilft schon Mal weiter, die Buttons etc. sind da. Allerdings fehlt der Kern der Sache, nämlich der Stapel. Das div ist leer und wird wahrscheinlich durch den GET-Request gefüllt. Um testen zu können habe ich es rasch von Hand mit 10 Elementen gefüllt:

Code

    <div class="stapel">
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

Alles anzeigen

Damit funktioniert jedoch das Geben der Karten einwandfrei, 3 x 3 werden auf die Spieler verteilt und eine bleibt im Stapel.

Das kann ich mir jetzt nur so erklären, dass der originale Stapel bei dir anders aussieht. Poste doch auch mal das HTML des Stapels aus der Quelltextansicht des Browsers.

Beiträge von Sempervivum

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

Aufklappender menüpunkt

Aufklappender menüpunkt

Karten auf Decks verteilen

Karten auf Decks verteilen

Karten auf Decks verteilen

Karten auf Decks verteilen

Karten auf Decks verteilen

Karten auf Decks verteilen

Karten auf Decks verteilen