Tvorba www stránek

1. Tvorba www stránek Mgr. Vlastislav Kučera přednáška č. 9

2. Obsah přednášky • Polohování • normální řazení • plovoucí boxy • Vlastnosti • float • clear

3. Normální řazení • boxy jsou formátovány buď blokově, nebo řádkově, nikdy ne oběma způsoby současně • blokové formátování • boxy kladeny vertikálně za sebou, odshora obsahujícího bloku • vertikální vzdálenost mezi boxy dvou sourozenců– dána marginem • vertikální okraje splývají • řádkové formátování • boxy kladeny horizontálně za sebou • horizontální okraje, orámování a výplně se respektují

4. Plovoucí boxy • plovoucí box – box, který je na řádce posunut vlevo nebo vpravo • obsah může obtékat po jejich straně (nebo naopak nemůže) • obsah obtéká zprava plovoucí boxy vlevo a naopak • musí mít explicitní šířku • plovoucí box je vždy blokový a je posunut vlevo (vpravo) tak daleko, až se jeho vnější hrana dotýká buď hrany obsahující bloku, nebo vnější hrany jiného plovoucího boxu

5. Vlastnost float • určuje, zda má box plavat vlevo, vpravo nebo vůbec neplavat • hodnoty • left, right, none, inherit • výchozí hodnota • none • význam hodnot • left – prvek generuje vlevo plovoucí box; obsah obtéká zprava • right - prvek generuje vpravo plovoucí box; obsah obtéká zleva • př.: priklad-float.html

6. Vlastnost clear • určuje, které strany boxu prvku nesmí sousedit s předcházejícím plovoucím boxem • hodnoty • left, right, both, none, inherit • výchozí hodnota • none • význam hodnot • left – horní okraj generovaného boxu se zvětší natolik, aby se jeho horní hrana orámování ocitla pod spodní vnější hranou jakéhokoli vlevo plovoucího boxu • right - horní okraj generovaného boxu se zvětší natolik, aby se jeho horní hrana orámování ocitla pod spodní vnější hranou jakéhokoli vpravo plovoucího boxu • both – generovaný box je přesunut pod všechny plovoucí boxy generované prvky uvedenými dříve v dokumentu • none • př.: priklad-clear.html