Grafiktexte auf gleiche Höhe bringen - verstehe nix mehr

[Mathias]

@@Mathias:

nuqneH

ich hab es ja schon gelöst.

Aber suboptimal.

Dafür hast Du die Tipps nicht beherzigt.
Welche Tipps?

Zum Beispiel diesen, nicht 4 Grafikdateien zu verwenden, sondern eine.

Für den Hover-Effekt (ein O!) benutzt du ja schon CSS-Sprites: "blogBLOG", "übersichtÜBERSICHT", "impressumIMPRESSUM". (Die Klein-/Großschreibung soll die Textvarianten für nicht gehovert/gehovert symbolisieren.) Wobei die Anordnung untereinander sinnvoller wäre
  blog
  BLOG
etc., dann hättest du nicht jeweils unteschiedliche Werte für den horizontalen Versatz, sondern für alle den gleichen vertikalen Versatz. Und dabei musst du nicht einmal Pixel zählen, sondern kannst "top" und "bottom" verwenden. Hm, du hättest auch bei deiner Anordnung "left" und "right" verwenden können, aber:

Genauso, wie du jeweils beide Textgrafiken "blogBLOG" usw. in jeweils einer Grafikdatei hast, kannst du auch gleich alle Texte und den Separator in einer Grafikdatei unterbringen:
  blog|übersicht|impressum
  BLOG|ÜBERSICHT|IMPRESSUM
'background-position' in x liefert den entsprechenden Text; in y die Textvariante für nicht gehovert/gehovert.

Wobei du für den Hover-Effekt gar keine verschiedenen Textvarianten als Grafik bräuchtest; er ließe sich auch mit der 'opacity'-Eigenschaft realisieren.

Qapla'

PS: Und den Tip mit „kein TOFU“ hast du auch nicht verstanden?

Das mit dem TOFU habe ich tatsächlich nicht verstanden (hoffe jetzt wird es richtig).

Danke für deinen Tipp. Ich verstehe noch nicht so ganz, woher der Browser dann weiß, wo er gerade drüber ist, aber ich lese mich mal noch ein bisschen in die CSS Sprites ein. Es ließe sich doch dann nur "ALle aktiviert" bzw. "nicht aktiviert" anzeigen, oder?

Grundsätzlich finde ich diese Sache mit den Sprites allerdings nicht so toll, weil es Dinge, die eigentlich nicht im Hintergrund sind (die Navigation ist ja schon wichtig), als Hintergrund kennzeichnet (background-url). Barrierefrei ist das ja nicht gerade.

Die Idee mit der Opacity gefällt mir sehr gut.

Danke!