NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
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
Matěj Kripner
Tvůrce
Avatar
Matěj Kripner:7.3.2014 20:36

Myslím, že už je nová verze Lightboxu, která má trochu odlišné "připojení" k HTML stránce. Proto ti to možná nejde Kamil. Nicméně dole pod downloadem máš vše podrobně popsané.

 
Odpovědět
7.3.2014 20:36
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Matěj Kripner
Michal Žůrek - misaz:7.3.2014 20:43

jediná změna v implementaci je že se místo attribute rel používá data-* attribut.

Původní kód:

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

nový kód:

<a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" data-lightbox="reference">
 
Odpovědět
7.3.2014 20:43
Avatar
Michal Kučera
Člen
Avatar
Michal Kučera:12.3.2014 8:12

Chtěl jsem se zeptat na jednu věc které úplně nerozumím.
Proč je tam jednou

#dovednosti td {
...
}

Proč je tam to td? Jakou to má funkci?

#dovednosti {
border-collapse: collapse;
}

A proč tady to td není?

Odpovědět
12.3.2014 8:12
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Jurajs
Člen
Avatar
Odpovídá na Michal Kučera
Jurajs:12.3.2014 8:24

Ahoj, pokud se nepletu tak ty styluješ v CSS identifikator s názvem dovednosti. K tomu jeste styluješ td-řádek tabulky.
Takže se tam píše - #dovednosti td{}..doufám že jsi to pochopil :))
Jinak kdyby si měl nadpis <h1></h1> a u toho nějaky identifikator, tka v CSS by si psal první název identifikatoru a hned zatím h1 - #nazevID h1{}

 
Odpovědět
12.3.2014 8:24
Avatar
Jurajs
Člen
Avatar
Odpovídá na Michal Kučera
Jurajs:12.3.2014 8:32

Vzdy pises první identifikator a potom až tag (element) nebo jak se to jmenuje..tohle platí i u tříd. Příklad .nejaka_třída h6

 
Odpovědět
12.3.2014 8:32
Avatar
charlesvohlidka
Člen
Avatar
charlesvohlidka:18.5.2014 2:58

Zdarec dalo jak by se dalo udělat, listování v té bílé části jako že by dole byly navigační šipky a mezi nima čísílka 1 2 3 atd. zatím se učím tak fakt nemám ponětí jak na to :(

 
Odpovědět
18.5.2014 2:58
Avatar
charlesvohlidka
Člen
Avatar
Odpovídá na charlesvohlidka
charlesvohlidka:18.5.2014 3:04

Jako je mi jasný že by to šlo přes odkazy ale já myslel jetli by to nešlo jen v jednom html souboru nebo tak nějak nwm jak to popsat :(

 
Odpovědět
18.5.2014 3:04
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Michal Kučera
Michal Žůrek - misaz:18.5.2014 6:24

řekneš mu ostyluj mi všechny td (rekurzivně) v elementu s id dovednosti.

Rekurzivně znamená, že když budeš mít

<table id="dovenosti">
    <tbody>
        <tr>
            <!-- i toto se ostykluje, i když v cestě styl narazí na tbody -->
        </tr>
    </tbody>
</table>

tak se tr ostylyuje i když neleží přímo v #dovednosti, ale leží v tbody a teprve tbody leží v #dovednosti.

CSS script si napíšeš dobře tak že si řekneš co chceš ostylovat

(např tag p)

p {

}

pak už jenom doplňuješ to co o tom stylovaném p víš. Má třídu dlouhy?

p.dlouhy {

}

Chceš aby byl tučný?

p.dlouhy {
    font-weight: bold;
}

Chceš aby byl odsazený?

p.dlouhy {
    font-weight: bold;
    margin: 20px;
}

Víš že vždycky leží v main? a není v podelementech (zabráníš té rekurzi)?

main > p.dlouhy {
    font-weight: bold;
    margin: 20px;
}

Tyto pravidla fungují všude kde jsou naimportované, pokud žádný element jejich podmínky nesplňuje nikdy se nepoužijí.

 
Odpovědět
18.5.2014 6:24
Avatar
Martin Píštěk (Denir)
Člen
Avatar
Martin Píštěk (Denir):16.6.2014 0:26

Ahoj, aktuální nastavení Lightboxu, aby fotogalerie fungovala je:

Načtení skriptů a css v hlavičce:

<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"/>

U odkazů se přidává atribut data-lightbox=""

<a href="obrazky/kalkulacka_java.png" title="Kalkulačka v Javě" data-lightbox="reference"><img src="obrazky/kalkulacka_java_nahled.png" alt="Kalkulačka v Javě" /></a>

Pak to funguje :)

 
Odpovědět
16.6.2014 0:26
Avatar
Martin Píštěk (Denir)
Člen
Avatar
Martin Píštěk (Denir):16.6.2014 14:12

V HTML5 je zaveden pro publikování obrázků grafů a třeba i videí tag <figure> a pro popis <figcaption> zde je použit pro obrázky <p>, má to nějaký důvod? dík

 
Odpovědět
16.6.2014 14:12
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.