Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
BF summer

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:

Textura šumu na pozadí

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:

Pozadí body v HTML a CSS

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ý.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Jako obrázek loga jsem použil tento:

Logo

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:

Logo stránky v HTML a CSS

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:

Navigační menu v HTML a CSS

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í.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 5654x (85.81 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Navigační menu, patička a HTML entity
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
63 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (6)

 

 

Komentáře
Zobrazit starší komentáře (188)

Avatar
Jiří Vrána:21.9.2020 12:56

Zaprvé máš obráceně lomítka, tím bych začal.

Pokud to nepomůže, zkusil bych toto : "background: url(../slozka­blabla/logo.png)

 
Odpovědět
21.9.2020 12:56
Avatar
Odpovídá na Jiří Vrána
Ondrej Zadrapa:21.9.2020 12:58

Obrátil jsem lomítka i lomítka, zkusil bez uvozovek, nešlo, ale kdo ví, třeba byl editor unavený, zkusím to ještě dnes, třeba to půjde.

 
Odpovědět
21.9.2020 12:58
Avatar
Odpovídá na Ondrej Zadrapa
Michal Stisek:30.9.2020 16:56

Jiřímu jen chyběly jednoduché uvozovky v cestě k obrázku, jinak je to správný příklad.

background: url('../slozkablabla/logo.png');

-- pokud máš .html v kořenovém adresáři webu .css ve složce /styly a obrázky ve složce /img (např.)

background: url('slozkablabla/logo.png');

-- pokud máš .html i .css v kořenovém adresáři a obrázky ve složce /img (např.)

Odpovědět
30.9.2020 16:56
Jít pořád dál má smysl
Avatar
Pavel Kubalík:31.10.2020 15:38

Dobrý den
Dneska jsem dokončil velkou anabázi, neboť mi to neustále nešlo tak, jak bych si to představoval. Tak jsem si vzpomněl na památná slova krále Jana Lucemburského: "Toho bohdá nebude, aby český král z boje utíkal". Nejsem sice král, ale nejedná se taky o bitvu u Kresčaku. Takže jsem řekl "Nevzdám to" a vrátil jsem se do lekce 10.
Zjistil jsem, že do article header musím dát with:220px a nikoliv 250px. Pak jsem dostal modrý proužek i na pravé straně. Vrátit 250px jsem mohl až potom, co se vložilo do body min-width: 960px
To je první poučení.
Další poučení je v tom, že když to nevychází, je nutné se vrátit k nějakému pevnému bodu. Nejlépe stáhnout kód z lekce, kde bylo vše v pořádku.
Editor žádné chyby nehlásí, a při trochu nepozornosti se chyba vloudí (prohlížeč si to vysvětlí po svém). Hledání chyby trvá déle než začít od někud znova.
To je poučení s dosavadních zkušeností a mohu jít na příklady.
Díky PK

 
Odpovědět
31.10.2020 15:38
Avatar
Odpovídá na Pavel Kubalík
Tomáš Maňhal:31.10.2020 18:04

V tom je HTML a CSS trochu nevděčný. Na rozdíl od IDE pro programování ti editor prostě nevyhodí chybu když máš někde špatně rozměry a odsazení. Prostě neví, že to je chyba a neví jestli to není úmysl. Držím palce a pevné nervy do budoucna :-)

 
Odpovědět
31.10.2020 18:04
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Tomáš Maňhal
Pavel Kubalík:31.10.2020 18:19

Ahoj
a děkuju ti
Pavel K

 
Odpovědět
31.10.2020 18:19
Avatar
Dominik Váňa:20.12.2020 17:05

Osobně jsem se zasekl nad line-height. Hodnota 4.3em mě zbytečně zmátla, ale možná jde jen o osobní pohled na věc. Stále jsem tu dával 73-17=56/2=28 px a divil se, že to nejde než jsem si všiml, že jde o přepočet 73/17.

Zkrátka vytvoří se tím výška řádku a do jejího středu to text umístí. Stále jsem čekal na nějakou další hodnotu co určí ten center.

 
Odpovědět
20.12.2020 17:05
Avatar
Jaroslav Parma:18. ledna 11:22

Zdravím, mám dotaz ohledně nastavení položek v seznamu. Co když místo Float použiju Displey s hodnotou inline-block. Položky v seznamu se zobrazí bez zalomení řádku, hezky vedle sebe, ale pořád jim půjdou nastavit rozměry jako blokovým prvkům.

 
Odpovědět
18. ledna 11:22
Avatar
Lukáš Beran:13. března 14:59

Ahoj, chtěl jsem se zeptat, navigační menu mi stále zůstává vlevo ve sloupku, nezobrazuje se v řádku, tak jak by mělo. Kontroloval jsem vše i podle přiloženého kódu ze zipu a vše by mělo být v cajku, nevím v čem může být chyba, poradíte? Díky.

 
Odpovědět
13. března 14:59
Avatar
Odpovídá na Dominik Váňa
Dušan Kovářík:21. května 9:33

Ahoj - díky za tvůj komentář. Úplně jsem se ztrácel v té kombinaci font-size: 17px, height:: 73px a line-height: 4.3em. Díky tobě jsem to pochopil!

 
Odpovědět
21. května 9:33
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

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