Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)

Internetové publikování Formátovací model, pozicování

N Internetové publikování 9. Formátovací model, pozicování Vizuální formátovací model »Každý element vytvoří nula nebo více „boxů“, které se podle daných pravidel skládají a tvoří vzhled dokumentu

N Internetové publikování 9. Formátovací model, pozicování Vybrané typy boxů »Block »Inline(viz příklad 1) »Run-in »Typ boxu, který bude vytvořen určuje vlastnost display: inline | block | list-item | run-in | …

N Internetové publikování 9. Formátovací model, pozicování Typy boxů

N Internetové publikování 9. Formátovací model, pozicování Typy boxů v MSIE

N Internetové publikování 9. Formátovací model, pozicování Příklad použití inline boxu a { border: 1px red dashed; background-image: url(external.png); background-position: right; background-repeat: no-repeat; padding-right: 15px; }

N Internetové publikování 9. Formátovací model, pozicování Obtékané elementy »Element může být nastaven tak, že jej budou následující elementy „obtékat“ vlastností float: left | right | none »Element může být nastaven tak, že nebude sousedit s předchozím obtékaným elementem vlastností clear: none | left | right | both

N Internetové publikování 9. Formátovací model, pozicování CSS pozicování »Absolutní nebo relativní nastavení pozice elementu »Vlastnost position, nabývá hodnot »static – implicitní chování »relative – posun oproti standardnímu umístění »absolute – přesná specifikace pozice vzhledem k „obsahujícímu bloku“ »fixed – specifikace vzhledem k oknu prohlížeče (nepodporuje IE !!!)

N Internetové publikování 9. Formátovací model, pozicování Určení pozice »Vlastnosti »top – horní okraj »left – levý okraj »bottom – spodní okraj »right – pravý okraj »Hodnota »auto »procenta% »délka

N Internetové publikování 9. Formátovací model, pozicování Relativní určení pozice #outer { color: red } #inner { color: blue } #outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

N Internetové publikování 9. Formátovací model, pozicování Absolutní určení pozice »Prvek se umístí přímo na souřadnice zadané nejčastěji jako [top, left] »Počátek souřadnic je levý horní okraj nejbližšího nadřazeného elementu s definovanou pozicí »Lze použít pro "Beztabulkový design" element { position: absolute; top: 0px; left: 0px;}

N Internetové publikování 9. Formátovací model, pozicování Vrstvení elementů »Při použití pozicování se elementy mohou překrývat »Jejich vrstvení lze ovlivnit vlastností z-index: číslo

N Internetové publikování 9. Formátovací model, pozicování Pružný design »Design stránky s proměnlivou šířkou, která se přizpůsobí šířce okna »Problém 1: při příliš širokém okně jsou řádky velmi dlouhé a špatně se čtou »Řešení: vlastnost max-width »Problém 2: IE nepodporuje max-width »Řešení: JavaScriptŘešení.content { margin-left : 180px; max-width : 35em; width:expression(document.body.clientWidth > 800 ? "600px": "auto" ); }

N Internetové publikování 9. Formátovací model, pozicování Pružné logo »Šířka stránky se přizpůsobuje prohlížeči, ale logo zůstává fixní »Řešení: logo implementujeme jako pozadí elementuŘešení.hlavicka { background-image : url(logo.gif); background-repeat : no-repeat; background-position : left; height : 144px; }

N Internetové publikování 9. Formátovací model, pozicování CSS rozlišení prohlížečů »„hacky“ („hacks“) »Využití nedostatků v podpoře CSS standardu #alpha {width: 170px; height: 113px; filter:progid:DXImageTransform.Microsoft. AlphaImageLoader(src='alpha.png', sizingMethod='scale')} body>#alpha { background-image: url(alpha.png); background-repeat: no-repeat; }

N Internetové publikování 9. Formátovací model, pozicování CSS rozlišení prohlížečů »Podmíněné komentáře HTML