Wednesday, October 6, 2010

Code Shot - hCard Template


In this Code Shot post, I'll provide a sample template that I've used in the past for marking up and styling address information in the hCard microformat.

Html Template

<div class="vcard">
<a class="fn org url" href="http://randomactsofcoding.blogspot.com">Random Acts of Coding</a>
<div class="adr">
<div class="street-address">123 Any Street</div>
<span class="locality">Some Town</span>
<abbr class="region" title="Missouri">MO</abbr>
<span class="postal-code">12345</span>
<div class="country-name">USA</div>
</div>
<div class="tel">
<span class="type">Work</span> <a rel="nofollow" href="tel:1234567890">123-456-7890</a>
</div>
<div class="tel">
<span class="type">Mobile</span> <a rel="nofollow" href="tel:0987654321">098-765-4321</a>
</div>
<div>Email:
<span class="email">name@domain.com</span>
</div>
</div>


CSS Template for the Html

div.vcard
{
margin:5px;
font-size:0.6em;
}

div.vcard .url
{

}

div.vcard .org
{

}

div.vcard .fn
{

}

div.vcard .adr
{

}

div.vcard .adr .street-address
{

}

div.vcard .adr .locality
{

}

div.vcard .adr .region
{

}

div.vcard .adr .postal-code
{

}

div.vcard .adr .country-name
{

}

div.vcard .tel
{

}

div.vcard .tel a
{
text-decoration:none;
color:Black;
cursor:default;
}

div.vcard .email
{

}


Example
Random Acts of Coding
123 Any Street
Some Town MO 12345 USA
Mobile: 098-765-4321
Email:

Additional Resources




No comments:

Post a Comment

Post a Comment