Często podczas kodowania jakiegoś projektu pojawia się problem dużych przycisków – linków. Wielu początkujących „developerów” ma problem z usunięciem obramowania, i zachowaniem treści tak, by po wyłączeniu CSS nadal dało się korzystać z nawigacji. Tak naprawdę, to są błahostki, na jedną linijkę każda.

Za obramowanie, narzucone przez przeglądarkę, służy właściwość outline, defaultowo ustawiona na 1. Można ją zwiększyć, lub zmniejszyć, dodając taką deklarację:

  1. ul#mainMenu li a {
  2. outline: 0
  3. }

Naturalnie nazwa selektora wedle uznania. Można też zadeklarować zerowy outline dla wszystkich linków przez wpisanie, na przykład w deklaracji resetującej styl, jednak zdecydowanie odradzam takie rozwiązanie.

Kolejnym problemem jest wygląd linków po wyłączeniu stylów. Fajnie byłoby zachować w przycisku tekst, ale tak, żeby nie było go widać, gdy wyświetla się obraz tła. Nic prostszego, wystarczy zrobić tak:

  1. ul#mainMenu li a {
  2. text-indent: -9999px;
  3. outline: 0
  4. }

Dodałem (opcjonalną) właściwość outline, ponieważ jeżeli tego nie zadeklaruję, obramowanie będzie się ciągnąć aż do granicy monitora (nie głównego kontenera strony), a klienci często na to narzekają.