Lekce 13 - Stylování hlavičky HTML stránky

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

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

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. V příští lekci, Fixní menu a pozicování v CSS, šablonu dokončíme :)


 

Stáhnout

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

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
44 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
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
Aktivity (3)

 

 

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

Avatar
IT Man
Redaktor
Avatar
IT Man:16.12.2017 18:05

Zřejmě jsou u tohohle dílu špatný soubory. Podívej se na další díly a tam najdeš už hotové a funkční webovky. :)
David Čápka: měl bys zkontrolovat soubory u tohoto článku - na screenu a v web.zip jsou jiné webovky.

Odpovědět 16.12.2017 18:05
Cokoliv a kdokoliv může jednou uspět.
Avatar
Peter Butora
Člen
Avatar
Peter Butora:13. února 17:50

**Čau pod textem **

Zbývá nějak domluvit položkám seznamu, aby se řadily vedle sebe a vypadaly lépe.........

Je kod kde chybí u margin za nulou px já jsem se pak divil že to ukazovalo jinak než vzor :)

nav ul li {
        float: left;
        padding: 0px 25px;
        margin: 0 5px;
        font-size: 17px;
        height: 73px;
        line-height: 4.3em;
}
Odpovědět 13. února 17:50
Péťa
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Peter Butora
IT Man:13. února 18:20

Za nulou se jednotky psát nemusí, zřejmě jsi měl pouze zacachovaný prohlížeč a při reloadu sis to promazal. Protože přeci 0px je stejně dlouhý jako 0km. :D
Máš to i ve specifikaci:

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

Odpovědět  +1 13. února 18:20
Cokoliv a kdokoliv může jednou uspět.
Avatar
Bite Rook
Člen
Avatar
Bite Rook:18. února 21:13

Zdravím. Mám problém s logem. koukám do toho už docela dlouho a nemohu přijít na to, proč se mi nechce vykreslit logo. nevíte někdo, co jsem zadal špatně? jsem úplný začátečník

<!DOCTYPE html>
<html lang="cs-cz">
<head>
      <meta charset="utf-8" />
      <title> první vlastní web stránka </title>
      <link rel="stylesheet" href="C:/BiteRook/webstranka/webfirst/css-style.css" type="text/css" />
</head>

<body>

<header>

<div id="logo"></div>

<nav>
      <ul>
            <li class="aktivni"><a href="#">Domů</a></li>
                <li><a href="#">O mně</a></li>
                <li><a href="#">Dovednosti</a></li>
                <li><a href="#">Reference</a></li>
                <li><a href="#">Kontakt</a></li>
      </ul>
</nav>

</header>


<article>

<header>

<H1> O mně </h1>

</header>

<section>

<h1> název článku </h1>

<P> vítejte na mojí první stránce </p>


<img src="C:/BiteRook/webstranka/webfirst/images/logo.jpeg" alt="logo RavenGame" class="vlevo" />


<p> tak zkusíme tohle nnnnnnnnnnnn nnnnnnnnnnněěěěě ěěěěěěěěěěěě ěěěěěěěěěějjjjj jjjjjjjjjjjjjjjj aaaaaaaaaaaaa <br>
kkkkkkkkkkkk kkkkkkkkkkkkkk ýýýýýýýýýýýýýý ýýýýýýýýý oo oooooooooo oppppppppppp pppppp pppppp <br>
rrrrrrr rrrrrrrrrrrr rrrrraaaaa aaaaaaaaaaaaaa aaaaaavvvvvvvvvvvv vvvvvvvv vvvvvvvdd dddddddddddd <br>
uuuuu uuuuu  dddddddddd ddddddddddddlll lllllllllllllllllllll lllllllllllllll llllllllllllllll <br>
oooooo oooooooouuu uuuuuhý teeeeeeeeee eeeeeeeeeee eexxxxxxxxxx xxxxxxxxxxt tttttttt ttttttttttt </p>

<div class="cleaner"></div>

<p> a nějaký dodatkový text </p>

</section>
<div class="cleaner"></div>

 </article>

<footer>
Vytvořil &copy;Bite 2018
</footer>

</body>

</html>
h1 {
    text-align: center;
    color: #0000FF;  /* modrá barva, vždy zapisovat v šestnáctkové soustavě */
    }

.centrovany {
            text-align: center;
            }

