CSS Transition Background klappt nicht bzw. falsch

[Hugo Stiglitz]

Hi Leute!
Ich brauche wieder einmal eure Hilfe.
Ich bin gerade dabei für mich eine Homepage zu machen.

Ich habe das Design "fast" fertig, und es funktioniert auch alles. Sprich "Responsive Design".

Jedoch hat sich ein blöder Fehler eingeschlichen, den ich eben entdeckt habe, als ich die Seite einmal nicht mit Safari aufgemacht habe. Und zwar tritt der Fehler bisher in Chrome und Edge auf.

Zum besseren Verständnis werde ich euch den Link unten posten.

Wie ihr sehen könnt, habe ich gemacht, dass sich der Hintergrund des Menüs bei "Mouseover" verändert. Und zwar dynamisch mittels "transition".

Das Problem ist nun folgendes:

Scheinbar hat diese Funktion sich auf der gesamten Seite breit gemacht. Jeder Link der nun geklickt wird, verändert seinen Hintergrund. Hält man einen Link beispielsweise per Mausklick, wird es deutlich sichtbar.
Einfach unter "Kontakt" oder in der Fußzeile die Links klicken, und ihr könnt mein Problem sehen.
Natürlich soll dieses "Transition" nur im Hauptmenü greifen, und nicht überall.

Ich finde einfach den Fehler nicht. Lt. "http://jigsaw.w3.org/css-validator/" ist die CSS Datei fehlerfrei.

Bitte um eure Hilfe. Ich hoffe, ihr versteht mein Problem!

Hier der Link: www.innundart.at/usetestuser.1


DANKE!!

 

[Snooty]

Du hast in deiner CSS-Datei beim focus-Attribut vergessen, die Klasse davor zu notieren, deswegen gilt das dann für alle Links.

 

[Hugo Stiglitz]

Hi, danke für deine Antwort.

Ich weißt gerade nur nicht, was du meinst mit "Klasse davor notieren".
Steh gerade an.... Bitte genauer, damit ich wieder durchblicke :-)

 

[Snooty]

So:

.menuDiv a:hover, .menuDiv a:focus {...}

 

[Lawnmower]

Ist falsch geschrieben da, der Style müsste sein

.menuDiv a:hover,
.menuDiv a:focus

OK zu langsam.

Btw die eingesetzten JS Bibliotheken sind uralt und "Responsive" ist ziemlich seltsam umgesetzt.

 

[Hugo Stiglitz]

Oh, gerade gemerkt. Vielen lieben Dank :-)

Ich revanchiere mich ggf. mal

Ergänzung (12. April 2016)

Ist falsch geschrieben da, der Style müsste sein

.menuDiv a:hover,
.menuDiv a:focus

OK zu langsam.

Btw die eingesetzten JS Bibliotheken sind uralt und "Responsive" ist ziemlich seltsam umgesetzt.

Ja ich weiß, dass die schon alt sind. Muss ich mal schauen, wo ich die neueren herbekomme.

Wie meinst du "seltsam umgesetzt" ?
Ich muss aber anmerken, dass das mit dem "Responsive" zum ersten Mal versuche. ^^

 

[Snooty]

Hast du die Seite mal auf verschiedenen Geräten getestet? Wenn ich mir das in der Entwicklerumgebung in Chrome angucke, dann ist die Seite zwar mehr oder wenige responsive, aber trotzdem auf den meisten auswählbaren Geräten zu breit, so dass man horizontal scrollen muss.

 

[Lawnmower]

Naja dass sich z.B. die Schrift verkleinert.
Oder dass dann im CSS doch wieder fixe Pixelzahlen für Boxen verwendet werden (z.B. mainBox).

Würde da auf ein CSS Framework setzen wie Bootstrap oder Foundation - der macht dann vieles automatisch bzw man kann das ganze Responsive Verhalten per CSS Klassen steuern. Dann kannst Du mit einem 12 Column Grid und mit Breakpoints (z.B. Large, Medium und Small) arbeiten. Bei der grossen Ansicht sind alle 3 Spalten nebeneinander, bei mittlerer Ansicht nur 2 (die 3. unten) und bei der kleinsten Ansicht (small) dann alle untereinander.
Bis man selber von Grund auf ein funktionierendes responsive Layout bauen kann brauchts schon ein bisschen erweitertes Grundwissen - ist nicht ganz trivial und scheitert an vielen kleinen Details.

Die 2 JS bräuchtest vermutlich nicht mal.