Pouze tento týden sleva až 80 % na e-learning týkající se PHP. A zároveň využij akce až 30 % zdarma při nákupu e-learningu. Více informací.
Hledáme asistenty pro kurzy programování - pohodová brigáda. Více info
PHP week

Lekce 16 - Stylování tabulek a galerie fotek v HTML a CSS

V minulé lekci, Tvorba podstránek a kontaktní formulář, jsme začali dokončovat jednotlivé podstránky.

Dnes v HTML/CSS tutoriálu dokončíme web kompletně.

Dovednosti

Stránku dovednosti již máme z části připravenou z prvních dílů seriálu. Opět ji upravíme tak, aby v ní byl vložený celý layout, jako jsme to udělali minule se stránkou kontakt.html.

Protože již známe CSS, trochu lépe tabulku ostylujeme. Jako první ji dáme nějaké IDčko, nabízí se dovednosti. Hlavním problémem je, že nemáme sloupce (buňky) stejně široké. Že to tak vypadá je jen náhoda, jelikož text ve všech buňkách je podobně dlouhý. Zkuste si něco připsat do jedné z buněk, rozšíří se. Každé buňce nastavme šířku na 33% a nějaký padding:

#dovednosti td {
    width: 33%;
    padding: 20px;
}

Výsledek:

Stylování tabulek v HTML přes CSS

Jak vidíte, obsah v buňce tabulky se ve výchozím nastavení centruje svisle. To se nám nehodí, protože bychom chtěli mít nadpisy ve stejné výšce, zarovnané shora. To nastavíme opět všem buňkám pomocí CSS vlastnosti vertical-align s hodnotou top:

vertical-align: top;

K zarovnání na střed použijeme hodnotu middle, k zarovnání dolů bottom. Tato vlastnost funguje pouze u tabulek, v ostatních elementech se bohužel takto jednoduše centrovat nedá. Opět narážíme na nechvalně proslulé centrování v CSS.

Neukazovali jsme si ještě, jak se styluje rámeček tabulky. Je to velmi podobné jako stylování rámečku ostatních elementů, avšak tabulka má rámeček dvojitý. Zkusme si opět v tom samém selektoru nastavit rámeček všech buněk na šedý, 1px tlustý:

border: 1px solid gray;

Výsledek:

Rámeček HTML tabulky v CSS
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Vidíme, že to není úplně to, co bychom chtěli. Rámečky slijeme pomocí vlastnosti border-collapse, nastavené na hodnotu collapse. Tu však nenastavíme buňkám, ale celé tabulce:

#dovednosti {
    border-collapse: collapse;
}

Výsledek již vypadá dle očekávání.

Poslední pihou na kráse naší tabulky jsou nevycentrované obrázky v prvním řádku. Chtěli bychom vycentrovat obsah jen tohoto jednoho řádku a zbytek řádků nechat zarovnaných doleva (dlouhý vycentrovaný text je špatně čitelný). Možností je více, tou nejjednodušší je dát řádku třídu .centrovany:

...
<table id="dovednosti">
    <tr class="centrovany">
        ...

Dokončili jsme tedy další podstránku:

Rámeček HTML tabulky v CSS

Reference

Na stránce s referencemi si vytvoříme malou galerii obrázků s aplikacemi a weby, které jste vytvořili. Galerie obrázků se vám určitě hodí nejen na obrázky vašich prací, ale třeba i na fotky a podobně. Já si půjčím obrázek tohoto webu a místní ukázkové aplikace v Javě a Pascalu. Použiji tedy tyto 3 obrázky.

Kalkulačka v Javě
Miny v Pascalu
Web v HTML a CSS

Galerie obrázků

Začněme tím, že si ke každému obrázku vytvoříme miniaturu. Bylo by velkou chybou zobrazovat náhledy jako velké obrázky, jelikož se dlouho stahují. Proto si ve svém oblíbeném grafickém editoru (GIMPu, PhotoShopu, ...) zmenšete své obrázky, já jsem všem nastavil výšku na 128px a k jejich názvu jsem připojil _nahled.

Vytvoříme si podstránku reference.html tak, jako všechny podstránky, tedy zkopírováním např. indexu. Do section umístíme nějaké to povídání a div, ve kterém budou jednotlivé náhledy:

<p>Níže naleznete ukázky mých dosavadních prací. Mohu vám nabídnout tvorbu podobného softwaru na zakázku.</p>

<div id="reference">
    <a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě"><img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" /></a>
    <a href="obrazky/miny_pascal.png" title="Miny v Pascalu"><img src="obrazky/miny_pascal_nahled.png" alt="Miny v Pascalu" /></a>
    <a href="obrazky/hobi_web.jpg" title="Web v HTML a CSS"><img src="obrazky/hobi_web_nahled.jpg" alt="Web v HTML a CSS" /></a>
</div>

