scriptygoddess

02 Apr, 2004

CSS: Swamp text for images

Posted by: Jennifer In: Bookmarks

So, I'm checking out CSS Zen Garden – I'm now using firefox because of all the cool extensions it has specifically the PNH Toolbar which lets outlines the blocks (ie. grids) on the page, as well as this one: Edit CSS which lets you see and EDIT the current page's CSS and redisplays your changes in real time. (mentioned in the comments of this post, by Andrew Dupont) (THANK YOU for those!!!)

In doing so, I was examining the first Zen Garden page's CSS which uses this trick to swap images instead of text. That is just so cool. (I know, all you CSS-freaks have probably known about that little trick for eons.)

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

8 Responses to "CSS: Swamp text for images"

1 | The Puppy Pile!

April 8th, 2004 at 12:42 pm

Avatar

Welcome and Thanks!
Welcome to the new and improved Puppy Pile! (Yes, there are no puppies here, at least for now… But that's neither here nor there.) I've spent countless hours working on the layout and design for this page to give it…

2 | Jennifer

April 5th, 2004 at 8:56 am

Avatar

Actually now having played around with the web developer extension – I think it has the same things and more than the PNH toolbar. (unless I've missed something)

3 | testing new layouts

April 8th, 2004 at 10:18 am

Avatar

Welcome and Thanks!
Welcome to the new and improved Puppy Pile! (Yes, there are no puppies here, at least for now… But that's neither here nor there.) I've spent countless hours working on the layout and design for this page to give it…

4 | Jennifer

April 2nd, 2004 at 1:31 pm

Avatar

actually – that's not right… I didn't see it at first – but now I see the "span" under h1 which has the display set to none.

5 | Jukka-Pekka Keisala

April 5th, 2004 at 8:50 am

Avatar

I have been using Web Developer extension. Do you know if this PNH toolbar is better?

6 | Jennifer

April 2nd, 2004 at 1:29 pm

Avatar

dez – actually (if I remember correctly) the method actually used in that first zen garden design WAS different than what that article said to do… (it didn't use that display:none;) – however it still credited that article for the tip.

7 | Chris Pederick

April 2nd, 2004 at 12:53 pm

Avatar

You may also want to check out the Web Developer extension…

Cheers,
Chris

8 | dez

April 2nd, 2004 at 10:41 am

Avatar

Just a note to take heed of the Note that preceeds Doug's article and to check out the Important Notes at the end of the article. In particular see Joe Clark's ALA article about the acessiblity issues associated with this method (referenced in the notes).

As such at the recent SXSW, Doug "officially deprecated" the original method becasue the use of display:none to hide text prevents it from being read aloud in certain screen readers.

A host of alternative methods can be found here:
http://www.mezzoblue.com/tests/revised-image-replacement/

Featured Sponsors


  • Curt: If anyone comes across this with similar issues I was able to sort out the pagination issues painlessly with easyCommentsPaginate from http://www.mush
  • Christopher: Yeah, it is indeed hard to do. And something remains elusive about why the pagination never worked. I tried everything I could find. Regardless, I
  • Jennifer: Hi Christopher, always hard to bug test stuff like that remotely. Sorry those didn't help. Glad you found a solution though :)

About


Advertisements