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

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

Internetové publikování CSS 4. Formátovací model, pozicování

Vizuální formátovací model» Každý element vytvoří nula nebo více boxů obdélníků, které se podle daných pravidel skládají a tvoří vzhled dokumentu

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 http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-007/priklad01.html

Typy boxů

Typy boxů v MSIE

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; } http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-007/priklad02.html

Skrytí elementu» display: none» schová element a nevyhrazuje pro něj prostor» visibility: hidden» element normálně existuje, alokuje prostor, ale obsah není vidět

Width a šířka boxu» Vlastnosti nastavení šířky a výšky elementu (width, height) se týkají pouze vlastního obsahu» Šířka a výška boxu jsou dány připočtením 2* (margin + padding + border)

Outline (CSS 2.0)» Např:» p» {» outline:#00ff00 dotted 1px;» }» Kreslí ještě další linku okolo border

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» maximální šířka elementu» Podobně i» min-width» min-height» max-height MSIE jen ve standardovém módu

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 http://www.vscht.cz/kot/resources/studijni-materialy/ip-p-007/priklad03.html

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 (IE jen ve std režimu!!!)

Určení pozice» Vlastnosti» top horní okraj» left levý okraj» bottom spodní okraj» right pravý okraj» Hodnota» auto» procenta%» délka

Relativní určení pozice #outer { color: red } #inner { color: blue } #outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

Absolutní určení pozice element { position: absolute; top: 0px; left: 0px;}» 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 position jinou než static

Vrstvení elementů» Pozicované elementy se mohou překrývat» Jejich vrstvení lze ovlivnit vlastností z-index: číslo

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 <div> <img src="logo.gif" border="0" alt="" width="754" height="144" /> </div> <div class="hlavicka"> </div>.hlavicka { background-image : url(logo.gif); background-repeat : no-repeat; background-position : left; height : 144px; }

CSS rozlišení prohlížečů» hacky ( hacks )» Využití nedostatků v podpoře CSS standardu <head> <style type="text/css"> #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; } </style> </head> <body bgcolor="#ffcccc"> <img id="alpha" alt="transparant PNG" width="170" height="113" src="prazdny.gif" /> </body>

CSS rozlišení prohlížečů» Podmíněné komentáře HTML <link rel="stylesheet" href="styly.css" type="text/css" />