Na kódu není nic složitého. Udělali jsme si div, ve kterém jsou poskládané za sebou jednotlivé náhledy. Každý náhled odkazuje na originální (velký) obrázek. U odkazu jsme nastavili atribut title, ten můžeme nastavit každému prvku v HTML a zobrazí je tehdy, když na element najedeme kurzorem myši:

Galerie obrázků v HTML a CSS

Trochu naši galerii vylepšíme přes CSS, určitě jste si všimli připraveného ID. Nastavíme obrázkům v galerii border, padding, margin a stín:

#reference img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

Výsledek:

Galerie obrázků v HTML a CSS

Takhle to vypadá mnohem lépe, že? A přitom to bylo tak jednoduché. Pokud na náhled klikneme, zobrazí se velký obrázek. Efekt je ale poněkud ošklivý, celá stránka zmizí a obrázek je nevzhledně umístěn v levém horním rohu, na prázdné stránce. Ukážeme si, jak to vyřešit lépe.

Lightbox

Lightbox je webový doplněk, napsaný v jazyce JavaScript. Právě JavaScript se používá na dynamické prvky moderních webů, jako je např. vyskakovací okno s galerií obrázků, kterou jistě dobře znáte z mnoha webů. Přes JavaScript je také např. řešeno navigační menu zde na ITnetwork.

Projekt je zadarmo a dostupný na adrese https://github.com/…h/lightbox2/. Stáhnout si ho můžeme přes zelené tlačítko s textem "code". Po kliknutí na tlačítko se nám rozbalí menu a úplně na konci seznamu je ke stažení archiv ZIP (Download ZIP). Soubory, které potřebujeme, jsou ve složce /dist. V ní jsou složky js/, images/ a css/, které rozbalíme do složky s naším webem. Podobně, jako musíme CSS připojit k HTML, musíme k HTML připojit i tento skript, aby se na stránce spustil. Do hlavičky stránky vložíme následující odkazy na potřebné skripty a i na CSS soubor lightboxu:

<link rel="stylesheet" href="styl.css" type="text/css" />
<link rel="stylesheet" href="css/lightbox.min.css" type="text/css" media="screen" />
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/lightbox.min.js"></script>

Nyní přidáme všem odkazům v galerii atribut rel s hodnotou lightbox[reference]:

...
<a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" rel="lightbox[reference]">
...

Stránku obnovte a klikněte na náhled. Výsledek je velmi působivý:

Použití lightboxu ke galerii obrázků v HTML

Pokud přidáte na kteroukoli stránku do hlavičky potřebné skripty a poté na nějaký odkaz na obrázek použijete rel="lightbox", zobrazí se v LightBoxu. Pokud navíc uvedete jméno galerie v hranatých závorkách, bude LightBox tyto obrázky chápat jako z jedné galerie a nechá vás mezi nimi přecházet pomocí myši nebo šipek.

Podstránku "O mně" si jistě již zvládnete dokončit sami. Tímto tedy máme web hotový. Dnešní výsledek máte jako vždy ke stažení v příloze článku.

V následujícím cvičení, Řešené úlohy k 14.-16. 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 5472x (1.09 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Tvorba podstránek a kontaktní formulář
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?
53 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

 

 

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

Avatar
davidmarek.plc:10.7.2020 13:49

Ahoj.

Prosim je nejaka moznost, jak nastavit max-width a max-height i obrazku, ktere zpracovava lightbox?

Diky

 
Odpovědět
10.7.2020 13:49
Avatar
Kristián Lörincz:13.9.2020 20:43

Ahoj, já jako vždy jen poděkuju za další super lekci. Ten Lightbox je perfektní! Díky!

 
Odpovědět
13.9.2020 20:43
Avatar
Rostislav Faltýnek:6.10.2020 12:31

Ahoj, děkuji za návod, vše zatím funguje bez problémů. Díky!

 
Odpovědět
6.10.2020 12:31
Avatar
Tomáš Gál
Člen
Avatar
Tomáš Gál:24.10.2020 9:15

Čau, měl jsem také problém s lightboxem.
Jestli to někomu pomůže, řešení spočívalo úpravě cesty, neboť to píšu na platformě IntelliJ a především v novém pojmenování souborů z lightboxu. :-)
Moje hlavička nejaktuálnější a funkční tedy vypadá takto:

<link rel="stylesheet" href="styl.css" type="text/css" />
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script src="js/lightbox-plus-jquery.js"></script>
    <script src="js/lightbox-plus-jquery.min.js"></script>
    <script src="js/lightbox.min.js"></script>
    <script src="js/lightbox.js"></script>
    <title>Reference</title>

<meta charset="UTF-8">

 
Odpovědět
24.10.2020 9:15
Avatar
Václav Janča:5. února 18:53

