NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 21 - Stylování tabulek v HTML a CSS

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Rostislav Faltýnek
Člen
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
Člen
Avatar
Václav Janča:5.2.2021 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.2.2021 18:53
Avatar
Lucie Kořánová
Člen
Avatar
Lucie Kořánová:7.2.2021 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.2.2021 22:07
Avatar
Dušan Kovářík
Člen
Avatar
Dušan Kovářík:26.5.2021 13:14

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

 
Odpovědět
26.5.2021 13:14
Avatar
KaMl
Člen
Avatar
KaMl:1.7.2021 10:37

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

 
Odpovědět
1.7.2021 10:37
Avatar
Marek Ondrejka
Tvůrce
Avatar
Marek Ondrejka:23.7.2021 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.7.2021 11:20
Avatar
Leoš Kaplan
Člen
Avatar
Leoš Kaplan:18.8.2021 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.8.2021 18:35
Avatar
Barbora Danihelova
Člen
Avatar
Barbora Danihelova:30.10.2021 14:27

tak sem asi jediná co to nedává:D nejde mi nic ani ked si stahnu Vás zdrojak a otvorim ho dokonca ani vtedy to nejde, nehovorím o tom že tam máte plno nových vecí ktoré vobec neviem odkial sa tam vzali co znamenaju ani ci tam musia byt...aach jo

 
Odpovědět
30.10.2021 14:27
Avatar
Matúš Olejník
Člen
Avatar
Odpovídá na Barbora Danihelova
Matúš Olejník:30.10.2021 14:48

Ak stiahneš celé zipko, rozbalíš ho, vojdeš do priečinku web (1) a otvoríš napr. index.html tak ti musí zobraziť peknú stránku, prípadne skús obnoviť stránku cez ctrl F5.

Odpovědět
30.10.2021 14:48
/* I am not sure why this works but it fixes the problem */
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 154.