date-stamp

absolute positioned article-date...

chaotic test page
#26
10.dec.2006

positioned from inside headline.

a suitable headline. 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.

positioned from inside paragraph.

a suitable headline.

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.

positioned from anywhere inside container.

a suitable headline.

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*
10.dec.2006*

a suitable headline.

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 suitable headline.

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.

...and that's it

#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%;
}

Notes:

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.

go to test-menu