alt Tags für css background images

[riczan]

Hallo zusammen,

ich habe eine Hauptnavigation:

<li><a href="......"><div id="naviPunkt1"></div></a></li>
<li><a href="......"><div id="naviPunkt2"></div></a></li>
<li><a href="......"><div id="naviPunkt3"></div></a></li>
....

CSS:

#naviPunkt1 {
    width:55px;
    height: 24px;
    background: url(../images/layout/mainNavi/nav_home.gif);
    float: left;
}

Die Bilder in der Navi müssen nun mit alt Tags versehen werden(SEO und so).

Gibt es dafür eine Lösung?

Gerne auch JS/Jquery

Danke und Grüße,

ric

 

[Space Vampire]

Hintergrundbilder haben kein ALT-Attribut.
Nutze title="" für <a>
das hat den selben Effekt.

Und ganz nebenbei:
Was auch immer du mit dem <div> im <a> bezweckst, nimm es raus und mach es stattdessen mit <a> als display:block;

 

[djheke]

BG's benötigen keie Alt- Attribute. Du solltest aber auf einen Linktext nicht verzichten. Für deinen Fall bietet sich die Gilder/Levin Methode an.

Gilder/Levin

 

[riczan]

Danke :T :)

ist die title="" Lösung SEO freundlicher als image replacement mit zb <span>.....</span>
?

 

[Space Vampire]

Was von beiden SEO-freundlicher ist kann ich nicht sagen.
Als sauberer empfinde ich jedoch definitiv die title-Lösung.

 

[djheke]

Könnte aber für Sehende bei abgeschaltendem css sehr verwirrend sein. Kommt ja zu selten vor.

 

[Space Vampire]

Könntest du den Einwand etwas präzisieren?
Ich bin gerade nicht in der lage einen Zusammenhang herzustellen...

 

[djheke]

Na klar. Aber eines vorweg. Jeder darf seine Webseiten gestalten wie er es möchte. Es muss nicht immer und alles perfekt sein.

Nun zum Einwand. Für den seltenen Fall, dass jemand seine Styles im Browser abstellt bekommt eine leere Navigation zu sehen. Der Grund, sind die fehlenden Linktexte.

[COLOR=#000080]<ul>
<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"......"[/COLOR]>[/COLOR][COLOR=#000080]<div id=[COLOR=#0000FF]"naviPunkt1"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR][COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR] [COLOR=#000080]
<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"......"[/COLOR]>[/COLOR][COLOR=#000080]<div id=[COLOR=#0000FF]"naviPunkt2"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR][COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>
[/COLOR] [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"......"[/COLOR]>[/COLOR][COLOR=#000080]<div id=[COLOR=#0000FF]"naviPunkt3"[/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR][COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>
</ul>

[/COLOR]

gruß
Henry

 

[Space Vampire]

Aaaach das meinst du!
Linktexte setze ich mal voraus!
Eine Nur-Grafik-Lösung würde ich nicht empfehlen.
Ich dachte, dir ginge es um die "Was-ist-besser"-Frage auf die ich zuletzt geantwortet habe.