article {
        background: url('C:/BiteRook/webstranka/webfirst/images/noisytexture.jpeg') #C80D0D;
        }

article header {
                width: 250px;
                float: left;
                }

article section {
                 width: 710px;   /* šířka */
                 float: left;   /* plovoucí obsah řazený z leva */
                 background: green;   /* pozadí */
                 border: 5px solid #000000;  /* tloušťka, typ a barva rámečku */
                 border-radius: 30px;   /* zakulacení rámečku */
                 padding: 20px;   /* odsazení obsahu textu od rámečku */
}

.cleaner {
          clear: both;
          }

.vlevo {
        float: left;
        }

body {
      background: url('C:/BiteRook/webstranka/webfirst/images/noisytexture2.jpeg');
      margin: 0px;  /* kolem stránky se udělá tenký rámeček. tímto ho vypneme */
      min-width:960px;
      }

header {
        height: 90px;
        }

#logo {
        background: url('C:/BiteRook/webstranka/webfirst/images/logoa.jpeg') no-repeat;
        width 60px;
        height: 60px;
        float: left;
        margin: 5px 5px 5px 5px;
        }
 
Odpovědět 18. února 21:13
Avatar
Odpovídá na Bite Rook
Štěpán Halíř:18. února 23:47

Ahoj,
nejprve ti chci poradit – odsazuj si ty prvky v tom kódu (rodičovskej bude více vlevo), abys to měl přehledné. Zkus smazat ty mezery. Vím, že teď to třeba vypadá jako detail, ale je lepší se naučit psát přehledně do budoucna, aby ses v tom lépe orientovat. Pak to někomu ukážeš a on na to vyvalí oči.

C:/BiteRook/webstranka/webfirst/css-style.css

Používáš absolutní zápis cesty k tvému souboru. Až tu složku, ve které máš dokumenty webu nahrané, přemístíš, tak zjistíš, že se ti to najednou vše rozsype jen proto, že to máš takhle zapsané. Používej relativní zápis, jako to je použito v kurzu, tj. že se odkazuješ na soubor z určitého místa (souboru). Když to tak budeš mít, můžeš si složku s webem libovolně přesouvat z jednoho disku na druhý, vkládat do jiné složky apod.

K tvému problému.
Zkus doplnit chybějící : za width v #logo. Posílám kód, kde je doplněná.

#logo {
        background: url('C:/BiteRook/webstranka/webfirst/images/logoa.jpeg') no-repeat;
        width: 60px;
        height: 60px;
        float: left;
        margin: 5px 5px 5px 5px;
        }

Kdyby to nepomohlo, zkontroluj, jestli ti sedí cesta k tomu obrázku, popř. jeho název a koncovka.
:-)

Odpovědět 18. února 23:47
Per aspera ad astras
Avatar
Bite Rook
Člen
Avatar
Odpovídá na Štěpán Halíř
Bite Rook:18. února 23:55

No teda... moc děkuji. Tolik jsem se soustředil, jestli mi opět nechybí někde středník nebo uvozovka (již se mi dnes taky stalo), že jsem si dvojteček vůbec nevšímal a tudiž ji přehlédnul. S doplněnou dvojtečkou už vše funguje, jak má. Také děkuji za rady ohledně uvedené cesty k obrázku. Myslel jsem, že je naopak vhodné psát konkrétnější cestu. S tím odsazováním prvků, jen pro jistotu, předpokládám myslíš tak, jak to mám např. v oblasti HTML mezi <nav> </nav>.

 
Odpovědět 18. února 23:55
Avatar
Odpovídá na Bite Rook
Štěpán Halíř:19. února 0:10

To jsem rád, že ti to už funguje.
Vem si to takhle. Když změníš umístění složky, ve které máš dokumenty toho webu nyní, nepůjde ti nic. Vše, kde máš nastavené cesty k nějakým stylům, obrázkům atd. už nebude aktuální. Musel bys všechny odkazy přepsat na tu aktuální cestu. Nutno dodat, že pokud bys to nahrál na internet a chtěl se tím někomu pochlubit, žádný disk C to nenajde.
Když bys to udělal tak, jako to je v tutoriálu, tak ti to říká, že obrázek na pozadí je ve složce obrazky (odkazuješ se z styl dokumentu) a i kdybys tu hlavní složku, ve které máš vše, přesunul, stále tahle cesta bude platit.

