Tła i ich przyczepianie
Wednesday, 14. September 2005, 21:58:30
Postawiłem sobie dość ciekawe zadanie. Zrobić układ oparty na 3 kolumnach, który dobrze by się sprawował przy różnych rozdzielczościach i niedopracowaniach przeglądarek. Po długim szukaniu, myśleniu i takich tam, zdecydowałem się na zabawę z float. Dzięki temu, jeśli zaistnieje taka potrzeba, układ zrobi się 2, albo nawet 1 kolumnowy. Ale jak ma się to do wspomnianego tła?
Zgodnie z założeniami po lewej stronie miała być kolumna, która wraz z nagłówkiem tworzyłaby wspólny motyw kolorystyczny, który odróżniałby się od pozostałej części strony. Tutaj pojawiły się problemy.
Nie mogłem sprawić, aby float sięgał do samego dna strony, a chciałem nadać kolumnie odpowiedni kolor i obramowanie. Rozwiązaniem okazało się przypisanie odpowiednio spreparowanego tła dla elementu html. Wszystko sprawuje się dobrze, mam jednak pewną wątpliwość. To jest tło nie dla całej strony, a dla jednej kolumny. Powinienem więc nadać je tej kolumnie. Z drugiej jednak perspektywy, tam gdzie treść w lewej kolumnie się kończy, zaczyna się element graficzny, który ozdabia całą stronę.
Przy okazji zauważyłem jedną ciekawą rzecz. Możliwość stosowania wielu teł jest we wczesnej fazie implementacji, czyli nie można jej stosować na masową skalę. W tym jednak przypadku, mogłe nałożyć na lewą kolumnę dodatkowy obrazek i ozdobić miejsce, gdzie się łączy z nagłówkiem, przy pomocy dodatkowego tła (bez repeat).
Nagłówek okazał się kolejnym problemem. Niestety miał'width na całą szerokość strony, a ja chciałem aby był obramowaniem oddzielony od całej treści strony za wyjątkiem lewej kolumny. Tutaj pomocne okazało się pozycjonowania relatywne. Dodałem mu ramkę o szerokości 3px na dole i o tyle samo ruszyłem do góry lewą kolumnę. Dzięki temu zasłoniła ramkę.
Co nieoczekiwane, dziala poprawnie w MSIE.
Zgodnie z założeniami po lewej stronie miała być kolumna, która wraz z nagłówkiem tworzyłaby wspólny motyw kolorystyczny, który odróżniałby się od pozostałej części strony. Tutaj pojawiły się problemy.
Nie mogłem sprawić, aby float sięgał do samego dna strony, a chciałem nadać kolumnie odpowiedni kolor i obramowanie. Rozwiązaniem okazało się przypisanie odpowiednio spreparowanego tła dla elementu html. Wszystko sprawuje się dobrze, mam jednak pewną wątpliwość. To jest tło nie dla całej strony, a dla jednej kolumny. Powinienem więc nadać je tej kolumnie. Z drugiej jednak perspektywy, tam gdzie treść w lewej kolumnie się kończy, zaczyna się element graficzny, który ozdabia całą stronę.
Przy okazji zauważyłem jedną ciekawą rzecz. Możliwość stosowania wielu teł jest we wczesnej fazie implementacji, czyli nie można jej stosować na masową skalę. W tym jednak przypadku, mogłe nałożyć na lewą kolumnę dodatkowy obrazek i ozdobić miejsce, gdzie się łączy z nagłówkiem, przy pomocy dodatkowego tła (bez repeat).
Nagłówek okazał się kolejnym problemem. Niestety miał'width na całą szerokość strony, a ja chciałem aby był obramowaniem oddzielony od całej treści strony za wyjątkiem lewej kolumny. Tutaj pomocne okazało się pozycjonowania relatywne. Dodałem mu ramkę o szerokości 3px na dole i o tyle samo ruszyłem do góry lewą kolumnę. Dzięki temu zasłoniła ramkę.
Co nieoczekiwane, dziala poprawnie w MSIE.