Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

14. díl - Fixní menu a pozicování v CSS

HTML a CSS Statický web Fixní menu a pozicování v CSS American English version English version

ONEbit hosting Unicorn College 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, Stylování hlavičky HTML stránky, jsme ostylovali hlavičku s navigací. V dnešním HTML/CSS tutoriálu u stylování zůstaneme a dokončíme layout (rozložení) webu.

Patička

Začněme stylováním patičky. Zde není moc co vymýšlet. Nastavíme výšku, barvu textu a levý a horní okraj:

footer {
        height: 40px;
        color: white;
    margin: 20px 0 0 30px;
}

Podobně jako odkaz v hlavičce nastylujeme i odkaz v patičce:

footer a {
        color:  #ffbb00;
        text-decoration: none;
}

To bylo jednoduché, že? Výsledek:

Patička v HTML a CSS

Pole s obsahem článku (section) je na article velmi namačkané, nastavme article svislý padding na 30px:

article {
        background: url('obrazky/pozadi.png') #009aca;
        padding: 30px 0px;
}

Lepší, ne?

Podpora různých rozlišení

Již jsme web navrhli tak, aby byl použitelný v rozlišení s šířkou 960 pixelů a větším. Podporujeme tedy rozlišení 1024x768 a vyšší. Typické rozlišení pro dnešní dobu je 1280x800 na noteboocích (tam náš web vypadá stále dobře) a full-hd (1920x1080) na desktopech. Podívejme se, jak náš web vypadá ve full-hd:

Web ve full-hd

Není to úplně ideální. Rozlišení by mohlo být ještě vyšší, měli bychom web navrhnout tak, aby vypadal solidně i v takovém případě. Zde je vidět, proč jsme nastavili šedé pozadí celému body a ne jen patičce. Je to z toho důvodu, aby se ve vysokém rozlišení patička takto protahla a nevzniklo dole bílé místo. Většina stránek na webu má však delší obsah, takže tento úvodní článek je spíše extrémní případ, nicméně je dobré počítat i s ním.

Šířka pole s článkem

Někteří (hlavně učitelé a teoretikové) tvrdí, že by se mělo pole s obsahem webu přízpůsobovat velikosti okna prohlížeče. Je však nemožné ten samý článek naformátovat tak, aby vypadal dobře v rozlišení 1024x768 i ve full-hd. Ve full-hd se obvykle z odstavců textu stanou jen dlouhé nudle. Viděli jste někdy knihu napsanou vodorovně na roli papíru? Já tedy ne. Všimněte si, že drtivá většina webů (hlavně ty, co za něco stojí) mají pevně určenou velikost pole s článkem. Jako výjimku znám asi jen Wikipedii. Section tedy roztahovat nebudeme.

Co však můžeme zlepšit je stránku vycentrovat, aby si uživatel s širokým monitorem nevyklobil krk, až bude náš web číst.

Jelikož potřebujeme vycentrovat 2 elementy uvnitř article (header a section), obalíme je oba do divu s nějakým id:

<article>
        <div id="centrovac">
                <header>
                ...
                </section>
                <div class="cistic"></div>
        </div>
</article>

Samotný blokový element uvnitř blokového jsme ještě necentrovali. Zatím jsme centrovali pouze obrázek (element řádkový), což šlo pomocí nastavení text-align elementu, ve kterém je obrázek vložený. Tato vlastnost však nemá na blokové elementy žádný vliv. Centrovač vystředíme tak, že mu nastavíme vodorovný vnější okraj (margin) na hodnotu auto. Aby to fungovalo, musíme elementu samozřejmě nastavit i šířku (jinak by se roztáhl přes celý article):

#centrovac {
        margin: 0px auto;
        width: 960px;
}

Výsledek:

Web ve full-hd

Tímto jsme náš layout v podstatě dokončili. Pokud máte chuť, přidáme si do něj ještě takovou vychytávku - fixní menu.

Fixní menu

Hlavička s navigačním menu je poměrně nízká, můžeme na ni aplikovat zajímavou vlastnost, kterou je fixní pozice. O pozicích jsme se ještě nezmiňovali, napravme to.

Pozici určitému elementu nastavujeme pomocí CSS vlastnosti position. V HTML máme 4 typy pozic:

Statická pozice (static)

Všechny elementy v HTML mají jako výchozí statickou pozici. Element je jednoduše zobrazen na té pozici, na které je definován a to s ohledem na ostatní elementy na stránce. Všechny naše elementy mají nyní fixní pozici, jednoduše řečeno zobrazují se tam, kde mají :)

Relativní pozice (relative)

