Partial Image Replacement | Comments (5)

Posted in CSS on 29th January 2006, 1:41 am by Stuart

Recently Tim was looking for opinions on the most semantic way to mark up the title and strapline of an author’s website that he is working on. The text looked something like this; Stuart Colville, Author of "I’m a big fat monkey" (Note: this is a fictitious title).

Now the question was, how should the strapline (Author of “I’m a big fat monkey”) be marked up in a meaningful way? After a while of talking it through I suggested that the best way would be to including the strapline in with the heading as they have a relationship to one another. To move the strapline out of the h element would destroy the relationship. So the mark-up ended up looking like this:

<h1>Stuart Colville, <span>Author of "I'm a big fat monkey"</span></h1>

The Experiment

Now I was then interested to know if you could use image replacement to replace the h1 whilst leaving the span on screen as text. I tried a little experiment and came up with the following CSS:

  #content h1
  {
    text-indent: -3000px;
    overflow: hidden;
    background: url(scolville.gif) no-repeat;
    height: 100px;
    position: relative; /* optional: remove this if you need to position the span relative to the page rather than relative to the h1 */
  }

  #content h1 span
  {
    text-indent: 0;
    position: absolute;
    top: 75px;
    left: 50px;
    font-style: italic;
    font-size: 80%;
  }

Using the original Phark method I replaced the text within the h1 with a ‘tasty’ logo and then to counter the text-indent I used absolute positioning on the span thus moving back into view. Now this looked to be the answer first of all but this didn’t work at all in IE. After a little futher experimentation I ended up zeroing the text-indent first and used absolute positioning to move the span into position.

Example

The results can be viewed here in this example and works in IE6, Opera, Firefox and Safari.

Update: Tim made a useful suggestion to add "position:relative" to the h1 so that the span is relative to that rather than to the page. I have updated the code to reflect this change.

Post Tools

• Permalink
• Comments
• Feed
• Digg it!
• Tag it!
• Cosmos