Aktuality:
1.11.2009 - spuštěna nová verze webu.

Dnes je Přidat k oblíbeným

CSS - ořez a posuvník

nova online
 K těmto úkonům se používá CSS vlastnost overflow. Hodnota vlastnosti overflow nastavuje, co se stane s textem nebo obsahem, který se nevejde do bloku, v němž je umístěn. Overflow se překládá jako přetékání. Znamená to, že pokud nějakému objektu (nejspíš <div>u) nastavíme pevné rozměry a umístíme do něj dlouhý text, který se tam nevejde, začne text z tohoto <div>u vylézat. To může někdy vypadat hodně divně. A proto vlastností overflow můžeme nastavit, jak se má tento text chovat. Vlastnosti overflow můžeme přiřadit čtyři hodnoty:
  • overflow: none; Tato hodnota je výchozí a znamená, že text přes okraje <div>u přeteče do jiných objektů. V IE nepřeteče, ale chybně roztáhne celý blok <div>
  • overflow: hidden; Text, který se nevejde bude na konci <div>u oříznut, skryt a uživatel se k němu nedostane. To se používá třeba v menu, když si uživatel zvětší písmo, tak aby se nerozbila struktura stránky nebo v textech, jejichž délku nemůžeme moc ovlivnit (vkládané reklamy, komentáře článků s extra dlouhými citoslovci =), výpisy databází...).

    • 
  • overflow: auto; Tato hodnota text sice také skryje, ale pokud je potřeba, tak na kraji <div>u zobrazí posuvník v potřebném směru (tzn. svislý nebo vodorovný nebo oba). Výhodou této hodnoty je, že posuvník se zobrazí pouze v případě potřeby, což je mnohem hezčí než overflow: scroll a uživatel se k celému textu dostane.
  • overflow: scroll; Přetékající obsah bude skryt stejně jako u overflow: auto, ale posuvníky se zobrazí, i když nejsou potřeba, což není moc estetické a navíc to zabírá místo.

Overflow: none

Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div> Dlouhý text bude přetékat a v IE roztáhne celý <div>

Overflow: hidden

Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt Dlouhý text bude skryt

Overflow: auto

U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný posuvník U dlouhého textu se zobrazí potřebný

Overflow: scroll

Posuvník se zobrazí i u krátkého textu
Design a kód Kookie © 2009 | Nahoru| O webu | Televize online | TV online
Základy jazyka HTML Strukturování textů Formátování textu Tvorba seznamů Tvorba odkazů Grafika stránek Barvy na webu Tvorba tabulek Tvorba rámců Tvorba formulářů Neutrální tagy Vývoj HTML- XHTML Úvod do CSS Zápis CSS a propojení s HTML Selektory Výstupní zařízení Dědičnost a kaskáda Typy prvků v CSS Kompletní přehled CSS vlastností Rozdílný vzhled v prohlížečích Délkové jednotky v CSS Ořezávání a posun Obtékání Absolutní pozicování v CSS Relativní pozicování v CSS Layout absolutním pozicováním Layout relativním pozicováním Pokročilý layout - tzv. Svatý grál Nechte své stránky vydělávat! Jak zvýšit návštěvnost Seznam katalogů PHP - dynamické stránky Javascript