Zwar eine PHP-Datei, die jedoch HTML generiert, daher ist der Doctype erforderlich. Warum es mit diesem bei dir nicht funktioniert, kannst Du wahrscheinlich hier nachlesen:
Beiträge von Sempervivum
-
-
Ja, so etwas gibt es. Informiere dich über Attributeselektoren, z. B. hier:
-
BTW: Hoffentlich bekomme ich jetzt keine Abmahnung, weil ich fertigen Code gepostet habe Aber wir haben es ja zuvor mit dem Hinweis auf Stackoverflow versucht, wo es ein fertiges Beispiel gibt, aber der TO konnte es nicht auf seine Seite übertragen.
-
Das Kernproblem, warum dein Layout nicht so funktioniert, wie es soll, ist, dass Du dieses
drin hast. Diesem hättest Du display:flex geben müssen.
Außerdem fehlt der Doctype.ist etwas verwirrend. Ich empfehle, statt dessen das main-Tag zu verwenden, das semantisch dafür vorgesehen ist.
Dann würde das HTML so aussehen:
HTML
Alles anzeigen<!doctype html> <html> <head> <link href="../css/themen-home.css" rel="stylesheet"> <meta charset="UTF-8"> <title>Skytastic.eu- Forum Test1</title> <link href="../css/header.css" rel="stylesheet"> <link href="../css/footer.css" rel="stylesheet"> </head> <body> <header> <div class="header"> <div class="navigate"> <a href="../anmelden.php"> <button class="navs">Anmelden</button> </a> <a href="../registrieren.php"> <button class="navs">Registrieren</button> </a> </div> <div class="navigate"> <a href="../"> <button class="navs">Start</button> </a> <form action="../beitrag-erstellen.php" method="post"> <input name="thema" type="hidden" value="Test1"> <button name="gesendet" class="navs1" type="submit">Beitrag erstellen</button> </form> <a href=""> <button class="navs"></button> </a> <a href=""> <button class="navs"></button> </a> <a href=""> <button class="navs"></button> </a> <a href="../../"> <button class="navs">Website</button> </a> </div> </div> <h1>Skytastic.eu - Forum - Test1</h1> </header> <main> <h1>Es wurde bisher kein Beitrag in diesem Thema erstellt.</h1> </main> <footer> <p>Erstellt von Hoppeltiger</p> <p>Discord: <a href="https://discord.gg/Mk4BBe">https://discord.gg/Mk4BBe</a> </p> <p> <a href="../adminpannel.php">Adminpannel</a> </p> </footer> </body> </html>
und das CSS so:
Code
Alles anzeigenbody { margin: 0; padding: 0; background-image: url("images/dia2.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; display: flex; flex-direction: column; min-height: 100vh; } .sbutton { border: 2px solid #595a5b; padding: 10px 20px; outline: none; cursor: pointer; transition-duration: 0.4s; text-transform: uppercase; border-radius: 15px; margin-bottom: 20px; margin-left: 20px; text-align: center; opacity: 0.75; } .sbutton:hover { background-color: #595a5b; color: white; } a { color: black; text-decoration: none; } .beitraege { margin-top: 15px; margin-bottom: 15px; } .beitraege h1 { line-height: 0; } .p_dat { text-align: right; font-size: 1em; } .p { font-size: 1em; } .p { line-height: 0; } .einr { display: flex; justify-content: space-between; } hr { border-color: rgba(192, 192, 192, 1); } header { flex: 0 0 auto; } main { padding: 15px; background-color: rgba(255, 255, 255, 0.75); flex: 1 1 auto; } footer { flex: 0 0 auto; } @media(min-width: 700px) { main { width: 45%; margin: 0 auto; padding-bottom: 64px; } }
und das Layout müsste das sein, was Du dir vorstellst:
Header oben, Footer unten und der grau hinterlegte Inhalt füllt den Raum dazwischen aus.
-
Poste besser das generierte HTML aus der Quelltextansicht des Browsers.
-
Am besten wäre es, wenn Du das online hättest und die URL posten könntest, dann würde man sicher schnell erkennen, warum es nicht funktiert.
-
- Wie oben schon geschrieben, ist calc für alle Maßeinheiten möglich, d. h. auch für die Höhe.
- Wenn Du Flexlayout verwendest, wie in dem Beispiel bei Stackoverflow, brauchst Du kein calc, weil der Browser automatisch die richtige Höhe berechnet.
-
Hier findest Du ein Beispiel:
https://stackoverflow.com/ques…ng-in-the-middle/24065699
(das jsFiddle)
Noch nicht ganz vorbildlich, da feste Höhen für Header und Footer, aber das Grundprinzip, dass der mittlere Content-Bereich den freien Raum ausfüllt, passt.
-
Das erledigt man besser mit Flexlayout, damit sich die Höhe des Content-Bereiches automatisch anpasst, so dass er den verfügbaren Platz zwischen Header und Footer genau ausfüllt. Es ist immer ungünstig, mit festen Abmessungen zu arbeiten, weil man dann die Berechnungen jedes Mal anpassen muss, wenn sich an der Höhe des Header oder des Footer etwas ändert.
-
-
Wenn ich dich richtig verstanden habe, sollte das mit zwei Funktionen möglich sein:
Codefunction func1() { // Hier der Code, der "vorher schon geschrieben sein soll" } function func2() { // dies ist die Funktion, die laufen soll, damit func1() aufgerufen wird // einfach func1 aufrufen func1(); // weitere Aktionen in func2 }
Zu einfach? Wenn es nicht das ist, was Du meinst, beschreibe es genauer.
-
Das Programmieren an sich erlernen kannst Du auch mit den Syntax einer Bibliothek. Vor 30, 40 Jahren meinten die Leute, man könne nur "richtig" Programmieren lernen, wenn man eine Assemblersprache erlernt und Hochsprachen wie Pascal oder C erst Mal außen vor lässt. Und wer redet heute noch von Assembler ...?
-
Wenn es um die Arbeit mit Canvas geht, empfehle ich, eine Bibliothek wie jCanvas zu verwenden, damit wird alles intuitiver und übersichtlicher. Deine Knöpfe würden dann so aussehen:
-
Zitat
Ich habe genau 1 Modal:
Für jeden Nachricht wird automatisch ein neues erstellt.
Ist das nicht ein Widerspruch? Wenn für jede Nachricht ein neues erstellt wird, werden es doch mehrere?
-
Du verwendest ja Bootstrap und das macht es schon mit Javascript.
Ich habe das Ganze mal auf das Wesentliche reduziert und ein Demo gemacht, dort kannst Du ablesen, wie die Übergabe über ein data-Attribut funktioniert:HTML
Alles anzeigen<!doctype html> <html> <head> <title>test</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script> </head> <body> <div>Hallo wie geht es dir? <a style='margin-top: -2px; margin-bottom: -2px; width: 100px;' class='btn btn-raised bg-red btn-block btn-xs waves-effect' data-toggle='modal' data-target="#modal" data-message="Hallo wie geht es dir?" name=''> Editieren</a> </div> <div>Hallo wie geht es Ihnen? <a style='margin-top: -2px; margin-bottom: -2px; width: 100px;' class='btn btn-raised bg-red btn-block btn-xs waves-effect' data-toggle='modal' data-target="#modal" data-message="Hallo wie geht es Ihnen?" name=''> Editieren</a> </div> <div class="modal fade" id="modal" tabindex="-1" role="dialog"> <form method="post"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header" style="text-align: center"> <h4 style="display: block; margin: 0 auto;" class="modal-title" id="largeModalLabel">Testmodal für Nachricht.</h4> </div> <hr style="width: 90%; margin-left: 25px;"> <div class="modal-body" style="margin-top: -30px"> <div class="form-group"> <br> <p id="p-username" style="font-weight: bold">Die Nachricht:</p> <div class="form-line"> <input id="input-message" type="text" name="message" class="form-control" value="" autocomplete="off"> </div> </div> <br> </div> <div class="modal-footer" style="display: block; margin: 0 auto;"> <button name="submit" class="form-control btn btn-primary btn-link waves-effect" style="color: white; width: 250px">E-Mail Adresse ändern</button> </div> <br> </div> </div> </form> </div> <script> $('#modal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var msg = button.data('message') // Extract info from data-* attributes var modal = $(this) modal.find('#input-message').val(msg); }) </script> </body> </html>
Wenn Du es mit PHP machen möchtest, so ist das auch möglich, indem Du für jede Nachricht ein eigenes Modal definierst und über dessen ID und data-target jeweils das richtige öffnest, so wie ich es ebenfalls in dem vorigen Thread beschrieben hatte.
-
Der Sachverhalt ist noch der gleiche wie in dem vorigen Thread: Da das Modal durch Javascript geöffnet wird, kann die Übergabe der Daten auch nur durch Javascript erfolgen, jedenfalls wenn Du nur ein Modal für alle Texte haben willst. Die Lösung auf PHP-Seite zu suchen, führt nicht zum Ziel, wie man an der ergebnislosen Diskussion dort sieht. Und die Lösung ist ebenfalls die selbe, die ich schon in dem vorigen Thread gepostet habe:
-
-
Da gibt es Bibliotheken, um die Touchevents einfacher handhaben zu können, z. B. diese:
Das pan-Event sollte geeignet sein für deinen Zweck.
-
html-seminar.de/woltlab/attachment/1636/
Ein guter Editor und sinnvolles Einrücken bringen es an den Tag:
Da wo das beanstandete Semikolon steht muss ein Komma hin.
Weil dein Code nicht eingerückt war, habe ich mich offenbar getäuscht: Die weitere Bearbeitung steht offenbar doch im success-Callback.
Jetzt musst Du die Definiton von gItem vor das forEach schieben:
-
Zwei Probleme sehe ich auf Anhieb:
- Die Variable gItem ist lokal innerhalb der forEach-Schleife definiert. Daher ist sie außerhalb der Schleife nicht sichtbar und ein Zugriff würde einen "undefined"-Fehler liefern.
- Selbst wenn Du die Variable gItem global definieren würdest, würde es nicht funktionieren, weil Ajax asynchron arbeitet: Die Anfrage wird an den Server gesendet, etwas später trifft die Antwort mit den Daten ein. Greifst Du jetzt auf das Ergebnis direkt im Anschluss an den Ajax-Aufruf zu, so ist die Antwort vom Server noch nicht da und die Inhalte in der Variablen nicht vorbesetzt.
Lösung: Alles was die Variable gItem mit Inhalt benötigt, ebenfalls im success-Callback erledigen. Wenn dir der Code dann zu unübersichtlich wird, kannst Du die Aktionen in eine Funktion schreiben und diese als Callback-Funktion übergeben.