Jednym z trendów współczesnego webdesignu jest tworzenie dużych stopek stron WWW oraz ich bezwzględne umieszczanie w dolnej części ekranu niezależnie od wysokości samej treści. Osiągnięcie tego efektu jest możliwe dzięki zastosowaniu kilku sprytnych sztuczek CSS.
Projekty stron ze stopkami „spadającymi” na dół bez względu na to, jaką wysokość ekranu zajmuje treść są coraz częściej spotykane, szczególnie w internecie anglojęzycznymi, gdzie stały się jednym z elementów charakterystycznych nowoczesnego webdesignu epoki – niezależenie od znaczenia tego słowa – web 2.0. Stworzenie tego rodzaju nowoczesnej stopki wymaga nieco wprawy w posługiwaniu się CSS oraz wykorzystania kilku niestandardowych sztuczek. Poniżej zaprezentowana metoda zadziała w każdej współczesnej przeglądarce, łącznie z Internet Explorerem 6.
Stopka w praktyce
Pracę nad stopką możemy rozpocząć od stworzenia bardzo prostego kodu HTML zawierającego dwa podstawowe pojemniki DIV:
srodek
stopka
Kod HTML nie będzie już mocno rozbudowywany. Strona została podzielona na dwie części. Główny pojemnik {stala}#tresc{/stala} będzie zawierać wszystkie elementy serwisu oprócz stopki. Używając kodu CSS najpierw zlikwidujmy wszystkie niepotrzebne marginesy i odstępy, co zresztą powinno być standardowym działaniem przy każdym projekcie:
* {
margin: 0;
padding: 0
}
Sam {stala}padding{/stala} w tym przypadku nie musiałby być w ogóle definiowany, jednak uwzględniamy go dla porządku. W dalszej kolejności musimy sprawić, aby stopka mogła „spaść” na sam dół strony. Pamiętaj, że oba pojemniki znajdują się w elemencie BODY oraz HTML Aby osiągnąć nasz cel, musimy określić więc wysokość elementów nadrzędnych:
html, body {
height: 100%;
}
Bez powyższego kroku osiągnięcie zadowalających efektów nie jest możliwe. Pominięcie określenia wysokości elementów html lub body powodowałoby błędy w różnych przeglądarkach. Kod CSS samej stopki jest bardzo prosty:
#stopka {
background: #C4C4C4;
height: 100px
}
Jej wysokość została określona w pikselach, co jest najrozsądniejszym rozwiązaniem. Z kolei podstawowy kod CSS pierwszego pojemnika może wyglądać tak:
#srodek {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto;
background: #C9C9F6
}
Podwójne podanie wysokości jest ważne ze względu na kompatybilność z IE6. Wartość auto ma znaczenie zarówno dla nowoczesnych przeglądarek, jak i Internet Explorera 6. Niezbędne jest także zachowanie podanej kolejności definicji wysokości. Inaczej kod nie będzie działać poprawnie. Natomiast wartość auto dla marginesu przyda się, gdy zechcesz zmniejszyć szerokość pojemnika i wycentrować go na środku ekranu.
Powyższy kod nie rozwiązuje bardzo istotnego problemu. Po jego zastosowaniu w oknie przeglądarki pojawi się pasek przejawiania i to nawet wtedy, gdy strona będzie zawierać niewiele treści. Wynika to faktu, że określiliśmy wysokość pojemnika {stala}#tresc{/stala} na 100%, a następnie dodaliśmy do tego 100 pikseli. Jedynym możliwym wyjściem jest pomniejszenie wysokości pojemnika przez dodanie ujemnego marginesu takiej samej wielkości, jak wysokość stopki:
#srodek {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto;
margin-bottom: -100px;
background: #C9C9F6
}
Jednak powyższy kod spowoduje zachodzenie treści serwisu na stopkę, co demonstruje ilustracja:
Rozwiązaniem jest dodanie w pojemniku {stala}#tresc{/stala} kolejnego DIV-a o wysokości takiej samej, jak {stala}#stopka{/stala}. Wypełni on przestrzeń głównego pojemnika pozostawiając miejsce na wyświetlenie stopki. Zmodyfikujmy więc kod HTML:
srodek
stopka
Kod CSS nowego pojemnika składa się tylko z jednej linijki:
#dol {
height:100px
}
Nie ma również najmniejszego problemu z podziałem głównego pojemnika na kilku kolumn. Niemniej w tym celu DIV-y {stala}#stopka{/stala} i {stala}#dol{/stala} muszą otrzymać parametr:
clear: both
W przeciwnym razie wszelkie elementy zawierające właściwość float wykroczyłyby poza stopkę i nie „spychałyby” jej na sam dół strony. Cały kod CSS przykładowego projektu z dwoma kolumnami może więc prezentować się następująco:
* {
margin: 0;
padding: 0
}
html, body {
height: 100%;
}
#srodek {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto;
margin-bottom: -100px;
background: #C9C9F6;
width: 800px
}
#stopka {
background:#C4C4C4;
height: 100px;
clear:both
}
#dol {
height:100px;
clear:both
}
#lewo {
float: left;
width: 200px
}
#prawo {
float: right;
width: 600px
}
Natomiast kod HTML przyjął postać:
nawigacja
treść
stopka
Rezultatem działania powyższego kodu jest następująca strona:
Strona została dołączona także do artykułu, jako przykład, który możesz dowolnie wykorzystywać w swoich projektach.
Jak wykorzystać stopkę?
Stopka „spadająca” na dół ekranu może znaleźć zastosowanie w wielu nowoczesnych projektach graficznych. Szczególnie, gdy nowe trendy staną się widoczniejsze również w polskiej części internetu. Nie musi przy tym być wysoką stopką zawierającą dodatkowe treści, choć może zostać użyta w tym celu.
Duża stopka pozwala umieścić dodatkową zawartość w dolnej części serwisu. Może być wykorzystywana wtedy, gdy pragniesz opublikować dodatkowe informacje lub funkcje, ale są one mniej ważne lub w pierwszej kolejności pragniesz zwrócić uwagę użytkowników na inne elementy serwisu. Dlatego duże stopki dobrze sprawdzają się w projektach blogów – użytkownik jest zachęcany do zapoznania się z główną treścią przed przejściem do innych dodatkowych elementów bloga.
W dużej stopce możesz przedstawić np. szczegółowe informacje kontaktowe, udostępnić łącza do ważnych działów lub polecić inne tworzone serwisy. W stopce opublikować możesz informacje o autorze serwisu łącznie ze zdjęciem, umieścić elementy identyfikacji wizualnej i brandingu marki lub dodać opcjonalne narzędzia nawigacyjne, np. chmurę tagów. Szczegółowa zawartość nowoczesnej stopki jest więc uzależniona od charakteru serwisu i twoich potrzeb.
Przykład z artykułu:
