Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    This article series is in hopes that I can educate people new to CSS to many of the ingenious techniques that all the savvy designers out there use today.

    Article 1: Image Replacement

    Just what is this FIR stuff?
    Quite simply, it allows you to replace text with an image. But what does that really mean? It means that in the source, you are still going to have actual text:
    HTML Code:
    <h1 id="css-rocks">CSS Rocks</h1>
    But Times New Roman sucks, what if I want to use DirtyBakersDozen?

    No problem... Create an image. Now, use the following CSS to style the above HTML code:
    Code:
    #css-rocks{
    width:125px;
    height:13px;
    background: url(css-rocks.gif) top left no-repeat;
    text-indent:-9999px;
    }

    There we have it! Check it out in action: http://www.neathdesign.com/resources/fir


    How does it work?
    By taking the element and giving it a set width and height of the image to replace it, and then using the image as the background we have the image visible. Setting the text indent to negative 9999px puts it off the screen far beyond any screen today, and for years to come (if not forever). Remember, the element must be a block element (div, hx, etc), if it isn't, remember to add in [minicode]display:block;[/minicode] into the CSS, or it wont work!


    Benifits of using this technique
    • Screen readers can still read the text
    • Text being replaced can now be manipulated by print stylesheets
    • Search Engines can read the text
    • People viewing unstyled content can still read needed information


    Now go out and make the web a better place with this!
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  2.  

  3. #2
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    I like it, what is to come?
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  4. #3
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I use a technique very similar to this. The only difference is I put a span around the text in the markup and use display:none; to make the span element disappear in my 'screen' style(s).


  5. #4
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    glyakk, while that method is effective superficially, screen readers are not able to read the text. Also, I find this method a bit cleaner if you will. But, of course that's nitpicking
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com