Blokový model v CSS Obr. 1

Blokový model v CSS horizontální rozměry Obr. 2

Blokový model v CSS vertikální rozměry Obr. 3

CSS pozicování Pomocí CSS pozicování lze jakýkoliv objekt (obrázek, tabulka, text, cokoliv) umístit kamkoliv na stránku. S objekty lze posouvat a mohou se překrývat. Existují dva naprosto odlišné druhy pozicování. Absolutní pozice Relativní pozice

CSS pozicování Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text. (počítá se od levého horního rohu) position: absolute; left: 5px; top: 5px Relativní pozice určuje pouze, o kolik se má objekt posunout oproti své normální poloze. (počítá se od předchozího bloku) position: relative; left: 5px; top: 5px

CSS pozicování left - určuje posunutí objektu směrem doprava top - určuje posunutí objektu směrem dolů left - určuje posunutí objektu směrem doprava Pro posouvání nahoru a doprava se nepoužívá down a right, nýbrž top a left se zápornými hodnotami. Protože při přesouvání objektů může dojít k překrytí objektu, existuje vlastnost určující, který objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot celých čísel. Přitom vyšší číslo znamená vyšší pozici při překrývání. Plovoucí objekty - float: left | right

Vlastnosti boxů Atribut Možné hodnoty Popis margin-top: délka % auto velikost horního okraje margin-right: velikost pravého okraje margin-bottom: velikost spodního okraje margin-left: velikost levého okraje margin: komplexní nastavení velikosti okrajů: nahoře vpravo dole vlevo

Vlastnosti boxů Atribut Možné hodnoty Popis padding-top: délka % velikost vnitřního horního okraje padding-right: velikost vnitřního pravého okraje padding-bottom: velikost vnitřního dolního okraje padding-left: velikost vnitřního levého okraje padding: komplexní nastavení velikostí vnitřního okraje: nahoře vpravo dole vlevo

Vlastnosti boxů Atribut Možné hodnoty Popis border-top: barva nastavení vlastností horní části rámečku border-right: nastavení vlastností pravé části rámečku border-bottom: nastavení vlastností spodní části rámečku border-left: nastavení vlastností levé části rámečku border: komplexní nastavení vlastností rámečku

Vlastnosti boxů Atribut Možné hodnoty Popis border-top-width: thin, medium thick délka šířka horní části rámečku border-right-width: šířka pravé části rámečku border-bottom-width: šířka spodní části rámečku border-left-width: thin, medium thick, délka šířka levé části rámečku border-width: komplexní nastavení šířky rámečku: nahoře vpravo dole vlevo

Vlastnosti boxů Atribut Možné hodnoty Popis border-color: barva barva rámečku border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset nastavení rámečku: nahoře vpravo dole vlevo width: auto, délka, % šířka height: auto, délka výška float: left, right, none left, right=plovoucí objekt (např. obrázek), none=normální objekt clear: left, right, none, both čekání na skončení plovoucích elementů: left=vlevo, right=vpravo, both=na obou stranách

Otázky k opakování Co určuje blokový model v CSS? Jaké druhy pozicování znáte? K jakému účelu slouží vlastnost z-index? Jakým způsobem se vytvoří plovoucí objekt?

Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www stránek“ [online]. 6. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní