Pokročilé umiestňovanie elementov
V kapitole o umiestňovaní elementov sme si prebrali kombináciu hodnôt základných vlastností display a position. V tejto kapitole si preberieme ešte niektoré praktické nastavenia, ktoré sú nevyhnutén pri štýlovaní štandardných dizajnov moderných stránok. Možno ste si všimli, že v ukážkach v danej kapitole nám vo väčšine išlo všetko klasickým umiestňovaním, ako keď ukladáme kocky lega do krabice, zľava doprava a od hora dole. Nevysvetlili sme si ešte prípady, ako docieliť, aby niečo bolo vždy v strede alebo aby niečo išlo opačným smerom, čiže sprava doľava. Poďme teda na to.
Ukladanie elementov napríklad z opačnej strany, sprava doľava sa dá pomocou vlastnosti float (vznášať sa, plynutie). Pôvodne bola táto vlastnosť určená na nastavenia obtekania (zobrazenia) textu okolo obrázka (img). Poďme si teda ukázať jej základné, resp. pôvodné využitie. Umiestnenie obrázka v texte je bežná situácia. Možno už máte skúsenosti s tým, že ste v nejakom textovom editore (napríklad vo Worde) písali textový dokument, ktorý obsahoval v texte aj obrázky. Niekedy ste chceli, aby bol obrázok len tak ako súčasť textu na normálnom mieste v texte. Niekedy ste obrázok umiestnili na ľavú stranu a chceli ste, aby bol text napravo od obrázka (aby ho obtekal sprava) a niekedy ste chceli, aby bol obrázok napravo a text obtekal zľava. Museli ste to určiť v nastaveniach obrázka. Presne toto nastavenie predsatvuje táto vlastnosť float. Túto vlastnosť priradíme obrázku (tagu img) a pomocou hodnoty none (nič) mu určíme, že sa obrázok bude správať štandardne a zobrazí sa na mieste, na ktorom sa nachádza v kóde tak ako keby bol obyčajný text (defaultné správanie), left (obrázok bude naľavo a text napravo) alebo right (obrázok bude napravo a text naľavo). Poďme si tieto tri jednoduché prípady ukázať, aby sme mohli ísť čím skôr ďalej:
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin-bottom: 100px;
}
img {
height: 50px;
width: 50px;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<h2>Ziadne obtekanie - none - defaultne nastavenie</h2>
<p>
Text pred obrazkom
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">
Text za obrazkom
</p>
<h2>Obtekanie sprava - obrazok bude nalavo - left</h2>
<p>
Text pred obrazkom
<img class="left" src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">
Text za obrazkom
</p>
<h2>Obtekanie zlava - obrazok bude napravo - right</h2>
<p>
Text pred obrazkom
<img class="right" src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">
Text za obrazkom
</p>
</body>
</html>
Kód nasledujúcej ukážky by mal byť jasný. Podľa toho akú hodnotu vlastnosti float použijeme, tam sa bude nachádzať obrázok. Často sa v praxi stáva, že v nejakom dive potrebujeme niektoré elementy poukladať za sebou zľava doprava a ak sa nezmestia na riadok, tak aby to odznova pokračovalo v novom riadku a takto dookola. Spomeňte si na informácie ohľadom umiestňovania elementov, ktoré sme sa už naučili. Podľa základnej vlastnosti display vieme, že blokové elementy idú od hora dole za sebou, každý vždy na nový riadok a dodržujú nami zadaný rozmer. Aj keď dáme päť malých úzkych (zadaná width) divov za sebou a opticky by sa zmestili na jeden riadok, idú aj tak pod sebou, pretože je to správanie hodnoty block. Do jedného riadku vieme elementy poukladať s hodnotou inline, tu sa ale neprejavuje nami zadaný rozmer, sú také široké, aké je ich obsah. Čo keď chceme mať nami zadaný rozmer elementov a chceme, aby išli za sebou v riadku ako kocky lega? A potom do nového riadku a dookola? Presne na toto sa dá použiť vlastnosť float.
Pomocou tejto vlastnosti iba určíme, či jednotlivé elementy majú ísť za sebou z ľavej alebo z pravej strany, čiže určíme iba smer. Čo je ale najväčšia výhoda tejto vlastnosti je to, že sa táto vlastnosť pri viacerých elementoch s rôznymi hodnotami prejaví aj spolu na jednom riadku, v podstate sa prejavuje spolu takmer na všetko, čo má zadané float. Jednoducho táto vlastnosť vraví – umiestni ma z danej strany najvyššie, kde je voľné miesto. Čiže nájde sa najvyššie prázdne miesto pre rozmer nášho elementu (pretože sa ukladá od hora dole) a potom najviac zľava (ak je float: left) alebo najviac sprava (float: right). Čiže ak aj budeme mať dva elementy a jeden z nich bude mať hodnotu left a druhý right, jeden bude úplne naľavo a druhý úplne napravo na vrchu (na jednom riadku). Takisto môžeme mať dva elementy naľavo za sebou a dva napravo za sebou. Táto vlastnosť sa využíva veľmi často, kedy chceme mať niečo vždy naľavo a niečo oproti napravo v danom elemente.
Ako sme povedali, float sa prejavuje na všetko, čo je float, resp. float elementy majú vplyv aj na všetko ostatné. Toto je dôležitá vec, pretože vám môže narobiť problémy, kým neprídete na to, ako to vlastne funguje. To znamená, že ak máme umiestnený nejaký element, ktorý je float, tak to, že je float, ovplyvní pozíciu elementov, ktoré sú v kóde za ním. Aj keď za float elementom umiestnime napríklad div, nepôjde na nový riadok (ako by blokový element inak mal), ale skočí vedľa tohto float elementu – bude ho obtekať z tej strany, ako má určené, podobne ako text predtým obtekal obrázok. Toto je vo väčšine nepraktické, resp. nežiadúce, preto existuje vlastnosť clear, ktorá toto správanie ako keby vymaže (clear – vyčistiť). Ak teda používame vlastnosť float na určenie pozície obrázka (img) v texte, túto vlastnosť nepotrebujeme. Ak float používame, ako v tomto prípade, na umiestnenie elementov na stránke zaradom z jednej alebo z druhej strany, je dôležité dať na konci bloku (div), v ktorom tieto elementy umiestňujeme zaradom, element (div) s touto vlastnosťou. To nám zabezpečí, že elementy napísané v kóde ďalej sa budú srpávať tak ako sa majú a nebudú sa snažiť obtiecť daný float element. Hodnota tejto vlastnosti môže byť left (zľava), right(sprava) alebo both (obidva), podľa toho, či chceme ďalej zrušiť (vyclííírovať) obtekanie zľava, sprava alebo všetko (both). V nasledujucej ukážke si vysvetlíme všetky dôležité veci ohľadom vlastnosti float.
<!DOCTYPE html>
<html>
<head>
<style>
.vonkajsiDiv, .box, .box2{
margin: 20px;
padding: 20px;
border: 1px solid black;
}
.box{
height: 30px;
width: 70px;
}
.box2{
height: 100px;
width: 70px;
}
.left{
float: left;
}
.right{
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="vonkajsiDiv">
<h2>1 - Divy zaradom - float left</h2>
<div class="box left">Div1</div>
<div class="box left">Div2</div>
<div class="box left">Div3</div>
<div class="box left">Div4</div>
<div class="box left">Div5</div>
<div class="box left">Div6</div>
<div class="box left">Div7</div>
<div class="box left">Div8</div>
<div class="clear"></div>
</div>
<div class="vonkajsiDiv">
<h2>2 - Divy zaradom - float right</h2>
<div class="box right">Div1</div>
<div class="box right">Div2</div>
<div class="box right">Div3</div>
<div class="box right">Div4</div>
<div class="box right">Div5</div>
<div class="box right">Div6</div>
<div class="box right">Div7</div>
<div class="box right">Div8</div>
<div class="clear"></div>
</div>
<div class="vonkajsiDiv">
<h2>3 - Jeden nalavo jeden napravo</h2>
<div class="box left">Div1</div>
<div class="box right">Div2</div>
<div class="clear"></div>
</div>
<div class="vonkajsiDiv">
<h2>4 - Priklad umiestnenia do volneho priestoru zhora a zo strany</h2>
<div class="box2 left">Div1</div>
<div class="box left">Div2</div>
<div class="box left">Div3</div>
<div class="box left">Div4</div>
<div class="box left">Div5</div>
<div class="box left">Div6</div>
<div class="clear"></div>
</div>
<div class="vonkajsiDiv">
<h2>5 - Bez clearu neberie vysku a ovplyvnuje nasledujuce elementy</h2>
<div class="box left">Div1</div>
</div>
<div style="border: 1px solid black;">Div po floate bez clearu</div>
</body>
</html>
V ukážke bolo pre lepšie pochopenie použitých viacero hlavných divov s nadpisom (ktorý určuje typ použitia), v ktorých sa nachádzalo viacero iných elementov väčšinou s vlastnosťou float. V prvom a druhom prípade máme viacero rovnakých divo, ktoré idú zaradom ako kocky lega pomocou vlasnosti float, v jednom prípade zľava a v druhom sprava. Divy sú aj očíslované, aby ste videli, ako to funguje. Podľa toho, akú máte šírku okna vo výsledku (pravý blok v simulátore), vidíte istý počet riadkov a stĺpcov, podľa toho, ako sa zmesta. Všimnite si, že je možné, že pri lefte máte napravo (pri righte naľavo) medzi hranou bloku a posledným elementom možno väčší priestor. Je to preto, že ak sa tam daný element nezmestí, ostane tam prázdno, proste všetko je zarovnané na danú stranu, ako keby to bolo text. V treťom prípade sme použili veľmi často využívaný spôsob, kde jeden element chceme mať naľavo a druhý element chceme mať napravo. V štvrtom prípade sme naschvál umiestnili na začiatok div, ktorý má väčšie výšku ako ostatné a teda zaberá viac miesta, resp. viac riadkov. Podľa toho, ako máte šírku bloku, sa vám rôzne zobrazujú elementy. Všimnite si, že ďalšie menšie divy nejdú automaticky pod tento element akokeby do nového riadku, ale spĺňajú to, čo bolo popísané na začiatku. Hľadajú si najvyššie a najviac naľavo miesto, kde je voľný priestor na ich umiestnenie. Čiže sa vopchajú pod Div 2 a takto dokola.
Všimnite si, že vo všetkých týchto štyroch prípadoch sme použili na konci obsahu vonkajšieho divu jeden div, ktorý nič neobsahuje, má ale vlastnosť clear, ktorá nám zabezpečila, že sa nám vždy ďalší obsah zobrazoval korektne a float v predchádzajúcich boxoch nemal vplyv na ostatné elementy za nimi. Okrem toho nám zabezpečil, že výška vonkajšieho divu sa roztiahla podľa jeho obsahu. Na čo je to dobré? Vlastnosť float totižto nemá vplyv na výšku nadradeného elementu. Toto je veľmi dôležitá vec. Ak umiestnime do divu float elementy, jeho šírku ovplyvnia, zväčšia, ale na výšku nemajú vplyv. Ak chceme, aby div roztiahli, tak ako sme zvyknutý, musíme umiestniť takýto clear element za float elementy, ktorý akokeby povedal, vymaž float doteraz a doteraz niečo išlo, po tadeto niečo je. To, že to tak naozaj je, si môžete všimnúť v šiestom prípade, kde sme clearovací element nepoužili. Všimnite si za prvé, že orámovanie vonkajšieho divu nezahŕňa celý svoj obsah, teda nie je až po spodok divu 1, akokeby nemal tento div v sebe ten vnútorný. Je to preto, lebo daný element neroztiahol jeho výšku, on ako keby čo sa týka výšky nevedel, že tam niečo má. Za druhé si všimnite správanie divu 2. Keďže nemá vlastnosť float, správa sa štandardne ako blok, ale nejde do nového riadku, ale obteká predchádzajúci element, ktorý je float a jeho float nebol následne vymazaný nejakým clear elementom. Takže sa zobrazuje na jeho úrovni, akokeby vedľa neho. Ak by sme za div 1 umiestnili náš clearovací div z predchádzajúcich prípadov, všetko by sa zobrazovalo, ako sa má.