@ xhtml css
  BIBLIOTEKA TelePrawa OPEN SOURCE

Strona płynna w jednostkach %

Strona ma szerokość dostosowującą się do rozmiaru ekranu, jednak w granicach 600-1200px. Określa to selektor #wrap właściwościami max-width i min-width, który na ekranach szerszych niż 1200px ustawia stronę centrycznie regułą margin:0 auto;. Jest to jedyna różnica między stroną elastyczną. Cienka kreska nad stopką wyznaczona selektorem hr z regułą hr {width:792px;} określa dla porównania szerokość pozostałych stron mających 2 kolumny o szerokościach 30% i 70%.

Lewa kolumna dosunięta do lewej krawędzi strony regułą float:left ma szerokość 30%. Prawa kolumna dosunięta do prawej krawędzi strony regułą float:right; ma szerokość 70%. W ten sposób obie kolumny mając szerokość 100% zajmują całe okno przeglądarki bez względu na jej rozdzielczość, jednak w granicach 600-1200px. Marginesy obustronne tekstu w kolumnach wynoszą 20px i są ustalane selektorami #content p, #sidebar p.

Większość przeglądarek ma ustawiony domyślny rozmiar na 1em (16px) a deklaracja w BODY font:0.75em ustawia trzy czware tego rozmiaru tj. 12px. Teraz 1em = 12px. Wszystkie czcionki na stronie oraz szerokość przycisków menu, są zwymiarowane w jednostkach em. W ten sposób zmiana wielkości czcionki przez przeglądarkę spowoduje proporcjonalną zmianę wszystkich pozostałych elementów co zapobiegnie wylewaniu się napisów z przycisków menu gdyż te nie są wymiarowane w pikselach tylko także w jednostkach em. Ilość znaków w wierszu maleje ze wzrostem wielkości czcionki.

MOŻLIWOŚĆ ZMIAN: Zamianę kolumn miejscami uzyskuje się przez zamianę wartości right z left w selektorach #content i #sidebar. Wielkość czcionki na stronie może być zwiększona przez zmianę w BODY wartości font: z 0.75em=12px do 0.9em =14.4px. Przesunięcie menu do lewej krawędzi następuje po skreśleniu reguły margin:0 auto; w selektorze #nawigo. Zmiana wartości background powoduje zmianę koloru elementów tła. Można zmienić; kolorystykę, typ i wymiar czcionki, napisy w nagłówku, menu i stopce, oraz cały nagłówek.