Ausgabe aus Textarea richtig unterbringen

[Dani]

Hi!

Wie stell ich es denn an, dass die Ausgabe des Kommentars unterhalb des "Kommentar"-<td>s angezeigt wird? Hier ein Screenshot.

Also prinzipiell geht es darum, dass es seltsam aussieht wenn jemand eine Nachricht mit mehreren Absätzen schreibt(wie im Beispiel unten beim ersten Eintrag. Nun würde ich gerne wissen, wie ich das so formatiere, dass es Benutzerfreundlich angezeigt wird. (von der Optik abgesehen. die kommt später ;) )?

Hier der Code:

foreach($data as $row) {

  echo '
  <div class="gb-entry">
  <table>
    <tr>
      <td>
        Von (User): 
      </td>
      <td>
      '.$row['name'].'
      </td>
    </tr>
    <tr>
      <td>
        Am:
      </td>
      <td>
        '.$row['datum'].'
      </td>
    </tr>
    <tr>
      <td>
        Nachricht:
      </td>
      <td><p class="comment">
        '.nl2br($row['kommentare']).'
      </p></td>
    </tr>
   </table>
  </div>
      ';

}

?>

</div>
</div>
</body>

</html>

und das CSS(für den betroffenen Part):

#guestbook {

border: 1px solid red;
border-top: none;
border-bottom: none;
margin: 0;
padding: 0;
height: 100%;
width: 46%;
position: absolute;
top: 0px;
left: 27%;
text-align: center;

}

.gb-entry {

border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
height: auto;
margin: 0;
padding: 0;
word-wrap: break-word;

}

.comment {

font-color: red;
word-wrap: break-word;

}

Vielen Dank im vorraus für alle Antworten 😀

[Rolf B]

Hallo Dani,

mal davon abgesehen, dass dein Code Sicherheitslücken hat (du solltest alle Textausgaben mit htmlspecialchars() absichern) und dass Table-Layout heute nicht mehr gemacht wird (dazu wirst Du von anderen hier zu Lesen bekommen bis Dir die Augen brennen) - was genau ist das Problem? Welche Layout-Erwartung hast Du?

• Die Kommentarausgabe ist nicht rot? -> font-color gibt's nicht, die Eigenschaft heißt 'color'.
• Textbox und Kommentarausgabe nicht gleich breit?
• Zu viel Abstand zwischen den Absätzen des Kommentars?
• Das Label "Kommentar" steht nicht oben? -> für den Selektor .gb-entry td:first-child die Eigenschaft vertical-align:top setzen. Wenn Du modernere CSS-Techniken verwendest, löst sich dieses Problem aber vermutlich ohnehin von allein.

Vielleicht unterliege ich einem Trugschluss, weil ich nur ein Fragment deines Codes sehe, aber dein HTML scheint nicht responsiv zu sein. Hast Du Dich mit den Ideen aus diesem Text schon einmal befasst?

Noch ein paar Tipps zu Kleinigkeiten:

• solange Du es nicht ZWINGEND machen musst, ist ein <div> um ein anderes Container-Element nicht nötig. Hier: das .gb-entry div um die table herum. Du hättest auch die Klasse direkt an die table setzen können und das div weglassen. In einem modernen Layout hättest Du allerdings mit <article> Elementen gearbeitet, darin das flexbox- oder grid-Modell genutzt und label und output-Elemente verwendet.

• bei so großen HTML-Blöcken kann es besser sein, die PHP-Umgebung zu schließen und die Feldinhalte mit <?= ?> einzubetten. Zumindest mal musst Du dann nicht mit Anführungszeichen aufpassen, und ein brauchbarer PHP-Editor macht dann auch passendes Highlighting für den HTML-Teil. Wenn das HTML in einem String steht, macht er das nicht.

<section class="gb">
<?php
foreach ($data as $row) {
?>
<article class="gb-entry">
<label>
   <span>Von (User):</span>
   <output><?= htmlspecialchars($row['name'])?></output>
</label>
<label>
   <span>Am:</span>
   <output><?= formatiereDatum($row['datum'])?></output>
</label>
<label>
   <span>Kommentar:</span>
   <output><?= nl2br(htmlspecialchars($row['kommentare']))?></output>
</label>
</article>
<?php 
}
?>
</section>
</body>
</html>

