Happy Halloween. I modified the method of placing the graphics in the header found at the top of the home page .. up where it says » RADIFIED | Nuclear Grade Technolust. There I implemented a technique known as » CSS Image Replacement, of which there exist many variations, each with its own set of pro's & con's.
The dividing-line among web designers seems to be whether or not to use a non-semantic span tag with CSS positioning, which involves a more complicated technique .. but leaves visible TEXT in place for visitors who surf the Web with STYLES turned off (primarily those using mobile devices).
I used a simpler IR technique, by changing the images you see displayed there .. from foreground images to background images.
This allowed me to replace the foreground images (contained in those heading elements) with TEXT .. which I then indented (way to your left), so it can't be seen. By moving the TEXT out of the way, this technique reveals the graphics (.. which look prettier than standard heading-text).
The advantage however, is » devices that don't render styles (such as screen readers and mobile devices) will now see a TEXT heading and tag-line displayed there, where before there existed only images. Search engines also gives more weight to TEXT than images.
Most Rad visitors will never notice the difference .. seeing most who frequent the site (fellow technolusters) browse with both images and CSS turned ON. But I'm gradually filling my webmaster toolkit with increasingly sophisticated techniques. (Learning by doing.)
After all the pages are styled however, and the markup is coded semantically, there's still no substitute for insightful content .. that is well written (.. and hopefully seasoned with a dash of personality).
This has always been the most difficult challenge .. because a stylish suit does not a charming pig make. And the ugliest person can say the profoundest things, and possess scintillating ideas. So it would seem that content trumps style .. no matter the venue (.. except maybe for those who focus on style).
••• today's entry continues here below •••
UPDATE - after further review, I might prefer Technique #6 (Leahy/Langridge) .. if it will let me code a link, which my current method does not. (I mean, I can code a link, but it doesn't work.) This guy (who hails from a small village in Nottinghamshire) prefers it best in an IR comparison dated March 2009.
Moreover, I feel the odds of someone surfing with IMAGES turned off is far greater than the odds of someone surfing with STYLES disabled (but images turned on). Note btw, that Technique #8 appears to be the only one which works under ALL circumstances.
UPDATE #2 - After playing around with the various techniques, I found that #8 gives me problems centering the images (they shift to the right for some reason) and fails with images turned off. So I settled on technique #6, but it too fails when images are disabled. So I think the guy mis-spoke. I mean, I disabled images in Firefox (v3.5.4) and everything disappeared » no images, no text .. nada. Blank, white header. (Yeah, I saved-all and refreshed .. multiple times.)
And it's impossible to code a link, cuz all links are coded to text, which is then hidden. So my original (simple) text-indent method seems to work just as well as the more involved techniques. This stuff can drive you crazy. More tricks today than treats.
I'm beginning to question the value of image replacement. I mean, if I can't code a link, and no TEXT displays when images are disabled .. maybe I should just go back to using foreground images (which I can link to) and ALT tags (which reveal textual info when images are disabled) .. like I did before.
Or maybe I'll just invent my own technique .. one that works for me .. which would be something like Technique #4, but with no background image (for which I see no point .. since this technique uses a foreground image, and therefore the image will display with or without CSS turned on), but rather a SPAN tag with TEXT (for SEO, which I like/want) moved out of the way, so the linked image displays (like it did before I started this IR mess) .. if that's possible.
Lastly, I feel compelled to point out that the term 'Image Replacement' (as applied here) is a misnomer. These techniques are NOT designed to replace images but rather » TEXT. More specifically, they replace text *with* images.
One more tale of woe before I close » I also tried this method, but it gave me small visual artifacts directly above the letters .. perhaps because I use a 1-pixel border .. to avoid "margin collapse" (an unexplainable space between divs) .. which, by the way, would appear to be another misnomer .. since the margins in this case don't collaspse. Rather they separate.
Doesn't it appear that web designers are backwards? Or do they purposely use confusing terminology?
For more along these lines, here's a Google search preconfigured for the query » css image replacement technique