Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Porady CSS: Przesunięcie nagłówków, do których prowadzą odnośniki poniżej pozycjonowanej belki

Warsztat / Porady

CSS: Przesunięcie nagłówków, do których prowadzą odnośniki poniżej pozycjonowanej belki

Rafał Kukawski 22 maja 2012 komentarze ()

Tagi:CSS HTML

Jeśli na swojej stronie mamy belkę, która jest cały czas widoczna, nawet gdy przewijamy stronę, problemem staje się tworzenie odnośników, które kierują do wybranego fragmentu dokumentu. Dla lepszego zobrazowania problemu, proszę otworzyć przykład i poklikać po linkach.

Gdy klikniemy w któryś link, przeskoczymy do odpowiedniego rozdziału. Problem polega na tym, że nagłówki zostają ukryte pod pływającą belką. Zobaczmy, co można z tym problemem zrobić.

Jednym z rozwiązań może być dodanie do każdego nagłówka padding-top: 25px, gdzie 25px to wysokość belki (przykład).

Kod: Zaznacz cały
h1, h2 {
    padding-top: 25px;
}

Problem znika, ale bez wątpienia wadą rozwiązania jest, że pomiędzy każdym nagłówkiem a poprzedzającą go treścią, widoczna jest spora, pusta przestrzeń.

Zmodyfikujmy więc nieco rozwiązanie. Proszę zauważyć, że przeglądarki pomijają margines elementu i pozycjonują okno przeglądarki przy krawędzi obramowania/paddingu elementu. Możemy wykorzystać ten fakt i do wyżej zdefiniowanego paddingu dodać ujemny margines o tej wartości.

Kod: Zaznacz cały
h1, h2 {
    padding-top: 25px;
    margin-top: -25px;
}

(przykład 2)

Jeśli potrzebujemy niezerowego odstępu pomiędzy nagłówkiem a poprzedzającą go treścią, można odpowiednio zwiększyć padding lub zmniejszyć margines.

Jeśli nie interesuje nasz Internet Explorer starszy niż wersja 9, można reguły zastosować tylko dla konkretnego nagłówka, używając pseudo-klasy :target (przykład 3).

Kod: Zaznacz cały
h1:target, h2:target {
    padding-top: 25px;
    margin-top: -25px;
}

W przykładowym dokumencie można zauważyć jeszcze jeden problem. Część menu jest przykryta pomarańczową belką. Z tym problemem można sobie poradzić dodając 25 pikselowy górny margines do body (przykład 4).

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Rafał Kukawski

Programista, webmaster. Szczególnie upodobał sobie JavaScript i technologie klienckie, choć strona serwera i bazy danych nie stanowią tajemnicy. Tworzy też aplikacje na urządzenia mobilne. kukawski.pl.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook