4 replies [Last post]
Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 33 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

I've been thinking about this one for a little while but I can't seem to find a good article on it. Basically, I'm trying to replace my header image by an H1 tag but I still want to include text in the H1 while keeping it hidden.

Basically, here's what I have now:

The title

What I would need:

The title

However, the would carry the background image "header.gif". What I can't figure out is how to hide the text description. Using display:none or visibility:hidden would remove the image completely, wouldn't it? What's the workaround to this?

=======================================
Steel Frog
http://www.steelfrog.com

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 34 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

The simplest method would be

The simplest method would be to use a large negative text-indent. Note that this will cause problems if the image isn't loaded (rare). There are several image replacement techniques out there, all with pros and cons. There are many articles written on the subject, just search for image replacement. Here's one that covers most of the techniques available.

Steel Frog
Steel Frog's picture
Offline
Regular
Last seen: 12 years 33 weeks ago
Timezone: GMT-5
Joined: 2007-02-22
Posts: 23
Points: 0

So I'd have the

So I'd have the following:

h1 { background-image: url(images.gif); width: 500px; height: 200px; }

h1 span { display: hidden; } /* Or visibility: hidden? or margin-top: -5000px; */

And then XHTML

This is a title

Is this right? I don't think I need to drop a display:block on the H1 since it's already a block-level element, right?

=======================================
Steel Frog
http://www.steelfrog.com

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 2 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

That's one way to do it,

That's one way to do it, yes. To each his own, as they say - I use the negative text indent method.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's not the best method,

It's not the best method, did you read the link that wolfcry left you and any of the half dozen excepted methods that it contains? one of the better techniques is to use the image as a mask that sits over the h1 text so that if images are disabled or fail to load then you have text to display. display hidden isn't the most accessible technique to use.

All the techniques should be outlined in that link if not then this link rounds off with a brief explanation and link to most if not all of the techniques found to date.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me