Sprechblasen anordnen

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:

ProfilbildDatum
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
 
Zurück