Ahoj, můžete mi někdo poradit?
Používám LightBox už déle ale nyní se mi objevil zvláštní problém. Použil jsem jej v šabloně bootstrapu https://colorlib.com/…/fitnessgym/ a došlo k zvláštní události, rozhodilo se mi menu (nesbaluje se do "hamburgeru") a zmizela mi "hero area". hned pod header. Pokud Light box a přidružené soubory odstraním, vše se zobrazí tak jak má. Nevíte někdo kde bych měl hledat problém? Zkoušel sem projít csska i javascripty, ale nic neobvyklého jsem nenašel. Díky

 
Odpovědět
5. února 18:53
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Lucie Kořánová:7. února 22:07

Super vše funguje. Odkaz mi nefungoval (soubory z odkazu), ale dané soubory na lightbox jsem vzala ze stáhnutého souboru pro kontrolu na konci lekce a nakopírovala k sobě do složky s webem.

 
Odpovědět
7. února 22:07
Avatar
Dušan Kovářík:26. května 13:14

Paráda, lightbox funguje skvěle! Určitě se mi bude ještě hodit! Díky!

 
Odpovědět
26. května 13:14
Avatar
Katka Mlázovská:1. července 10:37

Suprové know-how! Lightbox se bude hodit - díky!

Odpovědět
1. července 10:37
easy choices => hard life; hard choices => easy life;
Avatar
Marek Ondrejka
Super redaktor
Avatar
Marek Ondrejka:23. července 11:20

Lightbox je ok, ale nepoužívám to čemu zatím nerozumím, a tady je JS a to neznám, nedokázal jsem nastavit jak otevřenou fotografii naformátovat na velikost okna a né na 100% velikosti fotky, což se nedá použít na mnohem větší formáty než FullHD. Proto jsem si udělal vlastní lightbox v CSS3. Sice nemůžu listovat mezi fotkami, ale dá se snadno upravit a vyhovuje mi na toto html css cvičení. JS začnu používat až se naučím.

<!DOCTYPE html>
<html lang="cs-cz">
        <head>
                <meta charset="utf-8" />
                <title>Jak na vyskakovací detail obrázku – Lightbox</title>
                <link rel="stylesheet" href="styl.css" type="text/css" />
    </head>
<body>
  <h1>Jak na vyskakovací detail obrázku – Lightbox</h1>
  <p>
        <a href="#l1"><img src="obr/3.jpg" width="15%" alt="náhled" /></a>
        <a href="#l2"><img src="obr/3.jpg" width="15%" alt="náhled" /></a>
        <a href="#l3"><img src="obr/3.jpg" width="15%" alt="náhled" /></a>
    <a href="#l4"><img src="obr/3.jpg" width="15%" alt="náhled" /></a>
  </p>
<div id="l1" class="lb">
   <a href="#"><img src="obr/3.jpg" alt="detail v lightboxu" /><br /><span>Zavřít</span></a>
</div>
<div id="l2" class="lb">
   <a href="#"><img src="obr/3.jpg" alt="detail v lightboxu" /><br /><span>Zavřít</span></a>
</div>
<div id="l3" class="lb">
   <a href="#"><img src="obr/3.jpg" alt="detail v lightboxu" /><br /><span>Zavřít</span></a>
</div>
<div id="l4" class="lb">
   <a href="#"><img src="obr/3.jpg" alt="detail v lightboxu" /><br /><span>Zavřít</span></a>
</div>
</body>
</html>

css

html{
         height: 100%;
         width: 100%;
}
body{
         height: 100%;
         width: 100%;
         margin-top: 20px;
         font-size: auto;
}
h1  {
         font-size: 300%;
         margin: 0 10px;
}
p   {
         margin: 10px;
}
div.lb {
                display: none;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                text-align: center;
                padding-top: 10px;
                background: url(obr/pozadi-lightbox.png);
}
div.lb:target {
                display: block;
}
div.lb span {
                padding: 3px 10px;
                background: black;
                color: tomato;
                font-weight: bold;
}
div.lb img {
                border: 5px solid black;
                height: 95%;
                box-shadow: 2px 2px 7px #1c2228;
                /*width: 100%;*/
}
a {
                text-decoration: none;

}
img {
                border: 2px solid black;/*#FFF;* definice rámečku náhledu*/
                border-radius: 10px;
                box-shadow: 2px 2px 7px #1c2228;
        }
 
Odpovědět
23. července 11:20
Avatar
Leoš Kaplan
Člen
Avatar
Leoš Kaplan:18. srpna 18:35

Tak já mám problém překvapivě odlišný a dost banální problém, přesto nevím, kde dělám chybu.

Stránka, obrázky i lightbox jsem nastavil v pořádku a vše funguje, ale z nějakého důvodu mi v article u téhle konkrétní stránky někam odešel padding a mám jak text, tak i fotky nalepené na levém kraji, viz fotka.
U jiných souborů (Kontakt, Domů,..) tenhle problém nemám, děje se to pouze u téhle stránky. Zkoušel jsem porovnávat svůj soubor s šablonovým a nikde jsem nenašel rozdíl. Následně ani pokus upravit šířku náhledových fotek nebyl úspěšný. Napadá někoho, co by mohlo být špatně?

 
Odpovědět
18. srpna 18:35
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 88. Zobrazit vše