Lekce 13 - Stylování hlavičky HTML stránky
V minulé lekci, Navigační menu, patička a HTML entity, jsme si připravili HTML kód hlavičky a patičky.
Dnes se v HTML/CSS tutoriálu budeme věnovat stylování hlavičky.
Pozadí
Hlavička a patička budou mít stejné pozadí. Opět se jedná o obrázek se šumem, který jsme si vygenerovali na http://www.noisetexturegenerator.com/. Můj obrázek vypadá takto:

Pozadí nebudeme nastavovat ani hlavičce, ani patičce, ale rovnou celému body. Důvodem je, aby byl pozadím u patičky vždy vyplněný celý zbylý prostor stránky (tedy i za patičkou, když je obsah příliš krátký a klient má vysoké rozlišení). Pokud bychom to tak neudělali, mohlo by na velkých monitorech zbýt pod patičkou bílé místo.
Pozadí tedy zapíšeme do selectoru body
, kde již máme
nastavení písma. Kromě obrázku určíme i barvu, proč jsme si již
vysvětlovali. Body nastavíme ještě vnější okraj (margin
) na
0
, tím zmizí nevzhledný tenký okraj okolo celé stránky. Jako
poslední nastavíme celému tělu stránky minimální šířku
960px
. Jistě si pamatujete, že právě 960px
je
doporučená šířka pro webové stránky (pokud nepočítáme responzivní
verzi, ale o tom až později). Stránka se díky specifikované minimální
šířce nerozsype, když zmenšíme okno prohlížeče, ale pouze se zobrazí
posuvníky.
Styl body by nyní měl vypadat asi takto:
body { background: url('obrazky/pozadi_sede.png') #1c2228; margin: 0px; font: 14px Verdana; min-width: 960px; }
Výsledek:

Hlavička
Pusťme se do stylování hlavičky. Nejprve hlavičce nastavme výšku na
73px
. Výšku nastavíme prostě headeru, aplikuje se i na
header
v článku, ale to nás v tomto případě netrápí:
header { height: 73px; }
Logo
Logo jsme vložili do HTML jako div
, což je pro zopakování
element určený pouze ke stylování a nemající žádný další význam. V
CSS vložíme do loga obrázek tak, že ho umístíme na pozadí a vypneme
opakování. Je to alternativa k vložení loga přes obrázek pomocí HTML tagu
img
. Výhodou je, že se s obrázkem lépe pracuje a lépe se
pozicuje, když je na pozadí. Do obsahu článku se tento přístup příliš
nehodí, v rozvržení je naopak užitečný.
Jako obrázek loga jsem použil tento:

Můžete si ho stáhnout nebo použít svůj. Velikost je 64x64
pixelů. Nabízí se i použití nějaké pěkné ikony, kde je hledat již
víte. Ostylujme si div
s ID
"logo". ID
selektor funguje úplně stejně, jako selektor třídní, jen nezačíná na
tečku .
, ale na mřížku #
:
#logo { background: url('obrazky/logo.png') no-repeat; width: 250px; height: 60px; float: left; margin: 7px 0px 0px 20px; }
Nastavení pozadí by mělo být jasné. Hodnotou no-repeat
určujeme, že se nemá obrázek opakovat (dláždit vedle sebe, jako např.
pozadí stránky).
Dále tu máme nastavení šířky a výšky divu s logem a textem.
Float
určí element jako "plovoucí", což je nutné k tomu,
aby mohlo být logo vedle navigace. Neplovoucí blokové elementy se řadí pod
sebe. Všimněte si, že doteď bylo logo nad navigací.
Marginem určíme vnější okraj, hodnoty jsou udávány v pořadí horní, pravý, dolní, levý. Posouváme ho tedy kousek dolů a doprava.
Nyní přejdeme do HTML a text v divu logo vložíme do tagu <h1>. Je totiž vhodné, aby byl nápis v logu označen jako nadpis první úrovně. Stará specifikace HTML neumožňovala 2 nadpisy první úrovně na jedné stránce. HTML s tím od verze 5 nemá problém, pokud jsou nadpisy vloženy v headeru. I logicky je to lepší, jelikož nadpis má jak webová stránka, tak článek v ní zobrazený.
<div id="logo"><h1>HoBi</h1></div>
Aby nadpis vypadal dobře, snížíme mu horní vnější okraj, což ho posune nahoru. Posuneme ho i kousek doprava:
#logo h1 { margin: 14px 0px 0px 10px; }
Naše snažení by mělo dopadnout nějak takto:

Navigační menu
Zbývá nastylovat navigační menu. Nejprve seznamu v navigaci vypneme
odrážky, dělá se to CSS vlastností list-style-type
, k výběru
máme následující hodnoty:
- circle - Kruhové
- decimal - Číslované
- decimal-leading-zero - Číslované na 2 místa (před čísla menší než 10 přidá nulu)
- disc (výchozí) - Vyplněný kruh
- lower-alpha - Malá písmena latinské abecedy
- lower-greek - Malá písmena řecké abecedy
- lower-latin - Malá písmena latinské abecedy
- lower-roman - Římské číslice malými písmeny
- none - Bez odrážek
- square - Čtvercové
- upper-alpha - Velká písmena latinské abecedy
- upper-greek - Velká písmena řecké abecedy
- upper-latin - Velká písmena latinské abecedy
- upper-roman - Řecké číslice velkými písmeny
- inherit - Zdědí typ odrážek od rodičovského elementu.
Jak různé typy vypadají máte jako vždy ukázáno v českém
CSS 3 manuálu. Nás bude nyní zajímat hodnota none
, která
odrážky vypne.
Nastavme tedy tento styl danému seznamu a zároveň mu vypněme vnější okraje (tím zmizí volné místo nahoře):
nav ul { margin: 0px; list-style-type: none; }
Zbývá nějak domluvit položkám seznamu, aby se řadily vedle sebe a
vypadaly lépe. Asi tušíte, že řazení docílíme pomocí vlastnosti
float
s hodnotou left
. Dále to bude jen o
nastavování okrajů, fontu a barvy.
nav ul li { float: left; padding: 0px 25px; margin: 0 5px; font-size: 17px; height: 73px; line-height: 4.3em; }
Nová je pro nás jen poslední vlastnost line-height
.
Vzpomínáte si, jak jsme si říkali, že centrování je v CSS řešeno
poněkud nešťastně? Line-height
nastaví výšku řádku a lze
pomocí ní centrovat text svisle v nějakém elementu. V našem případě
budou popisky tlačítek ve středu.
Odkazy nebudeme chtít modré, ale bílé. Obarvit je není nic těžkého, jak vypnout podtržení již také víme:
nav a { color: white; text-decoration: none; }
Zbývá ostylovat aktivní položku a položku, na kterou najedeme myší.
Styl budou mít stejný, v selectoru využijeme parametru
:hover
:
nav ul li:hover, .aktivni { background: #ffbb00; box-shadow: 0px 0px 5px black; }
Výsledek vypadá takto:

Jako vždy je projekt ke stažení v příloze.
V následujícím cvičení, Řešené úlohy k 12.-13. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.
Stáhnout
Staženo 5471x (85.81 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
Komentáře


Zobrazeno 10 zpráv z 196. Zobrazit vše