News:

MyKidsDiary.in :: Capture your kids magical moment and create your Online Private Diary for your kids

Main Menu

Simple CSS Code to Create the Date Block in your WebPage

Started by Kalyan, Dec 17, 2008, 03:13 PM

Previous topic - Next topic

Kalyan

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

Copy and Paste this Code in your Head Section

<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

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

Quick Reply

Warning: this topic has not been posted in for at least 120 days.
Unless you're sure you want to reply, please consider starting a new topic.

Note: this post will not display until it has been approved by a moderator.

Name:
Email:
Verification:
Please leave this box empty:
Type the letters shown in the picture
Listen to the letters / Request another image

Type the letters shown in the picture:

Shortcuts: ALT+S post or ALT+P preview