Ing. Jiří Štěpánek

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

30px 50px 100px 70px #absolutediv { position: absolute; width: 100px; height: 70px; left: 30px; top: 50px; } Oranžová plocha = stránka Definovaný prvek bude při tomto formátování umístěn nezávisle na ostatních prvcích na stránce tak, že jeho levý hodní roh bude mít souřadnice [30;50]. Při absolutním pozicování tedy definujeme vždy umístění levého/pravého horního rohu boxu.

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

#normaldiv #relarivediv 30px -20px #normaldiv { width: 200px; height: 100px; background-color: green; } #relativediv { position: relative; width: 100px; height:90px; top: -20px; left: 30px; background-color: black; } Normálně by se #relativediv zobrazil pod #normaldiv (normální tok vykreslování elementů) Díky relativnímu pozicování se jeho umístění změní podle definice. Posune se px od svého normálního horního okraje a o 30px od svého normálního levého okraje

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

#floatdiv { float: left; width: 100px; height: 50px; background-color: Red; } V XHTML dokumentu je nutné nejprve definovat plovoucí box, teprve poté definovat obsah, který bude obtékat tento plovoucí box.

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Hlavička – není nezbytně nutná, ve většině případů se používá Oblast s navigačními prvky, šířka je většinou pevně dána Obsahová část – šířka by se měla přizpůsobovat šířce stránky

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek Hlavička – logo, grafika, login, vyhledávání Oblast s navigačními prvky, šířka je většinou pevně dána Obsahová část – šířka by se měla přizpůsobovat šířce stránky Oblast s navigačními prvky (kontextová navigace, info..), šířka je většinou pevně dána Patička

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

screenObrazovka ttyTeletype – pevná šířka znaků, konzole tvTelevize, jiná média s nízkým rozlišením a omezenými scrollovacími schopnostmi projectionProjektory handheldMobilní zařízení printTiskárny / náhled tisku brailleZařízení využívající braillovo písmo auralSyntetizátory řeči allVšechna zařízení

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

#obal #centrovanybox #obal { text-align: center; } #centrovanybox { margin: 20px auto 20px auto; text-align: left; }

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

Foto Popisek fotky Odkaz na detail Obalový kontejner obrázek Obyčejný text, span, odstavec…

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek MENU

Technologie pro publikování na webu 1, Ing. Jiří Štěpánek