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

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é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 3588x (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 (28 hlasů) :
4.892854.892854.892854.892854.89285


 


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 (118)

Avatar
IT Man
Redaktor
Avatar
IT Man:

Pojistka se zobrazí, když obrázek nefunguje. Ten se ti ale v pohodě načte. Funguje to teda jak má, co potřebuješ?

Odpovědět 3. ledna 6:31
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
hankablack
Člen
Avatar
hankablack:

Právě že nefunguje. Když nedám pojistku, tak se nezobrazí ten barevný obrázek se šumem, ale nereaguje to. Ale stáhla jsem novou verzi prohlížeče a v něm se mi bez pojistky zobrazí jen šum na bílém pozadí. Takže je tedy problém prohlížeč a kód mám dobře. Díky za pomoc.

 
Odpovědět 3. ledna 19:46
Avatar
Ondřej Rejmont:

Stalo se mi to, že když jsem tam chtěl vložit tu šedou barvu do té hlavičky a patičky, taky se mi to celé obarvilo na šedou a zmizela mi modrá (v mém případě zelená) barva pozadí. Poté, co jsem si stáhl šablonu, tak jsem si všimnul toho, že je to pozadí napsáno v article {
background: url('obrazky/po­zadi.png') #48FF00;
}
Já to měl ale v "body". Chci se zeptat, jestli je to tím a proč tomu tak bylo. Předem děkuji za odpověď.

 
Odpovědět 12. ledna 19:31
Avatar
Odpovídá na Ondřej Rejmont
Daniel Miarka:

zkus poslat zdroják, moc jsme tě nepochopil.

 
Odpovědět 4. února 10:37
Avatar
Lazar Slavković-Raco:

Zdravim me z nejakeho duvodu nefunguje pozadi jak je udelane v tomhle navodu.
Zdrojak zde:

body{
    margin: 0;
    padding: 0;

    background: url('Pictures/pozadi.png');
}

h1{
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 3px #0a294b;
}

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

article section{
    width:666px;
    padding: 20px;
    float: left;
    background: white;
    border: 2px dotted black;
    border-radius: 10px;
    box-shadow: 2px 2px 7px #1c2228;
}

.cistic{
    clear: both;
}

.vlevo{
    float: left;
}

p{
    font-family: "Arial Narrow";
    font-size: 1.2em;
    font-weight: normal;
}

footer{
    text-shadow: 2px 2px 3px white;
    color: black;
    font-family: "Arial Narrow";
    font-weight: normal;
}

.fx1{
    background: url("Pictures/pozadi2.png");
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styl.css" type="text/css">
        <title>Porfolio</title>
    </head>

    <body>
    <header>
        <div id="logo">Hobi</div>
        <nav>
            <ul class="fx1">
                <li class="aktivni"><a href="#">Domu</a></li>
                <li><a href="#">O mne</a></li>
                <li><a href="#">Dovednosti</a></li>
                <li><a href="#">Reference</a></li>
                <li><a href="#">Kontakt</a></li>

            </ul>
        </nav>

    </header>
        <article>
            <div>
            <header>
                <h1>About me</h1>
            </header>
            </div>
            <section>
                <p>Welcome on my first page XD</p>
                <p class="centrovany"><img src="Pictures/avatar.png" alt="Programator Boby" class="vlevo" style="border-radius: 500px"/>
                    Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT </p>
                <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                <div class="cistic"></div>
                <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
            </section>
           <div class="cistic"></div>
        </article>
    </body>
<footer class="fx1">
    Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>
</footer>
</html>
 
Odpovědět 9. března 15:10
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na Lazar Slavković-Raco
Matúš Petrofčík:

Ahoj, napadá ma že máš zlú cestu k obrázkom. Cesty by si mal písať relatívne k css súboru. Tzn. že ak máš napr. takúto štruktúru:

projekt/css/style.css
projekt/img/pozadi.png
projekt/index.html

tak v tom css súbore musí byť cesta k pozadu takáto: background: url('../img/po­zadi.png');
Predpokladám že práve toto je tá tvoja chybka.

Odpovědět 9. března 17:32
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Matúš Petrofčík
Lazar Slavković-Raco:

Takze musim myt zvlast slozku tyhle obrazky na hl.background a na background?

 
Odpovědět 10. března 4:37
Avatar
Odpovídá na Matúš Petrofčík
Lazar Slavković-Raco:

Uz jsem zjistil za chybu. Dal jsem spatne background do spatnyho elementu, ale nastal dalsi problem. Me nejak te article posunul vlevo a ten zahlavi articlu sel doprava.
Zdrojak zde:

body{
    font-family: Verdana;
    font-size: 14px;
    text-shadow: #0a294b;
    background: url("Pictures/pozadi2.png");
}
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: white;
    font-family: "Arial Narrow";
}
.centrovany{
    text-align: center;
}
article{
    background: url("Pictures/pozadi.png");
    box-shadow: 2px 2px 7px #1c2228;

}
h1 {
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 710px;
    float: left;
    background: white;
    border: 2px dashed #4b79ff;
    border-radius: 10px;
}
.cistic {
    clear: both;
}
.vlevo{
    float: left;
}
section{
    padding: 20px;
    width: 666px;
}
#logo{
    background: url("Pictures/logo.png") no-repeat;
    width:250px;
    height:60px;
    float:left;
    margin: 7px 0px 0px 20px;
}
#logo h1{
    margin: 14px 0px 0px 10px;
}
nav ul{
    margin: 0px;
    list-style-type: none;
}
nav ul li{
    float: left;
    margin: 0px;
    font-size:17px;
    height: 73px;
    padding: 0px 25px;
}
nav ul li a{
        padding: 0px 25px;
}
nav a{
    color: white;
    text-decoration: none;
}
nav ul li:hover, .aktivni{
        background: #7bff95;
    box-shadow: 0px 0px 5px black;
}
 
Odpovědět 10. března 9:18
Avatar
Patrik Svoboda:

Ahoj, když přidám logo tak se mi nadpis "o mně" posune až za logo a dá se do dvou řádků. Nevím čím by to mohlo být způsobeno.
Díky za radu 

<!doctype html>
<html lang="cs-cz">

<head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="styl.css" type="text/css" />
     <title> patrikovo porfolio </title>
     <header>

           <nav>
            <div id="logo"><h1>Psvoboda8</h1></div>
             <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="#">Kontakt</a></li>
              </ul>
           </nav>



     </header>
</head>
   <body>
    <article>
    <header class="vlevo">
     <h1 class="vlevo">O mně</h1>
    </header>
          <section>
                <p class="centrovany">
                Vítej na mém prvním webu</p>

                <p>Jmenuju se <u>Patrik Svoboda</u> je mi 14 let.a žiju v ostravě</p>
                <p><img src="obrazky/krajina.png" alt="obrazek krajiny" width="25%" /></p>
                <p>venku je <strong>tepolo</strong></p>

          </section>
           <div class="cistic"></div>
          </article>

      <footer class="centrovany">
                  Vytvořil &copy;Psvoboda8 pro test
           </footer>
     </body>
</html>
Editováno 24. března 20:26
 
Odpovědět 24. března 20:24
Avatar
 
Odpovědět 24. března 20:47
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 128. Zobrazit vše