Skip to content

TechXcel.com - provides technical excellence...

Narrow screen resolution Wide screen resolution Increase font size Decrease font size Default font size default color orange color green color
You are here: Home arrow PHP arrow CSS Date blocks
CSS Date blocks PDF Print E-mail
(7 votes)
Written by Chetankumar Akarte   
Friday, 16 March 2007
Article Index
CSS Date blocks
Body code
Source Code
Page 1 of 3

CSS Date blocks


On many blog site you have see date in block format, A square contains month, date and year. Now we are going to design such CSS date block here. See example below…
Mar
18
2007


 
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>


Prev - Next >>
Last Updated ( Monday, 23 July 2007 )
 

Who's Online

User Login

PayPal Donation

Enter Amount:

Syndicate

TechXcel's Friends

Tutorials Garden
Wicolorz
pixel2life

Text Link Add

Statistics

Members: 276
News: 60
Web Links: 6
Visitors: 348661

Google Seach

WEB
www.techxcel.com

Google AdSense

TechXcel Referrals

TechXcel's Sponcer...