Rolf

[Gunnar Bittersmann]

@@Rolf B

dass Table-Layout heute nicht mehr gemacht wird (dazu wirst Du von anderen hier zu Lesen bekommen bis Dir die Augen brennen)

Es ist eine Zuordnung der der linken Spalte zur rechten gegeben – so falsch ist eine Tabelle hier nicht.

Hast Du Dich mit den Ideen aus diesem Text schon einmal befasst?

Mit welcher Textstelle jetzt genau? 😉

Auch ich „habe meine Mod-Rechte mal genutzt“.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Es ist eine Zuordnung der der linken Spalte zur rechten gegeben – so falsch ist eine Tabelle hier nicht.

Du willst mir doch nicht erklären wollen, dass Labels und Werte eines Ausgabeformulars tabellarische Daten wären? Wenn man 3 Spalten hätte - eine mit Überschrift "Absender", eine mit Überschrift "Datum" und eine mit Überschrift "Kommentar" - ok, das wäre eine tabellarische Darstellung des Gästebuches. Ein einzelner Eintrag ist keine Tabelle. Oder ich habe die ganze Diskussion um die pros und cons zum Table-Layout komplett mistverstanden.

Auch ich „habe meine Mod-Rechte mal genutzt“.

Danke. Dachte eigentlich, ich wäre nicht zu doof zum Kopieren einer URL. 3 Stunden Schlaf sind wohl doch etwas wenig.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Es ist eine Zuordnung der der linken Spalte zur rechten gegeben – so falsch ist eine Tabelle hier nicht.

Du willst mir doch nicht erklären wollen, dass Labels und Werte eines Ausgabeformulars tabellarische Daten wären?

Du willst mir doch nicht erklären wollen, dass Labels und Werte eines Ausgabeformulars keine tabellarischen Daten wären? (Die Labels sollten allerdings th sein, nicht td.)

Ich will damit nicht sagen, dass ich dafür eine Tabelle nehmen würde. (dl/dt/dd bietet sich an.) Ich finde es aber nicht völlig falsch, wenn andere das so tun.

3 Stunden Schlaf sind wohl doch etwas wenig.

Auch was. Allerdings: 3 Tassen Kaffee sind wohl doch etwas wenig.

LLAP 🖖

[Gunnar Bittersmann]

@@Dani

foreach($data as $row) {

foreach() hört sich so an, als könnte das Ganze durchaus eine Liste sein: ol oder ul außerhalb der Schleife; li darin.

  echo '
  <div class="gb-entry">

gb-entry hört sich so an, als wäre dafür article das richtige HTML-Element.

Was mir aber immer sauer aufstößt: wenn HTML-Tags mit echo erzeugt werden.

Nicht machen! Nicht HTML in PHP schachteln, sondern PHP in HTML – mit der alternativen Syntax für Kontrollstrukturen:

<?php foreach($data as $row): ?>
<article class="gb-entry">
  <table>
    <tr>
      <th>
        Von (User): 
      </th>
      <td>
        <?php echo htmlspecialchars($row['name']); ?>
      </td>
    </tr>
    <tr>
      <th>
        Am:
      </th>
      <td>
        <?php echo htmlspecialchars($row['datum']); ?>
      </td>
    </tr>
    <tr>
      <th>
        Nachricht:
      </th>
      <td><p class="comment">
        <?php echo nl2br(htmlspecialchars($row['kommentare'])); ?>
      </p></td>
    </tr>
  </table>
</article>
<?php endforeach; ?>

Die notwendige Behandlung des Kontextwechsels (htmlspecialchars()) habe ich ebenso mit erledigt wie die Auszeichnung der Zeilenkopfzellen als th.

Statt <?php echo kann man auch die Kurzschreibweise <?= verwenden.

LLAP 🖖

[Dani]

Danke erstmal an alle für die schnellen Antworten!

Vielen Dank auch für die vielen hilfreichen Tipps und Links.

Das mit responsive hab ich mir schon überlegt und ich hab ich halt irgendwie an die <div>s gewöhnt. Lohnt es sich eurer Meinung nach wirklich noch, sich umzustellen auf <section>, <article> usw? ich versteh halt den Sinn dahinter nicht sooo ganz, weils ja vom optischen her keinen Unterschied macht.

Bin gespannt auf eure Meinungen 😀