TNPW1 Technologie pro publikování na webu Cvičení č. 9 Boxmodel Martin Adámek

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 2 Centrování divu margin-left:auto; margin-right:auto; –funguje ve FF a v IE7 –nefunguje v IE6 pro IE6 (fční i v IE7) –text-align: center; /*u nadřazeného objektu*/

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 3 Box model – problém mějme div –v CSS nastaveno: width, padding, border –v něm vložen další obsah (např. další div) => rozdílná interpretace šířky v IE a ve FF –pojem šířka (width) v IE zahrnuje i padding a border –pojem šířka (width) ve FF označuje šířku obsahu šířka obsahu –v IE: width - 2*padding - 2*border –ve FF: width šířka celého divu –v IE: width –ve FF: width + 2*padding + 2*border vizte přednášku č.9

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 4 Box model – příklad div{ width: 250px; /*šířka*/ padding: 30px; /*vnitřní okraj*/ border: 5px; /*orámování*/ } interpretace v IE – =250 (px) interpretace ve FF – =320 (px)

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 5 Box model – 1.řešení MS IE CSS hack –pro IE<=6 před název parametru v CSS vložte podtržítko –„_width“ –pro IE7 před název parametru v CSS vložte rovnítko –„=width“ –musí být umístěno až po definici pro FF –FF takové zadání ignoruje –CSS nevalidní, ale v TNPW1 tolerováno

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 6 Box model – 2.řešení Samostatný CSS soubor se změnami pro IE –v xhtml kódu (až po linku pro vložení normálního css souboru) uveďte –z hlediska jazyka XHTML je to ignorováníhodná poznámka, ale IE si to přebere –zachování validity CSS

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 7 Box model – 3.řešení Матрёшка [Matrjoška] –formátovaný div vložte do dalšího divu –vnějšímu (přidanému) divu nastavte width –vnitřnímu (původnímu) divu nastavte paddingborder –u jednoho divu se nesmí setkat definice šířky s definicí paddingu nebo borderu

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 8 Bodovaný úkol – dnešní zadání příklad od minule (3 sloupce) vycentrujte pro rozlišení 800x600 (800x480) 1.celé minulé řešení vložte do divu s nastavenou šířkou 775px ne 800px! – musí být rezerva pro svislý posuvník a pro okno prohlížeče ! 2.div, ve kterém je minulé řešení vloženo, vycentrujte do oblasti hlavního obsahu (3 sloupce od minule) vložte div 1.definujte mu: width, padding, border (byť třeba nepřímo) 2.vložte do něj další div 3.zajistěte stejnou interpretaci v IE i ve FF ohodnocení úkolu: 1 bod obecná pravidla jsou na webu webu

TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 9 Semestrální projekt odevzdání –svému vyučujícímu dle náležitosti ke cvičení –do :59:59,9 bodová penalizace za zpoždění (skokově rostoucí nelineární funkce času) –zasláním odkazu, podobně jako u úkolů na cvičení + příloha (jen xhtml+css)/zip příjemce martin.adamek na uhk.cz předmět zprávy: „TNPW - projekt“ –nedodržení předmětu bude penalizováno (použijte kopírování blokem) –nebude možnost opravy projektu! =>správnou verzi pošlete už napoprvé požadavky naleznete v xls tabulce s hodnocením předmětu, ve dvou listech –projděte si řádek po řádku požadavky na listu „Projekty-hodnocení“, a projekt si sami zkontrolujte! –základní obecné info je i na webu hodnocení naleznete v téže tabulce zápočty se zapisují až po zkoušce, současně se známkou