Question

Is my code good enough to display text above image? It looks similar to the stackoverflow orange button “Ask Question”, but not a button, not a link. It’s just a text and the orange color around it. It works fine but I’m courious if the code looks fine and not stupid.

//css
    .date
    {
        float : left;
        width : 100px;
    }
//html   
<div class="date">
    <img src="orange.png">
    <div style="margin-top:-18px; margin-left:6px; color:#fff;">22.11.2012
    </div>
</div>

As result, the text is exactly above (in the center) of the image.

Answer 1

Seeing as your concern was the aesthetics of the code, I recommend doing this:

// css
.date
{
    float: left;
    width: 100px;
}
.date div
{
    margin-top: -18px;
    margin-left: 6px;
    color: #fff;
}

// html
<div class="date">
    <img src="orange.png">
    <div>22.11.2012</div>
</div>

The negative top margin may not be necessary if you can get line-height: worked in there, but I think this would probably look more professional. Inline CSS is never a good thing.

Hope this helps