Kaskadowe arkusze stylów CSS: wypływanie elementów









Tematy: kadrowanie | kursory | sposób wyświetlania | wypływanie | widzialność







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki






Wypływanie zawartości



Dane w pigułce


Zastosowanie
obsługa przepełnienia pojemnika elementu


Dziedziczenie
nie


Wartości
visible, hidden, scroll, auto


Wartość domyślna
visible


Przykład
overflow:scroll


Uwagi



Odpowiednik w HTML
brak



Aby określić sposób potraktowania zawartości wypływającej z pojemnika, należy wpisać w definicji stylu overflow: wartość.

Gdy zdefiniowany przez nas pojemnik, czyli obszar jakiegoś elementu jest zbyt mały, aby zawrzeć w sobie całą zawartość elementu, wypływa ona z niego - następuje przepełnienie. Fakt ten możemy obsłużyć za pomocą polecenia overflow.

Jeśli określiliśmy pojemnik, 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 zwiększa 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" zawartości. W poleceniu overflow możemy przyjąć jedną z czterech wartości: scroll, visible, auto i hidden.

Wartość 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

Wartość visible powoduje wyświetlenie całej zawartości elementu, bez względu na zdefiniowany obszar występowania. W Internet Explorerze 6 wylana zawartość nie nakłada się na inne elementy, w IE 7, Firefoksie i Operze - nakłada się.

<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

Wartość 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

Wartość hidden spowoduje 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

Interpretacja: Internet Explorer, Firefox, Opera