Elementy pozycjonowania














Wypływanie treści

Gdy "pudełko", czyli naturalny obszar jakiegoś elementu jest zbyt małe, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego. Fakt ten możemy obsłużyć za pomocą polecenia overflow.

Jeśli określiliśmy pudełko, ale nie zdefiniowaliśmy wartości overflow, treść wypływa ze zdefiniowanego obszaru i rozszerza faktyczny obszar jej występowania - zdefiniowana szerokość jest zachowywana, natomiast poszerza się wysokość. Jest to naturalne zachowanie elementu, np. treści akapitu czy tytułu.

<h1 style="width:250px; height:100px">zawartość tytułu stopnia 1</h1>

zawartość tytułu stopnia 1

<P style="width:250px; height:100px">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu

Możemy jednak określić, jak ma się zachować przeglądarka, gdy nastąpi owo "przelanie" tekstu. W poleceniu overflow możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden.

Scroll powoduje wyświetlenie pionowego i poziomego paska przewijania obejmujących zdefiniowany obszar występowania.

<P style="width:250px; height:100px; overflow:scroll">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu

Visible powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze wylana zawartość nie nakłada się na inne elementy, w Netscape 6 - nakłada się. Wydaje się, że poprawna (i logiczna) jest interpretacja Netscape'a.

<P style="width:250px; height:100px; overflow:visible">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu

Auto powoduje wyświetlenie jedynie tego paska przewijania, który jest w danej sytuacji potrzebny. W przypadku akapitu będzie to jedynie pasek pionowy.

<P style="width:250px; height:100px; overflow:auto">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu

Hidden powoduje przycięcie widocznej zawartości akapitu do obszaru zdefiniowanego pudełka. Wylana część akapitu nie będzie widoczna.

<P style="width:250px; height:100px; overflow:hidden">zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu...</P>

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu

zawartość akapitu zawartość akapitu zawartość akapitu

zawartość akapitu zawartość akapitu zawartość akapitu

zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu zawartość akapitu