Nachricht unter einander - PHP, HTML, CSS

Moin, ich bräuchte eure Hilfe. Ich programmiere gerade eine kleine Webseite die einen Chat besitzt, welches bis jetzt super funktioniert hat, jedoch geht die Nachricht die man absendet (egal ob untereinander oder nicht) nur in einer Zeile. Ich brauche somit Hilfe um dies zu beheben, sodass die Nachricht einer neue Zeile erstellt und nicht in eine ganze Zeile geht und raus aus der Box.

Der hier verwendete Code

<html> <head> <title> Home Page </title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <header> <nav> <ul > <li><a href="logout.php" class="logout">LOGOUT</a></li> <li class="mitte"><a href="abstimmung.php">ABSTIMMUNG</a></li> <li class="mitte"><a href="chat.php">CHAT</a></li> <a href="home.php"><img class="logo" src="https://assets.codepen.io/1676856/internal/avatars/users/default.png?format=auto&height=80&version=1601304366&width=80" alt="ssss"></a> </ul> </nav> </header> <style> h2{ color:white; } label{ color:white; } p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 4px; margin-inline-end: 4px; overflow: hidden; } span{ color:#6580ff; font-weight:bold; } .container { margin-top: 3%; margin-left: 9%; width: 60%; background-color: #26262b9e; padding-right:10%; padding-left:10%; padding-top:1%; padding-bottom:0.1%; border-radius: 30px; } .btn-primary { background-color: #9cbfd0; margin-left: 44%; font-size: 30px; border-radius: 15px; } .display-chat{ height:500px; background-color:#1e7cbc; margin-bottom:4%; overflow:auto; overflow-x: hidden; padding:15px; margin-bottom: 2%; border-radius: 5px; } .message{ background-color: #fbfcfb; color: black; border-radius: 5px; padding: 1px; margin-bottom: 3%; } .form-control { width: 100%; padding: 15px; margin: 5px 0 10px 0; background: #f1f1f1; resize: none; border-radius: 5px; display:block; } </style> <div class="container"> <center><h2>Willkommen <span style="color:#6580ff;">user !</span></h2> <label>Trete den Chat bei</label> </center></br> <div class="display-chat" id="chatbox"> <script> for(a=1;a<=9;a++){ document.write(` <div class="message"> <p> <span> user ${a}:</span> Moin, ich bräuchte eure Hilfe. Ich programmiere gerade eine kleine Webseite die einen Chat besitzt, welches bis jetzt super funktioniert hat, jedoch geht die Nachricht die man absendet (egal ob untereinander oder nicht) nur in einer Zeile. Ich brauche somit Hilfe um dies zu beheben, sodass die Nachricht einer neue Zeile erstellt und nicht in eine ganze Zeile geht und raus aus der Box. </p> </div> `); } </script> <!-- <div class="message"> <p> Es gibt kein aktuellen Chatverlauf. Sei der erste und schreib etwas. </p> </div> --> </div> <form class="form-horizontal" method="post" action="sendMessage.php"> <div class="form-group"> <div class="col-sm-10"> <textarea name="message" class="form-control" placeholder="Schreibe eine Nachricht..." input required ></textarea> </div> <div class="col-sm-2"> <button type="submit" class="btn btn-primary">Absenden</button> </div> </div> </form> </div> <script> $('#chatbox').animate({ scrollTop: $("#chatbox").prop("scrollHeight")}, 0 ); </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!