background: url('obrazky/logo.png') no-repeat;

Když tak mrkni na internet na absolutní a relativní cesty.

S tím odsazováním prvků. Je to spíše taková rada. Stejně se to pak přelouská stejně, ale minimálně pro orientaci v rozvržení toho kódu je to lepší. V tvojí ukázce jsou všechny prvky (ať je to header, div, body, html...) stejně odsazené, tj. úplně nalevo. Zkus to trošku odsazovat podle toho, jak se to člení.

<article>

<header>

<H1> O mně </h1>

</header>

<section>

<h1> název článku </h1>

<P> vítejte na mojí první stránce </p>


<img src="C:/BiteRook/webstranka/webfirst/images/logo.jpeg" alt="logo RavenGame" class="vlevo" />


<p> tak zkusíme tohle nnnnnnnnnnnn nnnnnnnnnnněěěěě ěěěěěěěěěěěě ěěěěěěěěěějjjjj jjjjjjjjjjjjjjjj aaaaaaaaaaaaa <br>
kkkkkkkkkkkk kkkkkkkkkkkkkk ýýýýýýýýýýýýýý ýýýýýýýýý oo oooooooooo oppppppppppp pppppp pppppp <br>
rrrrrrr rrrrrrrrrrrr rrrrraaaaa aaaaaaaaaaaaaa aaaaaavvvvvvvvvvvv vvvvvvvv vvvvvvvdd dddddddddddd <br>
uuuuu uuuuu  dddddddddd ddddddddddddlll lllllllllllllllllllll lllllllllllllll llllllllllllllll <br>
oooooo oooooooouuu uuuuuhý teeeeeeeeee eeeeeeeeeee eexxxxxxxxxx xxxxxxxxxxt tttttttt ttttttttttt </p>

<div class="cleaner"></div>

<p> a nějaký dodatkový text </p>

</section>
<div class="cleaner"></div>

 </article>

S odsazením:

<article>
        <header>
                <h1> O mně </h1>
        </header>
        <section>
                <h1> název článku </h1>
                <P> vítejte na mojí první stránce </p>
                <img src="C:/BiteRook/webstranka/webfirst/images/logo.jpeg" alt="logo RavenGame" class="vlevo" />
                <p> tak zkusíme tohle nnnnnnnnnnnn nnnnnnnnnnněěěěě ěěěěěěěěěěěě ěěěěěěěěěějjjjj jjjjjjjjjjjjjjjj                                                   aaaaaaaaaaaaa <br>
                kkkkkkkkkkkk kkkkkkkkkkkkkk ýýýýýýýýýýýýýý ýýýýýýýýý oo oooooooooo oppppppppppp pppppp           pppppp <br>
                rrrrrrr rrrrrrrrrrrr rrrrraaaaa aaaaaaaaaaaaaa aaaaaavvvvvvvvvvvv vvvvvvvv vvvvvvvdd dddddddddddd <br>
                uuuuu uuuuu  dddddddddd ddddddddddddlll lllllllllllllllllllll lllllllllllllll llllllllllllllll <br>
                oooooo oooooooouuu uuuuuhý teeeeeeeeee eeeeeeeeeee eexxxxxxxxxx xxxxxxxxxxt tttttttt ttttttttttt
                </p>
                <div class="cleaner"></div>
                <p> a nějaký dodatkový text </p>
        </section>
        <div class="cleaner"></div>
</article>

Hodně štěstí :)

Odpovědět 19. února 0:10
Per aspera ad astras
Avatar
Kamil Maděra:24. února 16:08

Mám problém s vložením loga, jak ho můžu vložit z nějaké webové stránky?

 
Odpovědět 24. února 16:08
Avatar
Jaroslav Patrný:28. července 18:26

Ahoj, pokud tvúj dotaz trvá, nastav třídu (např. "aktivni") jednotlivým položkám menu vždy u vybrané podstránky. "Aktivní" třídy jsem využil i u dynamického webu s využitím PHP.

 
Odpovědět 28. července 18:26
Avatar
Jaroslav Patrný:28. července 19:33

Ještě k předešlé odpovědi: A samozřejmě tu třídu ostyluj.

 
Odpovědět 28. července 19: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 147. Zobrazit vše