Notatki

Dwuczęściowe tło strony

Swojego czasu Riddle pokazywał jak zrobić stronę z płynnie połączonymi dwoma tłami (prawym i lewym). Metoda ciekawa, jednak dla mnie trochę za skomplikowana i tworząca za dużo niepotrzebnych divów (tak z 4, w tym 2 kompletnie puste), więc pozwolę się nie zgodzić z tym, że jest to najlepsze rozwiązanie. Problem jednak jest ciekawy i warto go też rozwiązać w inny sposób.

Rozwiązaniem na pewno nie jest wstawianie megadługiego obrazka tła i centrowanie go - bo (tak jak to zresztą napisał Riddle) jest się wtedy uzależnionym od rozdzielczości i niepotrzebnie zwiększa się wagę pliku. Jak więc zrobić to inaczej?

Tworzenie dwóch bloków o szerokości 50% i ustawianie ich obok siebie jest… niepotrzebne, bo:

• po pierwsze - nie ma potrzeby ich tworzyć, skoro jest html i body
• po drugie - przecież tylko jeden może mieć 50% szerokości i przykryć tego “drugiego”

Zmiany w sumie kosmetyczne, jednak pozwalają zaoszczędzić na divach i uprościć całą konstrukcję.

A co trzeba zrobić?

1. ustawić wymiary body i html tak, żeby zajmowały zawsze całą wysokość ekranu (jeżeli tła też mają zajmować całą wysokość)
2. ustawić szerokość body na 50% i przesunąć w je w prawo (jak jest po lewej to wyskakuje później mały bug w Safari)
3. wstawić część łączącą tła i ją odpowiednio wypozycjonować
4. poustawiać wymiary tak, żeby scrollbary pojawiały się w odpowiednich momentach
5. usunąć błędy w IE

Tła strony ustawiamy w CSS oczywiście dla body (prawe) i html (lewe).

Mając już ogólny plan można przejść do konkretów, czyli idąc po kolei punktami z listy:

Ustawiamy dla html w CSS height:100%, a dla body min-height:100% (żeby się rozciągało, jeżeli strona przekroczy wysokość okna).

Dajemy (znowu dla) body width:50% oraz margin-left:auto i już jesteśmy w połowie drogi - strona jest podzielona na 2 części z różnymi tłami.

Do body wstawiamy (tradycyjnego?) diva, który będzie “kontenerem” dla całej strony i ustawiamy mu szerokość taką, jaką chcemy, no i ujemny margin-left o wartości równej połowie szerokości kontenera (czyli jak strona ma mieć szerokość 600px to margin-left będzie wynosił -300px).

Wszystko pięknie, tylko teraz poziome scrollbary nie pojawiają się, kiedy okno jest za wąskie. Dlatego dla html trzeba jeszcze dodać min-width równe szerokości kontenera.

No tak, ale IE rozumie wartości min-height i min-width dopiero w swojej 7 wersji. Dlatego dla (najpopularniejszej) 6 trzeba to obejść dając body (tylko dla IE<7!) dodatkowo height:100%, które zrozumie właśnie jako min-height. Z min-width jest gorzej, bo nie da się go obejść w taki łatwy sposób. Można jednak “dorobić” potrzebną przestrzeń dając body np. padding-left równy połowie szerokości strony (i to nie musi być tylko dla IE, szczególnie kiedy chcemy, żeby kolor body nie zaczynał się równo w połowie tylko z lewej strony kontenera) albo border-left (jeżeli sytuacja na to pozwala) w kolorze tła htmla i (znowu) szerokości połowy kontenera.

W kontenerze oczywiście ustawiamy tło, które będzie “łącznikiem” między tłem prawym i lewym.

Dla wszystkich, którzy wolą kod zamiast słów, bądź są ciekawi jak rozwiązanie wygląda w praktyce: DEMO.

• 04.05.08
• Kategorie
  • Technicznie