Simple CSS Code to Create the Date Block in your WebPage

[Kalyan]

Simple CSS Code to Create the Date Block in your Web Page

Copy and Paste this Code in your Head Section

Code Select Expand

<style type='text/css'>
div.dateblock{
line-height: 1.02em;
width: 40px;
float: left;
margin-top: 6px;
background: #F3F3F3;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
color: #aaa;
position: absolute;
text-align: center;
margin-right: 10px;
letter-spacing: 0.17em;
font-family: Arial, Verdana, sans;
padding: 1px;
}
span.dateblock_mon{
font-size: 9px;
display: block;
text-align: center;
color: #999;
font-family: Georgia, Arial, Verdana, sans;
}
span.dateblock_day{
font-weight: bold;
font-size: 15px;
display: block;
font-family: Georgia, Arial, Verdana, sans;
text-align: center;
position: relative;
top: -1px;
color: #336;
}
span.dateblock_year{
font-size: 9px;
display: block;
text-align: center;
color: #999;
font-family: Georgia, Verdana, Arial, sans;
}
</style>

Copy and Paste this Code in your Body Section

Code Select Expand

<div class='dateblock'>
<span class='dateblock_mon'>Mar</span>
<span class='dateblock_day'>18</span>
<span class='dateblock_year'>2007</span>
</div>