Plovoucí prvky - vlastnost float

Je možné, že jste v minulé lekci při pevně dané pozici jednotlivých bloků (a vlastně i pevných rozměrech) narazili na některé problémy. S pevně danými rozměry mohou mít potíže monitory s menším rozlišením nebo se bloky nezobrazí celé při změně velikosti okna (ale to můžeme částečně řešit nějakou menší šířkou obalu), při pevných rozměrech může "přetékat" obsah divu (to zase lze řešit pomocí overflow - viz níže nebo zvětšením rozměru výšky). Několik pokusů jste asi museli vykonat, než jste vše správně umístili, také proto, že šírku počítá IE jinak než ostatní prohlížeče (otevřeli jste si stránku z minulé lekce v různých prohlížečích?). Znovu připomínám (viz 11. lekce), že IE do šířky (i výšky) započítává i padding a rámeček, zatímco prohlížeče, dodržující standardy CSS, do šířky počítají jen vlastní obsah elementu. V této lekci budeme také jiným způsobem řešit problémy s výškou elementu (mohlo se ale například zkusit vynechat rámečky a použít průhlednou barvu pozadí).

Další možnost jak rozmisťovat objekty na stránce pomocí stylů je využití vlastnosti float - umístění "plovoucího" objektu. Na rozdíl od absolutně umístěného objektu je plovoucí objekt součástí obsahu stránky (nadřazeného bloku), ostatní obsah kolem něj obtéká určeným způsobem (podobně jako kolem obrázků s atributem align - viz lekce 6.). Další rozdíl je ten, že při změně rozměrů okna nebo změně rozlišení "plave" objekt stále při určeném okraji, na rozdíl od absolutně umístěných, které při zmenšení okna nemusí zůstat viditelné (jejich souřadnice se dostanou mimo okno, samozřejmě vše závisí na rozměrech jednotlivých bloků).
Hodnoty vlastnosti float mohou být left, right, none, jejich význam je snad jasný.

Ukázková stránka bude vzhledově úplně stejná jako ta z minulé lekce. Rozdíl bude ve stylopisu (a samozřejmě obsahu), díky kterému se bude stránka chovat jinak při změně velikosti okna než ta předešlá (určitě si vyzkoušejte a také nezapomeňte otevřít obě stránky v jiných prohlížečích).

Ze zdroje stránky vynecháme div s třídou obal, protože měl pevně danou šířku, ostatní divy zůstanou z minulé lekce - titul, menu, obsah:
<div class=titul><h1> Moje koníčky </h1></div>

<div class=menu>
<h2>Sport</h2>
<a href=kun.html>Kopaná</a>
<a href=kun1.html>Hokej</a>
<h2>Další odkazy</h2>
<a href=http://www.fchk.cz/>FC Hradec Králové</a>
<a href=http://www.hchk.cz/>HC Hradec Králové</a>
<a href=http://esports.cz/>Esport - onlajny</a>
<a href=http://www.bwin.com/>Sportovní sázky</a>
</div>

<div class=obsah>
<h2>FC Hradec Králové</h2>
<center><img src=foto.jpg>
<h3>Soupiska 2006/7:</h3></center>
<b>Obránci:</b> 25 Radim Wozniak, 16 Jakub Špidlen, 23 Daniel Kaplan, 3 Vlastimil Karal, 2 Jiří Poděbradský, 11 Jan Filip, 12 David Přibyl
<b>Záložníci:</b> 4 Jan Hable, 10 Tomáš Bouška, ....
</div>

Protože nemáme určenou šířku "obalu" jako v minulé lekci, můžeme k vodorovnému vycentrování obsahu stránky využít nastavení stejného pravého a levého marginu tagu body, zkusíme v procentech (pro většinu prohlížečů z velikosti okna). Při pevné dané šířce "obalu" nebo jiných bloků tohle řešení použít nelze.

body {color: Blue; font-size: 15px; font-style: normal; font-weight: 100; font-family: Arial CE, Arial, Helvetica, sans-serif; background-image: url(pozadi1.jpg); margin-right: 10%; margin-left: 10%; }

Styl třídy menu bude obsahovat vlastnost float, s hodnotou left, to znamená, že bude "plout" vlevo (těch 10% marginu tagu body od kraje stránky), ostatní obsah ho bude obtékat vpravo (v našem případě div s třídou obsah):

.menu { border: solid 1px Gray; background-color: #CAEEF0; float: left; height: 90%; margin-right: 5px; padding: 10px; vertical-align: top; }

.obsah {border: solid 1px Gray; background-color: #CAEEF0; padding: 10px; height: 90%; overflow: auto; }

Třída menu sice nemá určenou šířku, pokud jste ale ponechali "tlačítkové" vlastnosti odkazů, mají danou šířku odkazy a šířka menu se jim přizpůsobí.
Ve stylech jsou přidané ještě další nové vlastnosti (i když nemusí mít na vaší stránce momentálně význam):
height: 90%; - výška bloku (v procentech nadřazeného objektu, což je v našem případě body - okno stránky)
vertical-align: top; - svislé zarovnání jsme měli již v 16. lekci
overflow: auto; - řídí případné oříznutí obsahu, který se do bloku nevejde, použitá hodnota auto nastaví v případě potřeby kolem bloku posuvníky (kdybychom tuto vlastnost nepoužili, ve většině prohlížečů by obsah "přetekl" přes okraj, zatímco v IE přesahující obsah prvek roztáhne, což může vést k "rozbití" pracně sestaveného layoutu). Kromě hodnoty auto lze použít hodnoty visible - výchozí hodnota (obsah "přeteče"), hidden - obsah bude oříznutý nebo scroll - posuvníky budou zobrazené vždy.
Uvedené styly vypadají jednoduše a fungují správně, při svých pokusech jsem ale narážel na různá, podle mne nelogická, chování stránek v různých prohlížečích, pak je prostě potřeba zkoušet a bádat :-) .
Jednou z drobností je špatné zobrazení nadpisu H1 v hlavičce stránky (ale právě jen v hlavičce) v Mozille, problém se odstraní vynulováním marginu ( h1 {margin: 0px;} ).

Název školy:	Základní škola, Hradec Králové, M. Horákové 258
Název projektu:	EU peníze školám
Číslo projektu:	CZ.1.07/1.4.00/21.2575
Téma:	Tvorba WWW stránek
Název:	VY_32_INOVACE_17_10B_tvorba www17
Autor:	Pavel Petr

Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.