how to style chat-bubble in iphone classic style using css only

Question

I trying to create a html page which looks like similar to Messages(thread view) just as in our android and iphone devices.

Here is what i have coded

Css styles:

Answer 1

Try this code For Thread view Messages.

   

           

              

              

                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut diam quis dolor mollis tristique. Suspendisse vestibulum convallis felis vitae facilisis. Praesent eu nisi vestibulum erat.
                
                
09.02.2013, 21:04
            
        

Css Styles

/* messages */

.body .content .block .messages{position: relative;}
.body .content .block .messages .item{width: 90%; padding: 5px; position: relative; margin: 10px 0px 0px; float: left;}
.body .content .block .messages .item.out{float: right; margin: 10px 0px 10px;}
.body .content .block .messages .item .arrow{border-color: transparent transparent #009AD7 #009AD7; border-style: solid; border-width: 5px;width: 0px; height: 0px; position:absolute; left: 10px; top: -10px;}
.body .content .block .messages .item.out .arrow{left: auto; top: auto; right: 10px; bottom: -10px; border-color: #005683 #005683 transparent transparent;}
.body .content .block .messages .item .text{font-size: 12px; color: #FFF; line-height: 13px;}
.body .content .block .messages .item .date{font-size: 12px; color: #FFF; text-align: right; opacity: 0.6; filter: alpha(opacity=60); line-height: 13px;}

/* eof messages */

Thanks,

Kamalakannan.M