SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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 following
    Code:
    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.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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.

  3. #3
    SitePoint Zealot
    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.

  4. #4
    SitePoint Member JustRyan's Avatar
    Join Date
    Oct 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
     
    XHTML:
     <h1>Company Name</h1>
    
    CSS:
    
    h1 {display:none;}
    I hope this helps.

  5. #5
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JustRyan View Post
    Try this:
    Code:
     
    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.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bloodofeve View Post
    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

  7. #7
    Guru in training bronze trophy SoulScratch's Avatar
    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.

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    <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.

    Quote Originally Posted by SoulScratch View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •