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.

Prezentace na téma: "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."— Transkript prezentace:

1 CSS – float a clear Mgr. Lenka Švancarová

2 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).

3 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

4 CSS – float a clear Prostuduj si informace o vlastnosti clear na stránce http://www.jakpsatweb.cz/css/clear.html. http://www.jakpsatweb.cz/css/clear.html 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.

5 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.

6 CSS – float

7 CSS – float (index.html /jako v 7/) Já Zájmy Osobní stránky Lorem Ipsum

8 CSS – float (float.css) #menu { background-color: yellow; float: left; width: 190px; } #telo { background-color: #92A7BE; float: right; width: 760px; }

9 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; }

10 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;).