16. díl - Stylování tabulek a galerie fotek v HTML a CSS

HTML a CSS Statický web Stylování tabulek a galerie fotek v HTML a CSS American English version English version

V minulém dílu našeho seriálu tutoriálů o tvorbě webu v HTML a CSS jsme začali dokončovat jednotlivé podstránky. Dnes web dokončíme 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

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 centrovaný:

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

Projekt je zadarmo a dostupný na adrese http://lokeshdhakar.com/…ts/lightbox2. Použití je velmi jednoduché, stáhněte si archiv s projektem a složky js, images a css rozbalte do složky s vaší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="css/lightbox.css" type="text/css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

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

...
<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ý, příště si ukážeme, jak ho nahrát na webhosting a jaký webhosting vybrat. Dnešní výsledek máte jako vždy ke stažení v příloze článku.


 

Stáhnout

Staženo 3086x (1.1 MB)
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.844.844.844.844.84


 


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

 

 

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

Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Těžko, když jsi nám v podstatě nic neřekl. Ukaž stránku, kde ti to nefunguje, pošli kód nebo to lépe popiš. A založ si na to nové vlákno :)

Odpovědět 10.12.2015 11:07
Creating websites is awesome till you see the result in another browser ...
Avatar
Michal Durik
Člen
Avatar
Michal Durik:

tak do <head> som dal

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

a fotky

<a href="foto/881.jpg" data-lightbox="reference" data-title="foto"><img src="foto/881n.jpg"></a>
 
Odpovědět 10.12.2015 12:56
Avatar
5264delta
Člen
Avatar
5264delta:

Ahoj, nevíte někdo, jaký je script pro ten efekt těch okýnek s těmi sociálníma sítěmi nad patičkou?? Tady je stránka: http://www.americantrucksimulator.com/

 
Odpovědět 31. ledna 15:21
Avatar
Jenda Xenofob Kropáč:

Hezký večer,
po stažení aplikace Lightbox2 z http://lokeshdhakar.com/…ts/lightbox2 a následném rozbaleni, jsou k dispozici 3 složky (dist, examples a src) z nichž ve dvou (dist a src) byly výše zmiňované css, images a js.
Předpokládám, že relavantní css, images a js pro tuto lekci budou jen v jedné z nich, tedy ve které prosím a dále byly v zipu další soubory (.gitignore, .jscsrc,.jshintrc, bower, CONTRIBUTING, Gruntfile.js ) Mají tyto nějaký vliv na funkci lightboxu ve vztahu k lekci..?
Děkuji za odpověď
JK

 
Odpovědět 30. dubna 0:36
Avatar
Milan Fafek
Člen
Avatar
Milan Fafek:

Ahoj Všem,

dokáže mi někdo poradit z jakého důvodu se mi nezobrazují v Lightboxu šipky a křížek pro ukončení prezentace fotek?

Podle návodu zde ke stažení mám vše v pořádku. Dlouhé 2 dny to zkoumám proč ne a ne se zobrazit. Prohlížečem to není, protože jsem vyzkoušel i Chrome.

Podklady z Lightboxy mám jako vše ostatní na ploše.

Předem díky moc a moc za radu jak to dotáhnout.

 
Odpovědět 1. června 21:23
Avatar
Ján Timoranský
Redaktor
Avatar
Odpovídá na Milan Fafek
Ján Timoranský:

Povedal by som, že nemáš dobre nalinkované tie obrázky. Neviem terat presne ako to lightbox má ale určite odniekadiaľ ten script tie šípky musí načítať no zrejme ich nevie nájsť.

Odpovědět 1. června 21:29
Find what you love and let it kill you.
Avatar
Milan Fafek
Člen
Avatar
Odpovídá na Ján Timoranský
Milan Fafek:

Všechno mám na ploše, odkud beru i Lightbox.css tak fakt nevím... :(

 
Odpovědět 2. června 21:06
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Milan Fafek
Tomáš123:

Ak máš všetko na tom istom mieste, tak linkuj všetky súbory iba názvom súboru, tak ako styl.css.

Odpovědět 2. června 22:08
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
siders
Člen
Avatar
siders:

Kdo má potíže s rozběhnutím Lightboxu může je vyřešit dvěma způsoby:

  1. pročtení informací k aktuální verzi Lightboxu Lightbox - Getting started
  2. stažení hotového řešení web.zip a zkopírování složek css, images a js do svého projektu

tadáá :)

 
Odpovědět 28. června 11:16
Avatar
torhanmichal
Člen
Avatar
torhanmichal:

Zdravím... budu rád za každou radu... nevíte, jak bych měl vypnout lightbox na malých např. mobilních rozlišeních? Není moc pěkné, když se obrázek o dost zvětší na úkor malého rozlišení... :)

 
Odpovědět 19. října 20:03
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 50. Zobrazit vše