A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
10.dec.2006* A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
10.dec.2006*A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
A test paragraph's mission is to take up some space, while we're waiting for some real content.
#independent {
width: 50%;
float: left;
margin: 10px 0 20px 10%;
border: solid 1px #fff;
background: #eee;
clear: both;
display: inline /* IE hack */;
position: relative;
}
h3 {
clear: both;
}
#independent i.date {
position: absolute;
top: .3em;
left: 3px;
font: 90%/1.2 normal, arial;
color: #c00;
z-index: 1;
}
#independent h3 {
margin: 1em 0 0 0;
}
#independent h3 i.date {
font-size: 75%;
}
The idea behind the line-up above is, that the most logical place for a date in the source-code isn't always the right place visually. Repositioning is easy enough with CSS, so I've been playing around with repositioning from different places in the source-code of a short “article” to make sure there are no surprises.
The date-carrying element's place in the source-code doesn't, and shouldn't, matter when it comes to positioning it. All that's needed is a suitable space for it, and I think it makes sense to position it above the headline.
I've used an <i> for the date, and a large blue asterisk within a <b> to mark the date's actual position in the source-code.
An <i> carry no semantic value, so it's as well suited as a <span> for the purpose – or the other way around. I leave the choice of best date-carrying element to others.