Guten Abend,
ich habe da ein kleines Problem, das ich einfach nicht gelöst bekomme. Ich möchte das Design vom iChat verwenden funktioniert auch soweit aber die Avatar Bilder bekomme ich einfach nicht an die richtige Stelle. Diese sollten jeweils links oder rechts unten neben der Blase positioniert sein. Könnte mir da jeman Helfen oder einen Tip geben ? folgender html/css code:
HTML
<html>
<head>
<style>
#mychat{
overflow:auto;
padding:20px;
}
.avatarLeft{
float: left;
}
.avatarRight{
float:right;
}
.avatarLeft,.avatarRight{
background-color: black;
width:52px;
clear: both;
}
.bubbledLeft,.bubbledRight{
position: relative;
margin-top: 5px;
margin-bottom: 5px;
max-width: 80%;
clear: both;
}
.bubbledLeft{
float: left;
margin-right: auto;
margin-left: 36px;
padding: 4px 10px 4px 15px; /*position within the border*/
}
.bubbledLeft:before{
z-index: -1;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
content: "";
border-width: 8px 10px 8px 17px;
border-image: url(css/images/speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
-webkit-border-image: url(css/images/speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
-moz-border-image: url(css/images/speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
-o-border-image: url(css/images/speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
}
.bubbledRight{
float: right;
margin-left: auto;
text-align: right;
margin-right: 36px;
padding: 4px 15px 4px 10px; /*position within the border*/
}
.bubbledRight:before{
z-index: -1;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
content: "";
border-width: 8px 17px 8px 10px;
border-image: url(css/images/speech_bubble_right_2.png) 8 17 8 10 stretch stretch ;
-webkit-border-image: url(css/images/speech_bubble_right_2.png) 8 17 8 10 stretch stretch ;
-moz-border-image: url(css/images/speech_bubble_right_2.png) 8 17 8 10 stretch stretch ;
-o-border-image: url(css/images/speech_bubble_right_2.png) 8 17 8 10 stretch stretch ;
}
</style>
</head>
<body>
<div id="mychat">
<!-- RECHTE Sprechblase -->
<div class="avatarRight"><img src='gfx/avatar.png' width="32px"/></div>
<div class="bubbledRight"><b>
Heute 17:33:22 trebor:</b><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes
</div>
<!-- RECHTE Sprechblase Ende -->
<!-- LINKE Sprechblase -->
<div class="avatarLeft"><img src='http://www.mycomo.tk/gfx/avatar.png' width="32px"/></div>
<div class="bubbledLeft">
<b>Heute 20:22:55 andrea:</b><br/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes
</div>
<!-- RECHTE Sprechblase Ende-->
</div>
</body>
</html>Ich wäre für jeden Hinweis dankbar.
Danke im vorraus
Gruß