Grunge
Erfahrenes Mitglied
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:
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 entsprechende Html Code:
Hoffe ihr wisst weiter oder kennt einen eleganteren weg
lg
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
Code:
.date {
font-size: 8pt;
margin-left: 75px;
}
.bubble
{
position: relative;
width: 75%;
min-height: 50px;
color: #fff;
padding: 20px;
margin-left: 75px;
background: #e54d42;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 11px 14px 11px 0;
border-color: transparent #e54d42;
display: block;
width: 0;
z-index: 1;
left: -14px;
top: 15px;
}
.bubbleright
{
position: relative;
width: 75%;
margin-left: 25%;
min-height: 50px;
padding: 20px;
color: #fff;
margin-top: 50px;
background: #503f3c;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubbleright:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 11px 0 14px 14px;
border-color: transparent #503f3c;
display: block;
width: 0;
z-index: 1;
right: -14px;
top: 15px;
}
der entsprechende Html Code:
Code:
<div class="left">
<div class="date">Gestern um 7:00</div>
<div class="img" style="float:left;"><img class="img-circle" width="50px" src=""></div>
<div class="bubble">
na<br><br>ihr<br><br>
</div>
</div>
<div class="right">
<div class="date" style="float:right;">Gestern um 7:12</div>
<div class="img" style="float: right;"><img class="img-circle" width="50px" src=""></div>
<div class="bubbleright" style="float: right;">
</div>
</div>
Hoffe ihr wisst weiter oder kennt einen eleganteren weg
lg