XHTML und NAV - Fehlermeldung bei W3C

[Camping_RIDER]

Aloha ;)

Problem 1 hab ich gefunden. Screenshot:

Was verraten mir die Entwicklerwerkzeuge:

Ich habe links das fragliche label-Element ausgewählt und auf hover gestellt. Was zeigt Chrome mir rechts an: Bisher hatte das label ein Hintergrundbild ("../menue/amiga/normal.png") und jetzt, durch das hovern, wurde diese Regel überschrieben. Durch das hovern bekommt das label nämlich "background:#000000;".

Übrigens: In mein.css auf Zeile 485 hattest du für das hovern "../menue/amiga/hover.png" als Hintergrundbild festgelegt, das wurde aber in Zeile 475 überschrieben durch den genannten schwarzen Hintergrund. Schuld daran ist - genau wie ich vermutet hatte - Spezifität deiner Anweisungen. Denn offenbar ist #amiga1 label:hover spezifischer als .amiga:hover.

No blame - selbst ich hätte das nicht unbedingt vorausgesehen. Dass das eine spezifischer ist als das andere ist hier nicht ganz selbsterklärlich, es ist aber so. Denn ein label unterhalb eines ganz spezifisch per ID eingegrenzten Element ist halt nunmal spezifischer als ein label mit Klasse .amiga, dass theoretisch im Quellcode zigmal an unterschiedlichsten Stellen vorkommen kann. Siehe dazu auch meine Definition von Spezifität im Off-Topic-Teil dieses Threads... Also, no blame, aber das betont, warum ich immer wieder die Verwendung von Entwicklertools predige. Denn DAS ist ein Fehler, den du als Programmierer in mehreren hundert Zeilen CSS nicht findest. In den Entwicklertools wird das Problem aber schnell offensichtlich.

Ich frage mich, warum du überhaupt Text als Hintergrund einbindest. Wahrscheinlich wegen der Schriftart? Schonmal drangedacht, was Menschen tun, die die Bilder nicht sehen können (weil sie blind sind oder weil die Bilder nicht geladen wurden)? Hättest du ein <img> ginge das ja noch, da gibts wenigstens den alt-Text. So stehen diese Menschen vor einer Liste ohne Text und fragen sich: Was soll ich damit?

Die Lösung: Machs so wie bei deinen Unterpunkten auch: Nimm den Navigationstext in das Element rein (hier ins label, wo jetzt nur   steht). Der Hintergrund kann dann je nach hover oder nicht eine andere Farbe haben. Hat auch den Vorteil, dass du dir die ganzen Bilder für alle einzelnen Navigationspunkte sparen kannst. Die Schriftart legst du fest, wie man Schriftarten in CSS eben einbindet. Ganz einfach und unkompliziert für dich gehts mit Google Fonts.

Zu den Leerzeilen kommt dann gleich noch was.

Grüße,

RIDER