3 Spalten im Footer responsive gestalten

[Auge]

Hallo

#navigation a:hover {
    background-color: #8f0c0f;
    color: #ffff00;
}

Da wo :hover ist, sollte auch :focus sein. Für die Markierung eines Links per Tastaturbedienung kann man üblicherweise die gleichen Regeln wie für die Markierung des Hoverns mit der Maus benutzen. Schreib' den Selektor für :focus einfach zu dem für :hover und das war's.

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

#navigation a.active {
    font-weight: bold;
}

1. Nicht a.active sondern a:active.
2. Bei den meisten Fonts ändern sich mit dem „umschalten“ von Normal- zu Fettschrft die Abmessungen des Texts derart gravierend, dass sich damit auch die Abmessungen des Elements, in dem sich der Text befindet, ebenfalls ändert. Das führt dann gern zum verspringen des Texts, des Blocks (hier des Links) oder zum Beispiel in einem einzeiligen Navigationsstreifen zur Größenänderung der ganzen Navi-Blocks. Auch wenn die Seite binnen kurzem verschwindet, um der neuen Seite Platz zu machen, sieht das oft unangenehm unruhig aus. Das solltest du mal testen, bevor du das „scharf schaltest“.

Tschö, Auge