Pokud nastavíme elementu relativní pozici, můžeme mu v CSS definovat vlastnosti left, right, up a down. Zde můžeme pomocí pixelů nebo procent nastavit o kolik má být element posunutý oproti své originální pozici. Pokud elementu např. nastavíme levou pozici na 20px, zobrazí se 20px napravo od svého původního místa. Pokud je vpravo od tohoto elementu jiný element, tak se tento jiný element neposune, ale bude elementem zleva překryt. Který element bude na popředí můžeme nastavit pomocí vlastnosti z-index. Elementy výše mají vyšší číselné hodnoty, elementy níže nižší.

Absolutní pozice (absolute)

Absolutní pozice zobrazí element na daných souřadnicích bez ohledu na jeho originální pozici v HTML obsahu. Pokud tedy nastavíme elementu left na 20px, zobrazí se element 20px od levého okraje okna. Pokud jsou pod ním jiné elementy, překryje je.

Fixní pozice (fixed)

Fixní pozice funguje podobně, jako pozice absolutní, ale souřadnice se počítají v oblasti, která je vidět. Rolování scrollbarem tedy nemá na takové prvky vliv, zůstávají na svém místě, i když se ostatní obsah posouvá.

Zkusme si hlavičce nastavit různé pozice, abychom pochopili, jak fungují. Jak vypadá s fixní pozicí víme, zkusme ji nyní nastavit pozici relativní a horní souřadnici na 50px:

header {
        height: 73px;
        position: relative;
        top: 50px;
}

Aby se změny neprojevily i u headeru článku, nastavíme mu position na static:

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

Výsledek:

Relativní pozice v CSS

Vidíme, že celý element se i se svým obsahem posunul o 50 pixelů dolů a překrývá ostatní elementy. Ostatní elementy se nijak neposunuly, web se chová tak, jako by element byl stále na původní pozici, jen se vykresluje kousek vedle.

Nyní změňme pozici na absolutní:

position: absolute;

Výsledek:

Absolutní pozice v CSS

Vidíme, že element ze stránky úplně zmizel a objevil se nad ostatním obsahem na pozici, kterou jsme mu dali. Na jaké pozici byl původně vůbec nahraje roli.

Zkusme si naposledy fixní pozici, u které zůstaneme. Zkuste si nyní stránkou rolovat (musíte zmenšit okno prohlížeče), hlavička zůstává na svém místě. Nyní nastavme pozici na fixní a top na 0px:

position: fixed;
top: 0px;

Hlavička vypadá stejně, jako u pozice absolutní. Když však stránkou rolujeme, zůstává 0px od horní hrany okna:

Fixní pozice v CSS

Jelikož element ze svého místa zmizel, dáme místo něj u body margin:

margin: 73px 0px 0px 0px;

Určitě jste si také všimli, že si element nezachoval svou původní šířku a také je třeba nastavit pozadí. Dodejmě headeru vlastnost width s hodnotou 100% a obrázek na pozadí:

background: url('obrazky/pozadi_sede.png') #1c2228;
width: 100%;

Pozadí se nám nyní aplikuje i na header článku, tam ho tedy zrušíme:

background: none;

Výsledek:

Fixní navigační menu v HTML a CSS

Pozicování používejte jen v případě, že víte, co děláte. Zpravidla se používá jen velmi zřídka a je velkou chybou sestavovat web zadáváním desítek absolutních souřadnic.

Menu zůstává na svém místě i když stránkou rolujeme. Gratuluji vám, pokud jste se dostali sami až sem, máte jednak hotový layout a jednat umíte slušně HTML a CSS. V příští lekci, Tvorba podstránek a kontaktní formulář, dokončíme jednotlivé podstránky našeho webu, abychom ho mohli nahrát na internet. Dnešní kód je jako vždy ke stažení v příloze.


 

Stáhnout

