Monday, 22 October 2012

Status Message designing with CSS

// siddhu vydyabhushana // 3 comments
As per soo many requests am going to develop this status message design with css .Already one month back i designed this 

1)Status Message designing USING CSS AND JQUERY

But now i am posting with css only ,..............learn and enjoy it.




                    Live Demo

Step-1

html coding as 



Html code


<div class='divbody'>
<div id='divimg'>

</div>
<div id='divtext'>

<div id="time"></div>
</div>
</div>


STEP-2


CSS code:

.divbody
{
width:600px;
border:dashed 1px #eee;
min-height:80px;
padding:5px;
margin-left:333px;
}
#divimg
{
width:70px;
height:80px;
border:solid 1px #888;
padding:5x;
float:left;

}
#divtext
{
padding:5px;
float:left;
width:500px;
min-height:80px;
font-size:17px;
font-family:Articulate Light;
}

#time
{
font-family:'Georgia', Times New Roman, Times, serif;
color:#999;

}


3 comments: