Diskusia – 21. diel - Štýlovanie tabuliek v HTML a CSS

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

Rostislav Faltýnek

Člen

Rostislav Faltýnek:6.10.2020 12:31

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

Odpovedať

Tomáš Gál

Člen

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>

Odpovedať

Václav Janča

Člen

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

Odpovedať

Lucie Kořánová

Člen

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.

Odpovedať

Dušan Kovářík

Člen

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!

Odpovedať

KaMl

Člen

KaMl:1.7.2021 10:37

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

Odpovedať

Marek Ondrejka

Tvůrce

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;
        }

Odpovedať

Leoš Kaplan

Člen

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ě?

Odpovedať

Barbora Danihelova

Člen

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

Odpovedať

Matúš Olejník

Člen

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.

Odpovedať

/* I am not sure why this works but it fixes the problem */

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 154.

Najčastejšie vyhľadávané

Diskusia – 21. diel - Štýlovanie tabuliek v HTML a CSS