For that purpose define class ¡®dateblock¡¯ which will define structure of block like size, background color, border etc. and to improve look of month, date and year we define class dateblock_mon, dateblock_day, dateblock_year respectively.
Put following piece of code in the head section, <head>¡ ___ ¡</head> tag of your web page.
<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>
Now put the below piece of code in body section <body>¡ ___ ¡</body> tag of your web page.
<div class='dateblock'>
<span class='dateblock_mon'>Mar</span>
<span class='dateblock_day'>18</span>
<span class='dateblock_year'>2007</span>
</div>
discuss this topic to forum
