Moin,
ich hoffe ich finde hier jemanden der sich mit CSS auskennt, bzw HTML oder JS
Ich versuche derzeit meinen Chat ein wenig anzupassen, leider hab ich davon wenig Ahnung und konnte im Internet nicht viel finden.
Was ich will ist das mein Chat wie eine Treppe im Stream angezeigt wird.
Wie herum die Treppe läuft ist mir dabei eher unwichtig.
Erklärung:
Immer wenn ein User eine Nachricht postet wir die letzte Nachricht nicht einfach nach oben geschoben sondern dazu noch ein wenig nach rechts oder eben nach unten links.
Das einzige was ich gefunden habe ist wo jemand dies als ein Problem hatte und es grade haben wollte.
Wieso es bei ihm so war, konnte ich nicht nachvollziehen. Zudem war die Treppe auch nicht immer gleich. Sondern die Stufen waren verschoben mal davor mal dahinter.
Alles andere war nicht auf auf einen Chat bezogen udn hat mich unerfahrenen da eher noch mehr verwirrt 
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
text-shadow: 0 0 1px #000, 0 0 2px #000;
background: {background_color};
font-family: 'Roboto';
font-weight: 700;
font-size: {font_size};
line-height: 1.5em;
color: {text_color};
}
#log>div {
animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
-webkit-animation: fadeInRight .3s ease forwards, fadeOut 0.5s ease {message_hide_delay} forwards;
}
.colon {
display: none;
}
#log {
display: table;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10px 10px;
width: 100%;
table-layout: fixed;
}
#log>div.deleted {
visibility: hidden;
}
#log .emote {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
padding: 0.4em 0.2em;
position: relative;
}
#log .emote img {
display: inline-block;
height: 1em;
opacity: 0;
}
#log .message,#log .meta {
vertical-align: top;
display: table-cell;
padding-left: 0.2em;
}
#log .meta {
width: 35%;
padding-right: 0.5em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
#log .message {
word-wrap: break-word;
width: 65%;
}
.badge {
display: inline-block;
margin-right: 0.2em;
position: relative;
height: 1em;
vertical-align: middle;
top: -0.1em;
}
.name {
margin-left: 0em;
}Fals jemand da eine Idee hat, bin ich sehr dankbar.
