V minulej lekcii, Navigačné menu, pätička a HTML entity , sme si pripravili HTML kód hlavičky a pätičky. Dnes sa v HTML / CSS tutoriálu budeme venovať štýlovanie hlavičky.

Pozadia

Hlavička a pätička budú mať rovnaké pozadie. Opäť sa jedná o obrázok so šumom, ktorý sme si vygenerovali na http://www.noisetexturegenerator.com/. Môj obrázok vyzerá takto:

Pozadie nebudeme nastavovať ani hlavičke, ani pätičke, ale rovno celému body. Dôvodom je, aby bol pozadím u pätičky vždy vyplnený celý zvyšný priestor stránky (teda aj za pätičkou, keď je obsah príliš krátky a klient má vysoké rozlíšenie). Ak by sme to tak neurobili, mohlo by na veľkých monitoroch zostať pod pätičkou biele miesto.

Pozadie teda zapíšeme do Selector body, kde už máme nastavenia písma. Okrem obrázku určíme aj farbu, prečo sme si už vysvetľovali. Body nastavíme ešte vonkajší okraj (margin) na 0, tým zmizne nevzhľadný tenký okraj okolo celej stránky. Ako posledný nastavíme celému telu stránky minimálnu šírku 960px. Iste si pamätáte, že práve 960px je odporúčaná šírka pre webové stránky (ak nepočítame responzívne verziu, ale o tom až neskôr). Stránka sa vďaka špecifikovanej minimálnej šírke nerozsype, keď zmenšíme okno prehliadača, ale iba sa zobrazí posuvníky.

Štýl body by teraz mal vyzerať asi takto:

body {
    background: url('obrazky/pozadi_sede.png') #1c2228;
    margin: 0px;
    font: 14px Verdana;
    min-width: 960px;
}

výsledok:

Hlavička

Pusťme sa do štýlovanie hlavičky. Najprv hlavičke nastavme výšku na 73px. Výšku nastavíme proste header, aplikuje sa aj na header v článku, ale to nás v tomto prípade netrápi:

header {
    height: 73px;
}

Logo

Logo sme vložili do HTML ako div, čo je pre zopakovanie element určený iba ku štýlovanie a nemajúci žiadny ďalší význam. V CSS vložíme do loga obrázok tak, že ho umiestnime na pozadí a vypneme opakovanie. Je to alternatíva k vloženie loga cez obrázok pomocou HTML tagu img. Výhodou je, že sa s obrázkom lepšie pracuje a lepšie sa pozicuje, keď je na pozadí. Do obsahu článku sa tento prístup príliš nehodí, v rozvrhnutie je naopak užitočný.

Ako obrázok loga som použil tento:

Môžete si ho stiahnuť alebo použiť svoj. Veľkosť je 64x64 pixelov. Ponúka sa aj použitie nejaké pekné ikony, kde ich hľadať už viete. Ostylujme si div s id "logo". ID selektor funguje úplne rovnako, ako selektor triedny, len nezačína na bodku, ale na mriežku:

#logo {
    background: url('obrazky/logo.png') no-repeat;
    width: 250px;
    height: 60px;
    float: left;
    margin: 7px 0px 0px 20px;
}

Nastavenie pozadia by malo byť jasné. Hodnotou no-repeat určujeme, že sa nemá obrázok opakovať (dláždiť vedľa seba, ako napr. Pozadie stránky).

Ďalej tu máme nastavenia šírky a výšky divu s logom a textom.

Float určí element ako "plávajúca", čo je potrebné na to, aby mohlo byť logo vedľa navigácie. Neplovoucí blokové elementy sa radí pod seba, všimnite si, že doteraz bolo logo nad navigáciou.

Marginom určíme vonkajší okraj, hodnoty sú udávané v poradí hornej, pravý, dolný, ľavý. Posúvame ho teda kúsok dolu a doprava.

. Je totiž vhodné, aby bol nápis v logu označený ako nadpis prvej úrovne. Stará špecifikácia HTML neumožňovala 2 nadpisy prvej úrovne na jednej stránke. HTML s tým od verzie 5 nemá problém, ak sú nadpisy vložené v header. Aj logicky je to lepšie, lebo nadpis má ako webová stránka, tak článok v nej zobrazený.<div id="logo"><h1>HoBi</h1></div>Aby nadpis vyzeral dobre, znížime mu horný vonkajší okraj, čo ho posunie nahor. Posunieme ho aj kúsok doprava:#logo h1 { margin: 14px 0px 0px 10px; }Naše snaženie by malo dopadnúť nejako takto:Navigačné menuZostáva nastylovať navigačné menu. Najprv zoznamu v navigácii vypneme zarážky, robí sa to CSS vlastností list-style-type, k výberu máme nasledujúce hodnoty:circle - Kruhovédecimal - Číslovanédecimal-leading-zero - Číslované na 2 miesta (pred čísla menšie ako 10 pridá nulu)disc (predvolené) - Vyplnený kruhlower-alpha - Malé písmená latinskej abecedylower-greek - Malé písmená gréckej abecedylower-latin - Malé písmená latinskej abecedylower-roman - Rímske číslice malými písmenaminone - Bez odrážoksquare - Štvorcovéupper-alpha - Veľké písmená latinskej abecedyupper-greek - Veľké písmená gréckej abecedyupper-latin - Veľké písmená latinskej abecedyupper-roman - Grécke číslice veľkými písmenamiinherit - Zdedí typ odrážok od rodičovského elementu.Ako rôzne typy vyzerajú máte ako vždy ukázané v českom CSS 3 manuálu. Nás bude teraz zaujímať hodnota none, ktorá odrážky vypne.Nastavme teda tento štýl danému zoznamu a zároveň mu vypnime vonkajšie okraje (tým zmizne voľné miesto hore):nav ul { margin: 0px; list-style-type: none; }Zostáva nejako dohovoriť položkám zoznamu, aby sa radili vedľa seba a vyzerali lepšie. Asi tušíte, že radenie docielime pomocou vlastnosti float s hodnotou left. Ďalej to bude len o nastavovaní okrajov, fontu a farby.nav ul li { float: left; padding: 0px 25px; margin: 0 5px; font-size: 17px; height: 73px; line-height: 4.3em; }Nová je pre nás len posledný vlastnosť line-height. Spomínate si, ako sme si hovorili, že centrovanie je v CSS riešené trochu nešťastne? Line-height nastaví výšku riadka a možno pomocou nej centrovať text zvisle v nejakom elementu. V našom prípade budú menovkami tlačidiel v stredu.Odkazy nebudeme chcieť modré, ale biele. Zafarbiť ich nie je nič ťažké, ako vypnúť podčiarknutie už tiež vieme:nav a { color: white; text-decoration: none; }Zostáva ostylovat aktívny položku a položku, na ktorú prejdeme myšou. Štýl budú mať rovnaký, v Selector využijeme parametra: hover:nav ul li:hover, .aktivni { background: #ffbb00; box-shadow: 0px 0px 5px black; }Výsledok vyzerá takto:Ako vždy je k stiahnutiu v prílohe. V budúcej lekcii, Riešené úlohy k 12.-13. lekciu HTML a CSS , šablónu dokončíme

V nasledujúcom cvičení, Riešené úlohy k 12.-13. lekciu HTML a CSS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.