6 replies [Last post]
mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 2 years 23 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

Hello, I am doing a navigation to a site, consists of a list and list items. The style of each button is very complex, so I added the button as a Background image to each item, the thing is, that I will like to preserve keyword density on my site, so, if I put the actual button text into the tags, for example; Home, which is the best way of not displaying the text, and not getting penalized by Google or other SE? I used to do a class with display:none, but I don't know if that is a good practice. Thanks.

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...

Deuce
Deuce's picture
Offline
Guru
Las Vegas, NV
Last seen: 1 year 25 weeks ago
Las Vegas, NV
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4422
Points: 1841

I tend to use a large

I tend to use a large negative text-indent...

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I don't use the

I don't use the text-indent... not because Google cares, but because someone may show up with images off. Now they see nothing. I guess they can swirl their mouse around, if they're mousers, until they see the little hand...

Gilder-Levin is a good one, as far as it's pretty safe for both screen readers, sighted folks with CSS on but images off (like dial-uppers), teh googles, and everyone else. Basically your text remains where it should, but then an image is sat right on top of it. It has 3 problems though.

If the image is semi-transparent or something, the text will show through, which you don't want.

It's a small pile of extra code. Text and then each id may get its own styling in the CSS.

Text-enlarge will either show the text peeking out from behind the image, or, if you set overflow to hidden to stop this, then those who need to enlarge the text who have images off see cut-off letters (or no text at all).

I'm no expert, but I fake one on teh Internets

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 43 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9224
Points: 3230

I tend to be old school.

I tend to be old school. I'd use the button image in the foreground with appropriate alt text. E.G.

<ul>
  <li><a href="#"><img src="home-btn.jpg" alt="Home"></a></li>
  ...
</ul>
With or without css or images, won't matter, and Google treats alt text as content.

The only problems I've found are 1) you need javascript if you want to switch images on hover, etc.*, and 2) it lacks the kewl factor.

cheers,

gary

* I think it's important to indicate hover, active, and focus conditions. There are simple css methods for doing so effectively without an image switch.

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

FernE97
FernE97's picture
Offline
Enthusiast
Dublin, CA
Last seen: 3 years 10 weeks ago
Dublin, CA
Timezone: GMT-7
Joined: 2007-01-10
Posts: 176
Points: 44

Don't remember the exact

Don't remember the exact title of this method think it's shea enhancement..but it attaches the image to the span leaving the text behind the image. And then add overflow hidden so the text doesn't spill over the image when it is resized. The text is still in the correct spot with images turned off. I like this method because it leaves the text in place but if you are looking for something with less code the negative text-indent is always good but not with the images off.

<li><a class="button3" href="contact.html" title="Contact Info"><span></span>Contact Info</a></li>

#nav_main a.button3 span {
background-image: url(images/button_contact.gif);
}
.button3 {
	overflow:hidden;
}
a.button3 {
	width: 110px;
	height: 31px;
	position: relative;
}
a.button3 span {
	width: 100%;
	height: 100%;
	position: absolute;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

That's Gilder-Levin. For

That's Gilder-Levin. The Shea enhancement is the title being added lawlz.

For Gary's version I'd prolly use a transparent image and a sliding background image. I used this for a form with

I'm no expert, but I fake one on teh Internets

mpoveda
mpoveda's picture
Offline
Enthusiast
Costa Rica
Last seen: 2 years 23 weeks ago
Costa Rica
Timezone: GMT-6
Joined: 2007-06-22
Posts: 104
Points: 29

Thanks to all you guys for

Thanks to all you guys for your help.

..."Many of my friends have moved away. They search in other places for happiness. Little do they know that there is nothing to be found out in the world to give you happiness for happiness does not originate from "out there"...