02 kwietnia 2010 ~ Komentarzy: 4

Płynny layout w poziomie i pionie

CSS
{lang: 'pl'}

Płynny layout, to taki, w którym rozmiar elementów blokowych dostosowuje się do wymiarów okna przy jednoczesnym zachowaniu układu strony. Implementacja standardu CSS 2.1 we współczesnych przeglądarkach pozwala to osiągnąć bez wykorzystania tablic. W sieci można znaleźć kilka przykładów i tutoriali dotyczących tej techniki, jednak zwykle opisują one jedynie płynność poziomą – 2 lub 3 kolumnowy układ, z czego jedna kolumna jest płynnej szerokości.

Aplikacje internetowe oparte o techniki AJAX potrzebują układu, który pozwala na pełną interakcję bez przewijania strony. Wszystkie widgety muszą być zawsze widoczne, a część główna powinna mieć płynny rozmiar. Taki efekt jest dosyć trudny do osiągnięcia z powodu braku obsługi wartości table, table-row i table-cell dla własności display w przeglądarce Internet Explorer. W takich sytuacjach deweloperzy wspomagają się językiem JavaScript, co nie jest zbyt eleganckim rozwiązaniem.

W oparciu o tutoriale Matta Taylora stworzyłem płynny layout o układzie 2×3, z czego komórka (2,2) jest płynna. Layout jest w pełni zgodny ze standardami XHTML 1.0 Strict oraz CSS 2.1 i nie zawiera kodu JavaScript. Posiada komentarz warunkowy dla IE7 ze względu na brak obsługi własności CSS position:fixed.

Demo layoutu dostępne jest tutaj.

Tagi: , , ,

Podobne wpisy

Komentarze dla “Płynny layout w poziomie i pionie”

  1. Andrzej 11 maja 2010 at 09:01 Permalink

    No prawie super. Jedna rzecz mnie tylko martwi. Jak zmniejszam okno na wysokość, to tekst w kolumnach jest obcinany. A dobrze by było, żeby nie dało się zmniejszyć głównych kolumn bardziej niż jest tekst. Sprawdzałem w FF 3.6.3 i IE7. Nie lepiej byłoby to zrobić na ujemnych marginesach?

  2. Maciej 11 maja 2010 at 10:26 Permalink

    Wyobrażałem sobie pasek przewijania w głównym elemencie i ewentualnie ustawienie minimalnych rozmiarów całej strony. Górny i dolny element jest zrobiony na ujemnych marginesach.

  3. Andrzej 11 maja 2010 at 11:43 Permalink

    IMO nie ma nic gorszego niż jakieś wewnętrzne paski przewijania, czy to w DIVACH, FRAMACH czy IFRAMACH. Strasznie męczące w użytkowaniu.

    Jeśli chodzi o szerokość kolumn to zazwyczaj wystarczą właśnie marginesy i pływanie, chociaż przy 3 kolumnach jest trochę zabawy :)

    Jednak z wysokością zawsze jest najwięcej problemów, żeby stopka była na dole ekranu, gdy jest mało treści lub pod treścią gdy treści jest więcej niż ekran. Męczę to już jakiś czas i ciągle gdzieś mi się sypie :|

  4. Maciej 11 maja 2010 at 13:01 Permalink

    Tworząc ten layout myślałem o aplikacjach takich jak Google Maps czy Wave.

    Na zwykłych stronach IMO nie warto bawić się w takie rzeczy.


Dodaj komentarz