13. díl - Stylování hlavičky HTML stránky

HTML a CSS Statický web Stylování hlavičky HTML stránky American English version English version

V minulém dílu našeho seriálu tutoriálů o tvorbě webu v HTML a CSS jsme si připravili HTML kód hlavičky a patičky. Dnes se 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ý.

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 ke stažení v příloze. Příště šablonu dokončíme :)


 

Stáhnout

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

 

  Aktivity (2)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (25 hlasů) :
4.879994.879994.879994.879994.87999


 


Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 12.-13. lekci HTML a CSS

 

 

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

Avatar
adder
Člen
Avatar
adder:

No stím už se dá pracovat lépe. Jasně. :) Nejde ti to, protože ten obsah, ve kterém to je, nemá nastavený background. Takže article, nebo to celý obal do nějakého div a nastav tomu barvu.

A ten

<div class="clear"></div>

tam je velice důležitý, jelikož když floatuje (tzv. poživáš float: left, right;), tak se rodivčovskému se vynuluje výška. To se nesmí stát, jelikož to narušuje layout, takže bezprostředně za elementama, které mají atribut float, přidáš asi nejhorší, ale dostačujicí řešení clear. Sám mám taky trochu meze v znalostech, proč to tak vůbec je. :)

A jen pro příště, ukončuj každou specifikaci ve stylech středníkem a nenechávej prázdné vlasnosti a ještě k tomu bez středníku viz.

background:

Snad by mě stačit tohle řešení: https://jsfiddle.net/svakaLw4/1/

Odpovědět 7. ledna 19:30
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na adder
Tomáš123:

Hodnoty výšky nie sú vlastnosťou float priamo ovplyvnené. Dochádza k tomu iba následkom vyňatia floatovaného prvku z toku dokumentu. Teda po floatovaní bez explicitnej zmeny ostane u rodičovského prvku height: auto, nie height: 0.

Prázdny prvok by som nenazýval najhorším, ale najmenej elegantným riešením. Sčasti prekračuje stanovenú hranicu medzi HTML a CSS. Hoci by ostatné riešenia (teraz mi napadá iba zmena hodnoty overflowu a clearfix cez :after) vo väčšine prípadov nerobili problémy, prázdny prvok považujem za najspoľahlivejší. Nepamätám si presne, v čom malo riešenie s overflowom nedostatky, ale zdá sa mi, že to malo čosi so staršími Explorermi. Určite na to bol nejaký hack.

Odpovědět 8. ledna 13:09
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
adder
Člen
Avatar
Odpovídá na Tomáš123
adder:

Děkuji za objasnění. Ano, máš pravdu, nejméně elegantní. Jen pro info používám tenhle clerfix - http://nicolasgallagher.com/…earfix-hack/.

Měj se, ještě jednou děkuji. ;)

Odpovědět  +1 8. ledna 14:38
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
lx
Člen
Avatar
lx:

Jak udělat aby fungoval jako odkaz celý obdélník (v menu) a nemusel jsem se trefovat přímo na ten text? Díky :D

 
Odpovědět 22. ledna 23:02
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na lx
Tonda Kozák:

Nastav odkazu display: block (nebo inline-block) a rozměry podle rodiče (toho celého obdélníku).

 
Odpovědět 23. ledna 18:31
Avatar
Patrik Bednář:

Můžu mít dotaz? Proč je na obrázku v návodu v layoutu navigace jako je Domů,Kontakt,Re­ference apod. podbarvené modře? Já to třeba nemám.. Mám pouze Domů..

 
Odpovědět 17. dubna 16:30
Avatar
Odpovídá na Patrik Bednář
Filip Oborník (Oboras):

Nevím, jestli tě chápu dobře, ale pokud myslíš ten modrý text v navigaci (první obrázek), tak ten se takto zbarví, pokud je to odkaz. Nemáš náhodou jako odkaz nastaveno jen to Domů?

Odpovědět 17. dubna 18:16
"Good judgment comes from experience, and a lot of that comes from bad judgment." Will Rogers
Avatar
Odpovídá na Patrik Bednář
Filip Oborník (Oboras):

Ono můžeš odkazovat i na jednotlivé elementy, které mají ID. A s tim souvisí ten #. Použití je stejné jako v CSS. Tak když styluješ nějaký element s ID, tak taky použiješ #ID. Tady je to ale proto, aby ti to text zvýraznilo, jako že je to odkaz, i když to nikam nevede.

Odpovědět 19. dubna 10:40
"Good judgment comes from experience, and a lot of that comes from bad judgment." Will Rogers
Avatar
František Peřina:

Ahoj všem,

rád bych se zeptat jak dosáhnu toho,abych vytvořil navigační menu v artiklu v sekci header? Tj. rád bych si přidal odkazy pěkně pod sebou v té modré části "O mě", ale zároveň bych chtěl nechat i ty odkazy jak jsou zde uvedené. Jediné co mě napadlo je použití tagu <aside>...

Díky

 
Odpovědět 7. května 16:32
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 106. Zobrazit vše