HTML

Web o webu

Layout

Řádkový layout

Základní styly jednotlivých bloků header, nav, article, footer:

header
article
footer
box-sizing content-box border-box
padding

Další styly těchto bloků:

margin-bottom
border
border-radius
box-shadow

Řádkový layout - vlastnosti obalujícího bloku div

Vložíme-li bloky header, nav, article a footer do bloku div, můžeme nastavit styly tomuto obalujícímu bloku.

header
article
footer

Základní styly hlavního bloku div:

width
margin 0px auto

Další styly bloku div:

box-shadow
border
border-radius

Barvy a pozadí

Sloupcový layout - vlastnosti obalujícího bloku div

Bloky, tvořící toto rozvržení jsou zapouzdřené v bloku div, aby byla zajištěna jejich soudržnost a celkové vycentrování.
Tento obalovací blok obvykle vytváří celkový rámeček a doplňuje barevné pozadí u sloupcového menu:

Vlastnosti obalovacího bloku div:

header
article
footer
background-color
border

Aby se pozadí a rámeček vykreslily, musí mít tento blok přizpůsobení obsahu, tedy overflow: auto:

overflow visible auto

Sloupcový layout - šířka vnitřních bloků

Vnitřní šířka obalovacího bloku (width) určuje celkovou šířku ostatních bloků (této šířce se musí rovnat součet width, levého a pravého paddingu, případně rámečku). O kolik zvětšíme rámeček vnitřního divu, o tolik musíme zmenšit jeho width. Zvětšíme-li padding o 1px (levý i pravý), musíme zmenšit width o 2px a naopak (to platí při nezadané vlastnosti box-sizing, počítání šířky při hodnotě border-box je popsáno v další ukázce níže).

Vlastnosti obsahového bloku article:

header
article
footer
border-left 3px 197px width
border-left 1px 199px width
border-left 0px 200px width
padding
width

Celkovou šířku bloku article vypočteme jako součet levého rámečku, levého paddingu, vnitřní šířky width, pravého paddingu a pravého rámečku (ten je 0px, rámeček vpravo je rámeček obalovacího bloku div):


Box-sizing - změna počítání šířky vnitřních bloků

Při hodnotě box-sizing: content-box (nebo nezadané vastnosti box-sizing) platí způsob počítání celkové šířky popsaný výše (celková šířka bloku = width + padding + border + margin).

Při hodnotě box-sizing: border-box určuje width celkovou šířku bloku až po rámeček. Pak lze jednoduše používat % pro width při libovolných hodnotách paddingu a borderu. Pokud budeme nastavovat margin, je potřeba jej zadat v % a snížit procenta width.

Vlastnosti levého bloku nav: box-sizing: border-box; width: 30%; padding: 10px;

Nastavte padding article a upravte hodnoty tak, aby byl vpravo přesně do zbývající šířky 70 %.

Vyzkoušejte totéž po přepnutí box-sizing.

Vlastnosti obsahového bloku article:

header
article
footer
padding 0% 3%
10px 20px
width 70% 67%
64% 63%
border-left 0px 1px
2% - nelze - nevytvoří se

box-sizing content-box border-box

Přizpůsobení výšky obsahu

header

Nejstarším ze sedmi divů a jediným, který dodnes stojí, jsou pyramidy, které byly vybudovány v Egyptě pro faraóny a jejich manželky.Pyramidy

footer
header

Nejstarším ze sedmi divů a jediným, který dodnes stojí, jsou pyramidy, které byly vybudovány v Egyptě pro faraóny a jejich manželky.

V době, kdy je poprvé spatřili staří Řekové, bylo pyramidám již dva tisíce let. Byly postaveny jako hrobky, které měly navěky uchránit mumie faraónů a jejich poklady.

footer

Výšky záhlaví, navigačního menu a zápatí jsou zadány (jejich obsah je neměnný). Výška hlavního obsahového bloku obvykle bývá automaticky přizpůsobena obsahu (height i overflow auto).

height auto 150px
overflow auto visible

Totéž platí i pro sloupcový layout. Použijeme-li pevnou výšku, vytvoří se posuvník v obsahovém bloku. Nevýhodou je, že při prohlížení v malém okně může být ještě posuvník na okraji prohlížeče.

Poloprůhledné pozadí

Obrázek je na pozadí celého body, div je umístěn uprostřed

Pyramidy

Nejstarším ze sedmi divů a jediným, který dodnes stojí, jsou pyramidy, které byly vybudovány v Egyptě pro faraóny a jejich manželky. V době, kdy je poprvé spatřili staří Řekové, bylo pyramidám již dva tisíce let. Byly postaveny jako hrobky, které měly navěky uchránit mumie faraónů a jejich poklady.

background-color
color black white
#DAC6BB #CF6F25

Přechody od průhledné k neprůhledné

Background-color nastavte na transparent, jinak se kombinují

background-color transparent
background-image