„Stopka” to zwykle najniższy blok układu strony internetowej. Najczęstszą trudnością w pozycjonowaniu tej stopki jest ustawienie jej zawsze na dole okna, niezależnie od zapełnienia strony czy typu przeglądarki. Od czasu masowego przejścia na układ blokowy było sporo rozwiązań tego problemu, a jedno z nich jest podane poniżej.
Czy to jest to konieczne
Podstawowa znajomość CSS i HTML
Instrukcje
Krok 1
Weźmy za podstawę najpopularniejszy schemat układu strony - trzy bloki umieszczone jeden nad drugim. Góra (nagłówek) powinna zawsze być wyrównana do górnej granicy okna, dolna (stopka) - do dolnej granicy, a główna (body) powinna zawsze wypełniać całą przestrzeń między nimi. Kod źródłowy musi zawierać odnośnik do specyfikacji XHTML 1.0 Transitional, a opis stylów musi być umieszczony w zewnętrznym pliku CSS (aby uniknąć problemów z Operą 9. XX). Opis HTML struktury musi być umieszczony w głównym treść strony. Zacznie się oczywiście od górnego bloku, w tagu którego należy umieścić atrybut identyfikatora z wartością np. divHead:
Blok nagłówka.
Główny blok powinien składać się z pary zagnieżdżonych bloków. Zewnętrzny otrzyma identyfikator divOut, a wewnętrzny divContent:
Główna zawartość.
Stopka jest ustawiona na divFoot:
Stopka stony.
Krok 2
Pełny kod HTML strony powinien wyglądać tak:
Trzy bloki
@import "style.css";
To jest blok nagłówka.
Główna zawartość.
To jest stopka strony.
Krok 3
Opis stylu implementuje następujący mechanizm układu: środkowy blok (divOut) jest ustawiony na 100% wysokości, górny blok (divHead) będzie miał pozycjonowanie bezwzględne, a dolny - względne. W bloku głównej treści (divContent) u góry musi znajdować się wolna przestrzeń równa wysokości bloku nagłówka, aby nie zachodziła na główną treść strony. A dolny blok (stopka) powinien mieć ujemny margines u góry, równy wysokości tego bloku. Spowoduje to podniesienie go powyżej dolnej granicy okna przeglądarki. Mechanizm ten można zaimplementować za pomocą pliku css o następującej zawartości: * {margin: 0; wypełnienie: 0}
html, body {height: 100%;} body {
pozycja: względna;
kolor: # 000;
}
#divOut {
margines: 0;
wysokość min: 100%;
tło: #FFF;
kolor: # 000;
}
* html #divOut {wysokość: 100%;}
#divHead {
pozycja: bezwzględna;
po lewej: 0;
góra: 0;
szerokość: 100%;
wysokość: 80px;
tło: # 2F5000;
przelew: ukryty;
wyrównanie tekstu: środek;
kolor: #FFF;
} #divStopa {
pozycja: względna;
oba czyste;
margines górny: -60px;
wysokość: 60px;
szerokość: 100%;
kolor tła: # 2F5000;
wyrównanie tekstu: środek;
kolor: #FFF;
}
.divZawartość {
szerokość: 100%;
pływak: lewy;
padding-top: 81px;
} Nazwa określona dla arkusza stylów w kodzie HTML to style.css.
