SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Using CSS to hide text
-
Dec 6, 2007, 10:37 #1
- Join Date
- Jun 2007
- Location
- Ryde, Isle of Wight, UK
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Using CSS to hide text
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 followingCode:class="access-aid"
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.
-
Dec 6, 2007, 10:47 #2
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Dec 6, 2007, 11:03 #3
- Join Date
- Jun 2007
- Location
- Ryde, Isle of Wight, UK
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Dec 6, 2007, 11:11 #4
Try this:
Code:XHTML: <h1>Company Name</h1> CSS: h1 {display:none;}
-
Dec 6, 2007, 11:17 #5
-
Dec 6, 2007, 11:51 #6
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 nothingLast edited by DaveWoods; Dec 6, 2007 at 12:28.
-
Dec 6, 2007, 12:29 #7
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
<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.
-
Dec 6, 2007, 13:02 #8
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
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.
Bookmarks