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!
Download Script 
Live DemoStatus message box divided into three parts are (1) Body, (2) Image and (3) Text.
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>
<div class="stimg">
2 Image Part
</div>
<div class="sttext">
3 Text Part
</div>
</div>
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
}
{
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
}
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>
<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>
// 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
}
{
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
}
It's really nice like usual :)
ReplyDeleteregards
superb code Srinivas , u have explained everything in its simplest way. I previously used
ReplyDeleteDelete 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..
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.
ReplyDeleteThanks mate =)
.sttext for this class u have used display:block is this required mate....
ReplyDeleteExcellent CSS tutorial, thanks for code support, I clear the basics of CSS. Thanks for sharing... :)
ReplyDeleteu rock man. Just it
ReplyDeletepreety simple and neat
ReplyDeletethe Demo is not working !!
ReplyDeleteYour demo isn't loading images at all
ReplyDeletehttp://demos.9lessons.info/CssDesign.html
Please fix it
Now demo available
ReplyDeleteonly 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
ReplyDelete:Rahul Khakse
this is great mate, can u heat us we the facebook massages system
ReplyDeleteCool
ReplyDelete