Wednesday, March 12, 2008

List with Timestamp as Bullet

I was trying to come up with a way to create an Unordered List with a timestamp as the "bullet" and come up with the following:

CSS

ul.timestamp {
margin: 0;
padding: 0;
list-style: none;
}
ul.timestamp li span {
float: left;
display: block;
width: 125px;
margin: 0 8px 0 -133px;
padding: 0;
text-align: right;
color: #444;
font-weight: bold;
text-indent: -133px;
}
ul.timestamp li {
padding-left: 133px;
}


HTML

<ul class="timestamp">
<li><span>3/9/2008 11:15:02 AM</span>This is a list item with a longer copy text so to check the wrapping of this and make sure it stays in line with the timestamp and the margins set up in the CSS.</li>
<li><span>3/7/2008 11:15:02 AM</span>Bullet item #2</li>
<li><span>3/7/2008 11:15:02 AM</span>Bullet item #3</li>
</ul>


EXAMPLE


  • 3/9/2008 11:15:02 AMThis is a list item with a longer copy text so to check the wrapping of this and make sure it stays in line with the timestamp and the margins set up in the CSS.

  • 3/7/2008 11:15:02 AMBullet item #2

  • 3/7/2008 11:15:02 AMBullet item #3



This works pretty slick!