Obsah toho dílu:
Obsah uvnitř bloků bývá omezen hranami boxu, ale v některých případech může obsah z bloku přetékat
(angl. overflow). To se stává tehdy, je-li např. některý řádek obsahu příliš dlouhý a nesmí se zalomit na další
řádek; je-li uvnitř boxu jiný blok, jehož některý rozměr je větší než rozměry boxu; když je blok absolutně pozicovaný
a jeho obsah se nevejde do stanovených rozměrů; když má obsah záporné hodnoty margin, atd.
V situaci, kdy obsah boxu takto přetéká, nabývá významu vlastnost overflow, která určuje, jak se má s přetékajícím
obsahem naložit - zda jej zobrazit celý (třeba i vně rodičovského bloku), nebo jej oříznout (angl. clip), případně
jak. Tvar oříznutí obsahu dále definuje vlastnost clip.
Popis vlastnosti overflow
- povolené hodnoty:
visible | hidden | scroll | auto | inherit
- výchozí hodnota:
visible
- lze použít: blokové a nahrazované prvky
- dědí se: ne
- procenta: nelze
- media: vizuální
Popis povolených hodnot:
visible- Obsah se neořízne, může být zobrazen i vně hranic boxu. Klient však stále může oříznout obsah tak, aby nepřesahoval
hranice okna dokumentu.
hidden- Přetékající obsah je oříznut podle hranic boxu a nepoužije se ani žádný posouvací mechanismus (např. scrollbary) -
uživatel nemá možnost vidět "odříznutý" obsah. Hranice ořezu definuje vlastnost
clip.
scroll- Pokud je obsah oříznut a klient používá nějaký posuvníkový mechanismus (scrollbary, panning atp.), bude zobrazeno
ovládání tohoto mechanismu (posuvníky) - tak, aby měl uživatel možnost posouvat se v obsahu a zobrazit i oříznutý
obsah. Pokud je specifikována tato hodnota a cílovým médiem je
print nebo projection, přetékající
obsah bude zobrazen.
auto- Závisí na implementaci v klientu, ale většinou tato hodnota způsobí, že je-li obsah oříznut, použije se hodnota
scroll,
a pokud není oříznut, použije se visible.
Popis vlastnosti clip
Definuje oblast ořezu (angl. clipping region) - tedy jaká oblast obsahu daného prvku je viditelná.
- povolené hodnoty:
<tvar> | auto | inherit
- výchozí hodnota:
auto
- lze použít: blokové a nahrazované prvky
- dědí se: ne
- procenta: nelze
- media: vizuální
Popis povolených hodnot:
auto- Plocha má stejný rozměr a polohu jako box(y) daného prvku.
<tvar>- V CSS2 je jediným možným tvarem ořezu obdélník, ale v dalších verzích CSS2 se předpokládají rozšíření i pro neobdélníkové
tvary ořezu. Hodnota pro obdélník je ve tvaru:
rect(top,right,bottom,left), kde hodnoty top, right, bottom
a left určují odstup horní, pravé, dolní, resp. levé hrany ořezu od odpovídajících hran boxu. Těmito hodnotami je
buď <velikost> (záporné hodnoty nejsou povoleny) nebo
auto, což znamená, že daná hrana ořezu je totožná s odpovídající hranou boxu (tedy totéž jako hodnota
0).
Pokud mají jak prvek, tak i jeho rodičovské prvky definovány v clip nějaké oblasti ořezu, obsah prvku je vykreslen
tak, aby byla viditelná pouze oblast, která je průnikem všech dříve definovaných oblastí ořezu.
Popis vlastnosti visibility
Tato vlastnost určuje, zda jsou vykresleny boxy generované prvkem, či nikoli. Neviditelné boxy ale stále ovlivňují vzhled
dokumentu (srovnej naopak s vlastností display:none)
- povolené hodnoty:
visible | hidden | colapse | inherit
- výchozí hodnota:
inherit
- lze použít: všechny prvky
- dědí se: ne
- procenta: nelze
- media: vizuální
Popis povolených hodnot:
visible- Generovaný box je viditelný.
hidden- Generovaný box je neviditelný (zcela průhledný), ale stále ovlivňuje vzhled stránky (prvek ve stránce je, pouze není
viditelný).
colapse- Používá se jen u řádků a sloupců tabulek (viz pozdější kapitolu). U ostatních prvků má stejný význam jako
hidden.
Praxe
Tyto vlastnosti mají velký význam především v DHTML - zvlášť vlastnost visibility. Chceme-li mít stránku s
dynamickým chováním, připravíme si její obsah se všemi prvky, které má obsahovat, a těm, které mají být na počátku skryty,
pomocí CSS přiřadíme vlastnost visibility:hidden. Pomocí skriptovacího jazyka (např. Javascriptu) a jeho
událostí (events) je potom snadné měnit obsah stránky pouhou změnou této vlastnosti u příslušných prvků - jeden skryjeme
a jiný zobrazíme.
Příklad:
...
<SCRIPT type="text/javascript">
<!--
function Skryj(prvek) {
var x=getElementById(prvek);
x.style.visibility="hidden";
}
function Ukaz(prvek) {
var x=getElementById(prvek);
x.style.visibility="visible";
}
-->
</SCRIPT>
...
<BODY>
<SPAN onmouseover="Skryj('osoba2');Ukaz('osoba1')">Ukaz osobu 1</SPAN> -
<SPAN onmouseover="Skryj('osoba2');Ukaz('osoba2')">Ukaz osobu 2</SPAN> -
<DIV id="osoba1" style="visibility:hidden">...</DIV>
<DIV id="osoba2" style="visibility:hidden">...</DIV>
To je pochopitelně velmi triviální příklad - v praxi spíš budeme potřebovat poněkud sofistikovanější postupy. Časté je
uložit si všechny dynamické prvky do pole a s ním potom pracovat najednou - má-li se jedna z položek zobrazit, nejprve
(pro jistotu) skryjeme všechny ostatní a pak zobrazíme tu jedinou správnou:
...
<SCRIPT type="text/javascript">
<!--
var Prvky = new Array ("clanek1","clanek2","nabidka","odkazy","kontakty");
function Zobraz(n) {
for (var i=0;i<Prvky.length;i++) {
if (i==n) Ukaz(i,true);
else Ukaz(i,false);
}
}
function Ukaz(n,jeVidet) {
var x=getElementById(Prvky[n]);
x.style.visibility = (jeVidet) ? "visible" : "hidden";
}
-->
</SCRIPT>
...
<SPAN onclick="Zobraz(1)">Clanek 1</SPAN> -
<SPAN onclick="Zobraz(4)">Nabidka</SPAN>
...
<DIV id="clanek1" style="visibility:hidden">...</DIV>
<DIV id="nabidka" style="visibility:hidden">...</DIV>
Pro DHTML je většinou použití visibility vhodnější než display:none, protože neviditelný prvek
již je jednou zformátován ve stránce a jeho zviditelnění či skrytí nijak neovlivní celkový vzhled - naproti změna hodnoty
ve vlastnosti display může způsobit nové přeformátování stránky a tím i pomalé animace a množství nepěkných
vedlejších efektů. Jsou ale situace, kdy je naopak vhodné prvek zcela skrýt - je vždy důležité předem dobře zvážit, který
z postupů bude vhodnější.
Mnoho užitečných funkcí pro DHTML najdete v knihovně DHTML Lib, kterou máte k dispozici na mých stránkách http://web.iol.cz/pixy
na stránce Praxe-webdesign.
Staníček Petr
|
