Status Message Design with CSS
Wall Script
Follow Me:
Monday, December 20, 2010

Status Message Design with CSS

I received lot of requests from my readers that asked to me how to design Twitter and Facebook like status message(image + text) with CSS. So that I had presented a very basic level CSS tutorial with Div and Ol tags, truly it's for CSS beginners. I hope you like this. Thanks!

Status Messages Design with CSS

Download Script     Live Demo

Status message box divided into three parts are (1) Body, (2) Image and (3) Text.

Status Messages Design with CSS

HTML Code
Here stbody, stimg and sttext are class names of Body, Image and Text div tags respectively.
<div class="stbody">

<div class="stimg">
2 Image Part
</div>

<div class="sttext">
3 Text Part
</div>

</div>

Status Messages Design with CSS

CSS Code
word-wrap:break-work for text justification.
.stbody
{
min-height:70px;
margin-bottom:10px;
border-bottom:dashed 1px #cc0000;
}
.stimg
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:5px;
}
.sttext
{
margin-left:70px;
min-height:50px;
word-wrap:break-word; // Text justification
overflow:hidden;
padding:5px;
display:block;
font-family:'Georgia', Times New Roman, Times, serif
}

Status Messages Design with CSS

HTML Code
<div class="stbody">

<div class="stimg">
<img src="sri.jpg" />
</div>
<div class="sttext">
9lessons programming blog <a href="http://www.9lessons.info">http://9lessons.info</a>
<div class="sttime">2 seconds ago</div>
</div>

</div>

Order List Tag
I suggest you do with order list tag it's very flexible for jquery animation effects.
<ol>
// Loop Start
<li class="stbody">
<div class="stimg">
<img src="sri.jpg"/>
</div>
<div class="sttext">
9lessons programming blog http://9lessons.info
<div class="sttime">2 seconds ago</div>
</div>
</li>
//Loop End
</ol>

CSS Code
ol
{
list-style:none;
margin:0px;
padding:0px;
}
.stbody
{
min-height:70px;
margin-bottom:10px;
border-bottom:dashed 1px #cc0000;
}
.stimg
{
float:left;
height:50px;
width:50px;
border:solid 1px #dedede;
padding:5px;
}
.sttext
{
margin-left:70px;
min-height:50px;
word-wrap:break-word;
overflow:hidden;
padding:5px;
display:block;
font-family:'Georgia', Times New Roman, Times, serif
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


13 comments:

  1. It's really nice like usual :)

    regards

    ReplyDelete
  2. superb code Srinivas , u have explained everything in its simplest way. I previously used
    Delete Records with Color Change Effect using jQuery and Ajax , now I am going to try out this one too..thanks..But u dont blog frequently..i wud i want some tips on a weekly basis..

    ReplyDelete
  3. It'd be awesome if you could make something to reply to the messages. Then the replied message would be a little shorter and above the original message.

    Thanks mate =)

    ReplyDelete
  4. .sttext for this class u have used display:block is this required mate....

    ReplyDelete
  5. Excellent CSS tutorial, thanks for code support, I clear the basics of CSS. Thanks for sharing... :)

    ReplyDelete
  6. the Demo is not working !!

    ReplyDelete
  7. Your demo isn't loading images at all

    http://demos.9lessons.info/CssDesign.html

    Please fix it

    ReplyDelete
  8. only one word for u you are great u r web site very useful lot of useful information on u r web site thank you very very very much
    :Rahul Khakse

    ReplyDelete
  9. this is great mate, can u heat us we the facebook massages system

    ReplyDelete

Make in India