When I was redesign­ing this site, I was exper­i­ment­ing many dif­fer­ent options for the header. Among the whole set of solu­tions I tried, I was very happy with the one I’m going to illus­trate even though I chosen another one (that is the one you can see now) because it inte­grates better with the the whole layout.

What I wanted to achieve was basi­cally this:

I thought at var­i­ous tech­niques on how to real­ize that: fixed image, text with alter­nated back­ground, exper­i­ments with PNG trans­parency, ecc…. All of these things have their pros and cons, but in the end I came up with a simple solu­tion that required just few lines of CSS code and had few cons (in respect to the others).

Let see how I did it. First of all, we need a con­tainer for our text. I used a div on the which I set the text id. In #text we’re going to put our text. We’ll use absolute posi­tion­ing within the div, so #text has to have position: relative set.

Next, we need two spans with the same text within; on these we’re going to set the absolute posi­tion­ing I said before, set­ting top: 0; left: 0; on them. And now here is how the trick works. By having absolute posi­tioned the two spans and having put them at the same coor­di­nates (with the same font size), they’re going to over­lap each other. Thanks to absolute posi­tion­ing we can set the height on the spans, and this is the core of the trick, since to make it work we’ll have to set the first span’s height to half the height of the second span.

But that’s not all. If we stop here noth­ing will work. We also have to use overflow: hidden and z-index: 1000 on the first span. Just as side note, 1000 is not really a manda­tory value for z-index, you can use even 1 but 1000 is pretty stan­dard if you want that the class is always on the top.

In this way this is the final result. I really like it but cannot imple­ment on this design as doesn’t inte­grates well the whole layout. Anyway, it has some cons: you have to man­u­ally tweak the font-size and height’s values as it’s not pos­si­ble to use rel­a­tive sizes and your code is going to have the text repeated twice, though this can be easily fixed with a bit of javascript.

I tested this under Fire­fox 3.0.2, Explorer 7, Opera 9.25 and Safari 3.1.2 and it works with­out any hack though I’m quite sure that it’s going to have some issues with older ver­sions of Explorer.