Sprechblasen anordnen
Hi Leute,
ich bastel grad an nem Chat, und die Nachrichten in diesem Chat sollen als Sprechblasen angezeigt werden.
Dabei soll der Aufbau wie folgt sein (hoffe ihr versteht das ein bisschen:
Profilbild Datum
Nachricht
Die beiden Zellen bei Profilbild sollen dann natürlich verbinden sein, und das Nachrichten Feld ist eben die Sprechblase.
Auf der anderen Seite soll es dann Spiegelverkehrt sein! und Rechts ausgerichtet. Und genau da scheint das Problem für mich zu sein...Hier erstmal das Css und dann das HTML
Profilbild Datum
Nachricht
Die beiden Zellen bei Profilbild sollen dann natürlich verbinden sein, und das Nachrichten Feld ist eben die Sprechblase.
Auf der anderen Seite soll es dann Spiegelverkehrt sein! und Rechts ausgerichtet. Und genau da scheint das Problem für mich zu sein...Hier erstmal das Css und dann das HTML Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
#chat{
width:90%;
display:flex;
margin:0 auto;
flex-direction:column;
}
.nachricht_left,
.nachricht_right{
display:flex;
flex-direction:row;
}
.nachricht_left .content_nachricht .date{
justify-content: flex-start;
}
.date {
font-size: 8pt;
}
.date span{
margin-left:20px;
}
.nachricht_left .img{
display:flex;
flex-direction:column;
text-align:center;
width:90px;
order:1;
}
#chat .img img{
width:80%;
margin:10%;
}
.nachricht_left .content_nachricht{
display:flex;
flex-direction:column;
flex:8;
order:2;
}
.nachricht_right .img{
display:flex;
flex-direction:column;
text-align:center;
width:90px;
order:2;
}
.nachricht_right .content_nachricht{
order:1;
display:flex;
flex:8;
flex-direction:column;
}
.nachricht_right .content_nachricht .date{
width:100%;
}
.nachricht_right .content_nachricht .date span{
float:right;
margin-right:20px;
}
.bubble {
width: 80%;
min-height: 50px;
color: #fff;
padding: 20px;
margin:5px 25px;
background: #e54d42;
border-radius: 10px;
}
.bubbleleft{
}
.bubbleleft:after {
content: '';
position: relative;
border-style: solid;
border-width: 11px 14px 11px 0;
border-color: transparent #e54d42;
display: block;
width: 0;
z-index: 1;
left: -31px;
top: -15px;
}
.bubbleright{
width: 80%;
min-height: 50px;
padding: 20px;
color: #fff;
margin-top: 0px;
margin-left:10%;
background: #503f3c;
border-radius: 10px;
}
.bubbleright:after {
content: '';
position:relative;
border-style: solid;
border-width: 11px 0 14px 14px;
border-color: transparent #503f3c;
display: block;
width: 0;
z-index: 1;
left: calc(100% + 20px);
top: 5px;
}
</style>
<div id="chat">
<div class="nachricht_left">
<div class="img"><img class="img-circle" width="50px" src="image/co2.jpg">
<p>Bassti012</p>
<p>223 post</p>
</div>
<div class="content_nachricht">
<div class="date"><span>Gestern um 7:00</span></div>
<div class="bubble bubbleleft">
Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscing enim mid ut. Enim amet, a ac mauris vut porttitor risus integer elit, dis od
</div>
</div>
</div>
<div class="nachricht_right">
<div class="img"><img class="img-circle" width="50px" src="image/co1.jpg">
<p>Peteri012</p>
<p>123 post</p>
</div>
<div class="content_nachricht">
<div class="date"><span>Gestern um 7:12</span></div>
<div class="bubble bubbleright">
Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, elit, dis od
</div>
</div>
</div>
<div class="nachricht_left">
<div class="img"><img class="img-circle" width="50px" src="image/co2.jpg">
<p>Bassti012</p>
<p>223 post</p>
</div>
<div class="content_nachricht">
<div class="date"><span>Gestern um 7:00</span></div>
<div class="bubble bubbleleft">
Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid a ac mauris vut porttitor risus integer elit, dis od
</div>
</div>
</div>
<div class="nachricht_right">
<div class="img"><img class="img-circle" width="50px" src="image/co1.jpg">
<p>Peteri012</p>
<p>123 post</p>
</div>
<div class="content_nachricht">
<div class="date"><span>Gestern um 7:12</span></div>
<div class="bubble bubbleright">
Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dol ac proin odio, habitasse ridiculus, elit, dis od
</div>
</div>
</div>
</div>