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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<html>
<head>
<title> Home Page </title>
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<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>