Najniższy poziomy blok układu strony jest często określany jako „stopka”. W nim, podobnie jak w innych blokach strony, umieszczane są elementy projektu, ale w przeciwieństwie do innych często pojawiają się specyficzne problemy z pozycjonowaniem tego konkretnego bloku. Wiążą się one z tym, że różne przeglądarki różnie rozumieją standardy języka CSS i może być dość trudno ustawić stopkę na dolnej krawędzi okna przeglądarki. Poniżej znajduje się kod jednego z rozwiązań tego problemu.
Niezbędny
Podstawowa znajomość CSS i HTML
Instrukcje
Krok 1
W pierwszym wierszu kodu źródłowego strony umieść odniesienie do specyfikacji XHTML 1.0 Transitional:
Krok 2
Umieść główne bloki struktury strony wewnątrz treści dokumentu (pomiędzy znacznikami i). Blok, w którym zostanie umieszczona główna treść, musi składać się z dwóch zagnieżdżonych warstw. Na przykład niech zewnętrzny ma identyfikator OuterDiv, a wewnętrzny InnerDiv:
To tutaj będzie główna treść strony.
Za nimi umieść blok stopki z identyfikatorem, na przykład FooterDiv:
Stopka strony.
Krok 3
Umieść w nagłówku kodu HTML (pomiędzy tagami i) link do zewnętrznego pliku z opisem stylów css:
@import "footerStyle.css";
Krok 4
Zapisz kompletny kod strony wzorcowej do pliku z rozszerzeniem html. Może to wyglądać tak:
Wciśnięta stopka
@import "footerStyle.css";
To tutaj będzie główna treść strony.
Stopka strony.
Krok 5
Utwórz plik arkusza stylów - zwykły plik tekstowy, który należy zapisać z rozszerzeniem css i nazwą określoną w kodzie HTML (footerStyle.css). Zapisz do tego pliku następujące opisy stylów bloków użytych na stronie:
* {margines: 0; wypełnienie: 0}
html, body {wysokość: 100%;}
ciało {
pozycja: względna;
kolor: #222222;
}
#OuterDiv {
margines: 0;
wysokość min: 100%;
tło: #aaaaaa;
kolor: #222222;
}
* html #OuterDiv {wysokość: 100%;}
#FoterDiv {
pozycja: względna;
oba czyste;
margines górny: -60px;
wysokość: 60px;
szerokość: 100%;
kolor tła: Ciemnoniebieski;
wyrównanie tekstu: środek;
kolor: #eeeeff;
}
. Dział wewnętrzny {
szerokość: 100%;
pływak: lewy;
}