Staženo 2801x (85.9 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?
30 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 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
Aktivity (2)

 

 

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

Avatar
Ondřej Rejmont:12. ledna 21:12

Už jsem to vyřešil. Bylo to tím, že jsem v

<a>Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>

Měl přidané to <a>. Správně to má vypadat takto

Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>
 
Odpovědět 12. ledna 21:12
Avatar
Tomáš Kala
Člen
Avatar
Tomáš Kala:13. ledna 19:04

Ahoj, mohl by mi někdo prosím poradit? Jak mohu udělat, aby se mi menu takhle nerozjelo po zmenšení okna?

 
Odpovědět 13. ledna 19:04
Avatar
Matěj Kubíček:26. února 20:55

Ahoj všem,
první bych chtěl moc poděkovat a hlavně pochválit všechny tutoriály na tomto webu. Nahlídl jsem již snad skoro do všech kategorií a vše je super.
Obracím se však na všechny s jedním problémem, resp. dvěma. Pokusil jsem se udělat web podle tutoriálu, ale s trochu jiným menu. Ikdyž jsem postupoval vcelku analogicky, tak se mi nepodařilo dostat pozadí střední části až do krajů a ještě se mi nepodařilo vycentrovat menu, které je až pod logem. Přikládám odkaz s celým webem (tedy s layoutem, textů si nevšímejte, nejsou podstatné). WEB
Požádám tedy někoho, kdo by se na to mohl mrknout, zda by se mi ozval a zároveň posoudil celý kód, jestli je tak nějak v pořádku.
Dík za jakoukoliv odpověď.
PS: Vím, že se moderní web asi teď dělá jinak, ale tohle jsou úplné základy, které bych měl asi ovládat, tak se je snažím nějak procvičit.

 
Odpovědět 26. února 20:55
Avatar
Odpovídá na Matěj Kubíček
Filip Janhuba:5. března 10:01

Pozadím střední části předpokládám myslíš tu tmavší část (background1.png)? V css je u #centrovac, kam patří ta střední část, nastavená pevná šířka 960px což u monitoru s vyšším rozlišením než 960x nebude až do krajů. Ono to menu patří taky do #centrovac a tak se řídí jen podle té pevné šířky.

Tak zkus použít u #centrovac třeba padding jak píše Jakub Vanek pár komentářů zpět. Můžeš také vyzkoušet v CSS vytvořit nový id jen pro menu a to si separátně vycentrovat :)

Pro vliv úpravy na výsledek v reálném čase (pokud již nepoužíváš) se hodí např. https://codepen.io

 
Odpovědět 5. března 10:01
Avatar
Odpovídá na Filip Janhuba
Matěj Kubíček:5. března 17:50

Díky za odpověď. Po dlouhém bádání se mi to nakonec podařilo vyřešit, myslím menu, právě tím obalením do dalšího elementu a jeho následným vycentrováním. Každopádně jsem během dalšího sebevzdělávání narazil na flexbox a jeho další funkce a musím říct, že s tím se mi pracuje o mnoho lépe. Ještě jednou díky. Jsem na úplném začátku a tak vím, že je toho ještě mnoho a mnoho, co se budu muset naučit. Myslím, že budu stále přicházet na další a další zlepšováky a usnadnění práce.

 
Odpovědět 5. března 17:50
Avatar
Jan Harvalík:12. července 23:27

Mám úplně stejný problém a nemohu ho vyřešit i zápis je téměř stejný. Prosím o radu děkuji.

 
Odpovědět 12. července 23:27
Avatar
Jan Harvalík:12. července 23:31

Header se mi zobrazuje nad section a ne vedle ní děkuji. Vím, že už se to tu řešilo ale dané rady sice pomohli, ale ne optimálně.

<article>
<div id="center">
<header>
<h1>O mně</h1>
</header>

<section>
<p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
<p class="centrovany">

</p>

<p><img src="obrazky/a­vatar.png" alt="Programátor HoBi" class="vlevo" style="border-radius: 500px" />Jmenuji se Jakub Vanek a je mi 20 let. Chodím už do práce, jsem zaměstnaný jako kontrolor kvality v Treboplastu.</p>
<p>Rád poslouchám hudbu a někdy (hlavně v létě) i sportuju.</p>
<div class="clear"></div>
<p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je programování!</p>

<p>Tato stránka je vytvořena podle HTML tutoriálů na devbooku.</p>
</section>
<div class="clear"></div>
</div>
</article>
CSS:

header {
height: 74px;
}
.centrovany {
text-align: center
}
article {
background: url('obrazky/bg­.png');
padding: 30px 0px;
}
article header {
width: 250px;
float: left;
}
article section {
width: 706px;
float: left;
background: white;
border: 2px solid #006797;
border-radius: 10px;
box-shadow: 2px 2px 5px #1c2228;
padding: 20px;
}
.clear {
clear: both
}
#center {
margin: 0px auto;
width: 960px;
}
.vlevo {
float: left;
}

 
Odpovědět 12. července 23:31
Avatar
EweN
Člen
Avatar
EweN:29. září 14:30

Ahoj,
nemohl by mi nekdo poradit s tou patickou?
Pochybuju o tom ze jsem footer nenapsal do toho css souboru spravne ..
Ale vubec mi nereaguje na prikazy.
Kdyz jsem ho zapsal poprve tak bylo vse bez problemu .. ale hned po restartovani PC mi prestal spolupracovat .. nechce menit barvu, pozici proste nic =X
(uz jsem byl tak zoufalej ze jsem ho jen prekopiroval .. ale ani tak se nehne)

Predem dekuji.

 
Odpovědět 29. září 14:30
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na EweN
Honza Bittner:29. září 14:46

No, mohl bys nám ukázat kód, abychom vůbec věděli, co děláš. Zkus to dát třeba na http://codepen.io nebo tak něco.

Odpovědět 29. září 14:46
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
EweN
Člen
Avatar
Odpovídá na Honza Bittner
EweN:29. září 17:23

Omlouvam se za otravovani.. zmenil jsem editor a najednou jde vse zase tak jak ma =)

 
Odpovědět 29. září 17:23
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 96. Zobrazit vše