<ul id="main_nav"> <li><a href=""><img src="link_1.jpg">This is link 1</a></li> </ul> Code (markup): Basically link_1.jpg is a button that I want to use to replace 'This is link 1' but what css command do I give to 'This is link 1' to make it disappear from the webpage im designing?
Gilder-Levin image replacement : ) I have quite a bit of it in the demo I've just made for your site... will reply in a bit with demo.
In the CSS put the following code: img { border:0px; } Code (markup): In your HTML file put the following code: <a href="#"><img src="#" alt="#" /></a> Code (markup):
Hi Read more here ... http://www.vision.to/css-only-logo-rollover.php You will need to add: #main_nav a { outline: none;/* get rid of dotted borders in FireFox */ text-indent: -999em ;/* this moves the text outside of the screen area */ display:block; width:100px;/* width of your image */ height:100px;/* height of your image */ background: url("images/your_image.png") 0 0 no-repeat;/* your image location */ text-decoration: none; } <ul id="main_nav"> <li><a href="">This is link 1</a></li> </ul>
Take a look at that code with a visual browser with images off and CSS still on-- like a large swath of China, Russia, Canada, Australia and the US do because they are stuck on dial-up because it costs an arm and a leg to get cable out there and satellite dishes suck when it rains a little. That's the danger of text-indent: -9999(whatever);
This is the way to do it and still get accessible markup. Stomme poes let me know if you have any other variant ? it is not -9999 it is -999em or even -5000px etc So please be constructive ...
Feha-- yes, it's called Gilder-Levin image replacement. It has a single drawback-- the extra span. DS was doing some of it I think on the other thread but here's an example: http://stommepoes.nl/P3rl/p3rl2.html <div id="header"> <p id="title">p3rl.org<a title="home page" href="/"> </a></p> Code (markup): Here, I don't have an "extra" element (usually a span) because the name is supposed to be clickable, so I make use of the anchor. The text of the P is what's available for the dial-upper with images off. CSS #title { font: bold 2em/2.5em "courier new", courier, monospace; color: #fff; height: 83px; width: 280px; float: left; margin: .8em 0 0 1em; position: relative; overflow: hidden; } #title a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(p3rl.gif) 0 0 no-repeat; } Code (markup): If I'd had the anchor before the p text then I wouldnt' need the left: 0 top:0 stuff. Here's an article on various types of image replacement-- I keep it bookmarked because it's so damn useful: http://www.mezzoblue.com/tests/revised-image-replacement/ As far as search engines, they don't have a problem with either Gilder-Levin or feha's version-- they don't use CSS, so they always just see the text fine. Same goes for screen readers-- text-indent works fine for them, but using display: hidden or display: none will (for some unknown ungodly reason) hides the text from screen readers : ( But SEO-wise, it doesn't matter either way.
Interesting solution, but i don't like leaving an empty <a href=#"> ?? </a> tag ... <h3 id="header"> Revised Image Replacement </h3> /* css */ #header { background: url(sample-opaque.gif) no-repeat top right; width: 2329px; height: 25px; margin: 0 0 0 -2000px; } Code (markup): So they used margin: 0 0 0 -2000px; to "hide the text" so what variant is better ? OK I like the final one: <h3 id="header" title="Revised Image Replacement"> <span></span>Revised Image Replacement </h3> /* css */ #header { width: 329px; height: 25px; position: relative; } #header span { background: url(sample-opaque.gif) no-repeat; position: absolute; width: 100%; height: 100%; } Code (markup): The drawback is you need to rewrite all pages if you want to add span to your titles :-(
However, the href is still there, the title has text, and the text of the parent element is still there-- and in case you're worried it doesn't look like a link, you can always style the parent element to look like one, with text-decoration: underline and hoverstyles (except in IE6 of course). It's also still valid, if a bit strange looking-- heck, they made "name" on anchors specifically for this garbage: <a name="whatever"></a> That's apparently valid HTML, if not something I'd ever use (I try to use whatever id's are already on the page for destinations instead). Made for destinations of in-page or skip links. But basically you are moving the text from the child to the parent. The first image replacement techniques on the mezzoblue page are for historical reasons-- each one has its drawbacks listed (and no, there is no difference between the technique using negative margins vs o0ne using negative text-indent... they have the same drawback). The one I'm using is near the bottom, the Gilder-Levin version. I forgot, there was another drawback, with transparency (which is there on the page too), but while adding an extra span is the drawback, for me it's worth it because of dial-uppers. I love using images for decoration and hate having the site be completely unreadable because someone can't see them. Sticking a crapload of empty spans in existing pages are probably not worth the work, you're right. But here's even more empty spans: http://stommepoes.nl/Menus/spritesmenu.html I saw ds do that and have been using it ever since, for when I need images to hold text in menus (though I haven't done a dropdown yet). The image is crappy, but look at the HTML-- a class or an id is needed on every anchor, AND they all have empty span children. But, there's text to be seen by everyone-- it's either an image, or the parent's text, but there's always something to read. Imagine trying to navigate a site where images are used for the menu but you can't load those images! You'd have to turn CSS off to read anything. So personally I think it's worth it. If you don't have dial-uppers or whatever then it's not so big a deal.