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.
Wie öffnest Du denn die URLs in der Linksammlung? Möglicher Weise in einem iFrame? Das mögen manche Webmaster nicht und blockieren es.
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; ?>;
Hallo Tim und willkommen im Forum!
Erst mal zu deiner Detailfrage:
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:
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?
Viel Erfolg und beste Grüße, Ulrich
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.
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.
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:
<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.
Und das CSS:
/* 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;
}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.
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.
<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>© 2025Alle Rechte vorbehalten.</p>
</div>
</footer>
</body>Ich wiederhole mich ungern, aber:
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.
BTW:
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 
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' })
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.
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.
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?
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.
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.
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.
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.
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?
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.