Probleme mit hover/focus-Zustand

[Philip Fuchslocher]

Guten Morgen Allesamt,

ich bin gerade dabei mich ein wenig mit MediaQueries und Layoutanpassung bei verschiedenen Fenstergrößen zu beschäftigen. Meine HTML/CSS-Kentnisse sind ja eher moderat, aber deswegen übe ich ja

Bei meinem Experimentier-Projekt habe ich nun zwei Probleme:

1. Ich habe den Navigationspunkten (Grün, Blau, Gelb und Rot) als hover/focus-Zustand eine andere Textfarbe verpasst. Allerdings wird mir diese nicht dargestellt. Auch ohne die aktuell verwendete CSS-Transition hat es nicht funktioniert. Die kann ich als Fehlerquelle also ausklammern.

2. Die Abbildungen besitzen einen via Sprite definierten Hover-Zustand. Wenn das Browserfenster recht schmal gezogen wird habe ich diese Bildboxen für mobile Endgeräte deutlich verändert (Bilder sind kleiner). Ebenfalls habe ich den hover/focus-Zustand aus dem entsprechenden CSS-File (iphone.css) komplett rausgelöscht. Dennoch tauscht mir der Browser die kleinen Miniaturen gegen das große Sprite aus. Warum?

Danke Euch
Philip

/edit: Das Layout ist nicht wirklich konsequent für die verschiedenen Größen angepasst, ab denen die Darstellung umschaltet. Wie geschrieben, kleines privates Übungsprojekt das on the fly gewachsen ist. Mir gehts nur um Prinzip und die Technik

[hero-master]

Moin Philip,
das zweite Problem ist dadurch begründet, dass du in der iphone.css keinen extra hover-Status für die Bilder definiert hast

Zu Problem 1: Eine ID ist in CSS mehr Wert, als eine Klasse.
Du hast zunächst jedem Link in der #navigation bei hover die Farbe schwarz zugewiesen. Danach hast du aber direkt die Klassen anzusprechen, ohne wieder über die ID #navigation zu gehen. Somit nimmt er eben wichtiger, als die einzelnen Farben

[Philip Fuchslocher]

Hey Nico,

zu 1: Es soll auch gar keinen Hover-Zustand geben. Ich ging nun einfach davon aus, wenn ich in der iPhone.css ausschließlich für den dt im "Normalzustand" ein Hintergrundbild zuweise, das dann auch bestehen bleibt, wenn ich darüber fahre. Sprich, dass sich der Browser die Anweisungen nur aus der aktuellen CSS-Datei holt - in dem Fall also der iphone.css. Aber scheinbar greift es dann ja doch auf die anderen Sheets zu?

zu 2: Das mit der höheren Wertigkeit der Selektoren war auch mein erster Gedanke. Entsprechend hatte ich auch versucht, den Selektor ausführlicher zu schreiben, in Form von

#navigation li .gruen a:hover,
#navigation li .gruen a:focus {
color: #6a7f00;
}


bzw. eigentlich sollte ja auch

#navigation .gruen a:hover,
#navigation .gruen a:focus {
color: #6a7f00;
}

ausreichen, also ohne explizit "li" mit aufzunehmen?

Damit müsste der Selektor doch stärker eingestuft werden als die Grunddefinition

#navigation li a:hover,
#navigation li a:focus { }

oder nicht? Vermutlich mache ich da grad einen kleinen Denkfehler. Wie müsste denn der korrekte Selektor aussehen, wenn ich beim Hovern die Schriftfarbe in der Navigation ändern möchte?

Besten Dank!
Philip

[hero-master]

Aber scheinbar greift es dann ja doch auf die anderen Sheets zu?

Klar greift er auch auf die anderen zu, da du denen ja auch keine Mindestbreite mitgegen hast und in den 1280px liegen eben auch die 640px
Also müsstest du in der ihpone-Datei noch die hover-Backgrounds auf none setzen.

zu 2: Das mit der höheren Wertigkeit der Selektoren war auch mein erster Gedanke. Entsprechend hatte ich auch versucht, den Selektor ausführlicher zu schreiben, in Form von

#navigation li .gruen a:hover,
#navigation li .gruen a:focus {
color: #6a7f00;
}


bzw. eigentlich sollte ja auch

#navigation .gruen a:hover,
#navigation .gruen a:focus {
color: #6a7f00;
}

ausreichen, also ohne explizit "li" mit aufzunehmen?

Müsste so funktionieren, also auch ohne li.

[Philip Fuchslocher]

Müssten die backgrounds nicht eher auf die gleiche Quelle wie im Normalzustand verweisen (so funktioniert es zumindest)? Mit none wird das Hintergrundbild ja ausgeblendet, was ebenfalls nicht der Fall sein sollte.

Bzgl. dem Selektor und der Farbigkeit: Das klappt auch nicht mit dem #navigation .gruen a:hover (ebenfalls nciht, wenn ich noch li ergänze). Die Schrift bleibt Weiß.

[hero-master]

Bzgl. dem Selektor und der Farbigkeit: Das klappt auch nicht mit dem #navigation .gruen a:hover (ebenfalls nciht, wenn ich noch li ergänze). Die Schrift bleibt Weiß.

du meinst schwarz, oder? Das li ist sowieso fehl am Platze, so wie du es jetzt drin hast, da die Klasse ja das li ist
Bei mir klappt es, wenn ich #navigation .gruen a:hover definiere.

[Philip Fuchslocher]

Nein, ich meine nicht schwarz. Es ist dann der Hintergrund der dl zu sehen.
Und das mit der anderen Schriftfarbe klappt bei mir in keinem Browser. Auch nicht nach dem Leeren des Cache.

[hero-master]

Nein, ich meine nicht schwarz. Es ist dann der Hintergrund der dl zu sehen.

Ich glaube da reden wir gerade aneinander vorbei
Lass uns mal zunächst auf das eine Problem konzentrieren:

Und das mit der anderen Schriftfarbe klappt bei mir in keinem Browser. Auch nicht nach dem Leeren des Cache.

Ich habe einmal deine Seite heruntergelade und einfach nur #navigation vor die Farb-Klassen gesetzt.
http://dl.dropbox.com/u/5465472/tp/philip-mq.htm

btw.: du hast hier ein Apostroph drin bei der Höhe:
#navigation li a:hover,
#navigation li a:focus {
background: #eee;
height: ´24px;