@ xhtml css
  BIBLIOTEKA TelePrawa OPEN SOURCE

Strona elastyczna, kolumny i czcionki w em

Strona ma szerokość 66em. Taką samą jak cienka kreska pod stopką wyznaczona selektorem hr z regułą hr {width:792px;}. Wynika to z faktu że 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, stąd 66em x 12px = 792px.

Lewa kolumna dosunięta do lewej krawędzi strony regułą float:left ma szerokość 16em oraz prawy margines 2em. Prawa kolumna dosunięta do prawej krawędzi strony regułą float:right; ma szerokość 48em. W ten sposób obie kolumny są oddzielone od siebie pustą kolumną o szerokości 2em. Całkowita szerokość wynosi; 16em + 2em + 48em = 66em.

Wszystkie czcionki jak też wymiary na stronie, w tym 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 np. 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 wierszach tekstu ulega minimalnym zmianom.

MOŻLIWOŚĆ ZMIAN: Zamianę kolumn miejscami uzyskuje się przez zamianę wartości right z left w selektorach #content i #sidebar. Szerokość strony zwiększa się w selektorze #wrap z 66em do np. 80em = 960px. Różnicę 14em dodajemy w żądanych proporcjach np. po 7em do obu kolumn, lewej i prawej. Można zmienić; kolorystykę, typ i wymiar czcionki, napisy w nagłówku, menu i stopce, oraz cały nagłówek.