Layout

Řádkový layout

Vytvořte nový html dokument se třemi bloky pro hlavičku, navigační menu a vlastní obsah webu.

Vytvořte nový soubor stylů a připojte jej k html dokumentu.

V CSS definicích bloků nastavte:

vycentrování všech tří bloků (margin auto)
stejnou vnitřní šířku všech tří bloků (width)
stejný levý a pravý vnitřní okraj všech tří bloků (padding-left a padding-right)
horní a dolní vnitřní okraj bloků dle potřeby (padding-top a padding-bottom)
výšku hlavičky (pro navigační menu a bloku obsahu výšku nezadávejte)
přizpůsobení výšky obsahového bloku i plovoucím objektům (overflow auto)
barvy pozadí všech tří bloků i těla stránky - barvy nabírejte kapátkem z colorschemedesigner.com

Do hlavičky zapište název webu, do menu vložte alespoň dva odkazy, do obsahového bloku zapište nadpis a odstavec.

V CSS nastavte:

barvu písma, velikost a druh písma pro blok hlavičky
změňte padding, width a height hlavičky tak, aby text v ní byl vertikálně i horizontálně v jedné třetině.
pro odkazy v menu nastavte barvu písma, velikost a bez podtržení (kontextuální definice pro odkazy uvnitř menu)
změnu barvy písma při najetí myší na odkazy v menu
styly pro nadpisy a odstavce

Vytvořte nový html dokument se třemi bloky pro hlavičku, navigační menu a vlastní obsah webu, které budou vnořeny v obalovacím bloku.

Vytvořte nový soubor stylů a připojte jej k html dokumentu.

V CSS definicích bloků nastavte:

vycentrování obalovacího bloku (margin auto)
přizpůsobení výšky obalovacího bloku vnitřním blokům (overflow auto)
vnitřní šířku obalovacího bloku (width)
barvu pozadí a rámeček obalovacího bloku, případně zaoblené rohy a stín
obtékání všech tří vnitřních bloků (float left)
šířku hlavičky a její levý a pravý vnitřní okraj tak, aby součet byl roven šířce obalovacího bloku (width, padding-left a padding-right)
výšku hlavičky a horní a dolní vnitřní dle potřeby (height, padding-top a padding-bottom)
barvu pozadí a spodní rámeček hlavičky (border-bottom)
šířku navigačního menu na asi 1/5 až 1/4 šířky obalovacího bloku