CSS – float a clear Mgr. Lenka Švancarová
CSS – float Vlastnost určuje obtékání prvku. Hodnoty: right – prvek bude zarovnán vpravo, okolní obsah stránky ho bude obtékat (bude tedy vlevo). left – prvek bude zarovnán vlevo, okolní obsah stránky ho bude obtékat (bude tedy vpravo). none – bez obtékání (výchozí hodnota). Prvkům, kde je použit float se říká plovoucí prvky (boxy) nebo obtékané prvky (boxy).
CSS – float a clear Aby mohl být prvek obtékaný, musí mít definovanou šířku width. Pomoci vlastnosti clear se dá říci, že se má prvek vykreslovat až pod všemi obtékanými prvky. Hodnoty clear: left right both none
CSS – float a clear Prostuduj si informace o vlastnosti clear na stránce Poslední příklad si vyzkoušej a s komentáři si ho přepiš do sešitu. Vytvoř stránku s nadpisem, pod kterým bude vlevo obrázek a vpravo krátký text. Pod obrázkem bude odstavec textu přes celou šířku stránky. Ulož jako obtekani.html.
CSS – float a clear Na základě informací dále vytvoř svoje osobní stránky, které budou mít alespoň tři podstránky. Na všech podstránkách bude vlevo menu (viz obrázek na následujícím snímku). Stránky budou mít pevnou šířku a budou zarovnány na střed.
CSS – float
CSS – float (index.html /jako v 7/) Já Zájmy Osobní stránky Lorem Ipsum
CSS – float (float.css) #menu { background-color: yellow; float: left; width: 190px; } #telo { background-color: #92A7BE; float: right; width: 760px; }
CSS – float (float.css) Obal je stejný jako v předchozí lekci. U id telo a menu je místo absolutního pozicování použita vlastnost float. body { text-align: center; } #obal{ position: relative; margin: auto; width: 960px; text-align: left; }
CSS – float a clear Udělej další designovou variantu tvých osobních stránek, kde bude menu umístěno nahoře. Tip: Na obrázku je použit třikrát div, jeden seznam, kde položky jsou ve stejné třídě a je jim nastaveno obtékání (float: left;).