CSS Image Replacement, The How To
October 10th, 2007 by MackCSS Image replacement is very affective for style sheet based themes. The advantage of using image replacement is compatibility for screen readers or non-image based browsers that can not use my .css document. If I did not do this, then non-image based browsers would not be able to navigate my site easily and effectively.
This is what it looks like to image enabled browsers
This is what it would look like to non-image based browsers
The Logo, Method 1
As you can see I did the main logo image and the menu for the header, but I did both with two separate methods. I will discuss the logo first. It is created using two css IDs.
The first ID is a the image wrapper.
-
#logoimage {height:100px;width:341px;background: url(../images/logo.gif) no-repeat;}
Note maybe the most important part of this is the height/width and no repeat tagged on the end.
The second ID belongs to the actual a href linking code.
-
#logolink { display:block; width:341px;height:100px;text-indent: -999px;overflow: hidden;}
Note the height/width are exactly the same as the image and my text-indent is a negative value because the logo is on the left side of the screen.
The Html
The Menu, Method 2
Next up is the Menu, which uses one css ID and one css class. This method has very similar characteristics to the first and works basically the same way. Just less actual html code is used.
This is the css used for the home button, but the same methods apply to all of your menu buttons.
-
#btn-home{
-
display:block;
-
float:left;
-
background: #001e2d url(../images/btn-home.gif) no-repeat;
-
height:100px;
-
width:66px;
-
}
Note maybe the most important part of this is the height/width and no repeat tagged on the end.
-
.btn-home { display:block; width:66px;height:100px;text-indent: 999px;overflow: hidden;}
Note the height/width are exactly the same as the image and my text-indent is a positive value because the menu is on the right side of the screen.
The Html
-
<a href="http://www.lobolinks.com" id="btn-home" class="btn-home" title="Home">Home</a>
Thats It! Let me know what you think.
Related Post
- CSS Image Replacement For Fixed Width Themes - Early on in my blogging career, I wrote a how to for css image replacement and today I am here to tell you that does not work for fixed width themes s ...
- Creating Favorite Icons with a Transparent Background Using Photoshop - If you haven't noticed or cleared your Internet cache in a while, I have been working on some new logo concepts for the site. Anyway, after doi ...
- iWebTool Creates a Directory List - To my shock, I find that iWebTool has created their own directory list that allows regular (free) and commercial (paid) listings. To list a commercial ...
By SomeDude on Oct 11, 2007 | Reply
I've clearly missed something. Why do you advocate this more difficult method instead of using the standard of using an IMG tag? Your advocation using a css background-image here when in fact you're not placing the image in the background of anything. You also violate the "Text is not an image" rule. Aren't nav items more appropriate as UL/LI? Totally confused why this is the "correct" way to do it.
By Mack on Oct 11, 2007 | Reply
This provides everyone a way to navigate your site if your using navigational images derived from a CSS template.