Using CSS to hide text

[bloodofeve]

I would like to use CSS to hide text that can only be seen when the style sheet is turned off.
I have seen the following

class="access-aid"

with either headings or paragraphs.
The text then only shows up when the style is turned off.
The reason I want to use this is so that where I have for example a heading logo which is embedded into the CSS which for example most users would see, it would explain what it is in basic terms similar to an alt but used as a page heading.
I have looked through all of my Sitepoint books on CSS and for some reason can't find a method to do this.

[DaveWoods]

I think this is what you're after

CSS Image Replacement

The most common method is to just shift the text out using absolute positioning or text indent but this fails for users browsing without images and therefore its much more accessible to actually hide the text underneath the graphic so that when images are off the text is revealed.

Hope that helps.

[bloodofeve]

Hi CSSWIZ,
I've used this technique before - this wasn't what I was actually after - I don't actually want to remove the the image.
I just want some text to show up saying for example
"Company Name - Tag"
when you look at either the source or with out styling.

[JustRyan]

Try this:

 
XHTML:
 <h1>Company Name</h1>

CSS:

h1 {display:none;}

I hope this helps.

[SoulScratch]

Try this:

 
XHTML:
 <h1>Company Name</h1>

CSS:

h1 {display:none;}

I hope this helps.

Uh. That would hide the element. (Don't know WHY you would EVER want to do that).

<h1><span class="access-aid">Company Name</span></h1>

.access-aid { position:absolute; left:-999em; }

That would offset the text, then you can apply a background image to the h1, etc.

[DaveWoods]

Hi CSSWIZ,
I've used this technique before - this wasn't what I was actually after - I don't actually want to remove the the image.
I just want some text to show up saying for example
"Company Name - Tag"
when you look at either the source or with out styling.

Ummm, the example I provided does exactly that

The example of this working is available here...

http://www.dave-woods.co.uk/wp-conte...placement.html

Try any combination of disabling stylesheets or images and the user will still be displayed with either the image or the text

SoulScratch - That method works but without images turned on the text will be removed from the page and the user will get nothing

[SoulScratch]

<ignorance>I don't think I've ever had a user complain. Chances are if they have images off, they'll have problems on most/every site they visit, no?</ignorance>

And I've done it that way before (not exactly your way) but it just becomes a PITA when you have lots of image replacement going on.

[DaveWoods]

<ignorance>I don't think I've ever had a user complain. Chances are if they have images off, they'll have problems on most/every site they visit, no?</ignorance>

They shouldn't do as images should all have alt text so I think it's only since these kinds of image replacement techniques (and of course people who fail to provide alt text) that these problems have occurred.

And I've done it that way before (not exactly your way) but it just becomes a PITA when you have lots of image replacement going on.

It does require a few extra lines of code but I'm sure its more of a PITA for dialup users with images disabled than it is to provide an accessible website.

It doesn't take that much longer to setup and if it means that the site is more usable to a few users then I'd rather go that extra step.