Przykłady layoutów stronek formatowanych za pomocą warstw i CSSów (tabelki są bee :)

W związku z częstmymi pytaniami o to co i jak zrobić, aby warstwy w danym układzie layoutu wyglądały tak jak chce autor, pojawiającymi się na forum.webhelp.pl zebrała się u mnie mała kolekcja takich layotów w związku z tym przekazuję je w Wasze ręce.

W celu ułatwienia nawigacji dodałem małe obrazki, aby pokazać zarys wyglądu.


Nieoznaczone listy jako elementy nawigacyjne na stronie (podobnie jak to menu :>)

Listy o nieoznaczonych elementach coraz częściej są stosowane jako elementy nawigacyjne. Tak też jest w moim przyapdku, więc parę zebranych przykładów zastosowania CSSow do ich formatowania znajdziecie tutaj.

Zaletą takiego rozwiązania jest zachowanie naturalnej hierarchii w naszym menu, więc przeglądarki które nie obsługują CSSów zobaczą elementy zagnieżdżone dokładnie w tych miejscach gdzie one byc powinny!


Przewijanie zawartości tabeli ze stałym nagłówkiem

Jak zrobić tabelkę ze stałym nagłówkiem i możliwością niezależnego przewijania jej treści. Dodatkowym utrudnieniem jest założenie, że header ma mieć dokładnie te same szerokości komórek co odpowiadające mu kolumny.

Sprawa niby prosta, troche JS'a i heja. Kopiujemy element thead do elemntu poza tabelą, odczytujemy szerokości komórek oryginału przez offsetWidth i gotowe. Niestety w praktyce okazało, się że przeglądarki nieporawnie odczytują szerokość komórek, ale jest na to rada w postaci odpowednich CSS'ów