XHTML + CSS – 30 lekcia – tvorba horizontálneho menu – selectory v praxi

V doterajšom seriále náučných videí sme sa bavili prevažne o selectoroch, čiže o spôsoboch ako vieme špecificky označiť viaceré rovnaké elementy na stránke. Ako také zavŕšenie tohto seriálu si môžeme vytvoriť jednoduché efektné menu, pomocou html, css a jednoduchého setu niekoľkých ikon. Pri tvorbe menu s ikonkami si precvičíme prácu s viacerými spôsobmi (viac…)

XHTML + CSS – 29 lekcia – nth-child, násobný element

Jednoduchý a ľahko pochopiteľný návod ako sa vysporiadať v situácii s viacerými rovnakými elemetmi bez pridávania ďalších tried/class. V návode sa dozviete ako jednoducho označiť, prvý, posledný alebo hocijaký rovnaký element za pomoci veľmi jednoduchého triku.

XHTML + CSS – 28 lekcia – pseudo elementy before, after

Isto si spomeniete na prácu s odkazmi (<a></a> tag), pri nich sme sa v CSS stretli s rôznymi triedami napr.: :hover, :active a pod. tieto classy neexistovali. Teda neexistovali v ponímaní z HTML pohľadu, naše odkazy nemali v sebe napisane <a class=”hover”></a> a podobne. A predsa bolo možné tieto triedy používať v CSS. Tieto triedy sú (viac…)

XHTML + CSS – 27 lekcia – selectory – attribute selector

Iste si spomínate na úplne prvé videá kde som vysvetľoval, čo je html element a čo je atribút. Atribút poskytuje rozširujúce informácie o elemente, často-krát je atribút neoddeliteľnou súčasťou elementu pre zabezpečenie požadovanej (viac…)

XHTML + CSS – 26 lekcia – selectory – rodič – potomok

Každý html kód vieme rozčleniť z hľadiska rodičov a potomkov, majme jednoduchý html kód napr.:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Z tohto jednoduchého kódu vidíme, že head a body sú potomkami rodiča html, ďalej title je potomok rodiča head.

Pri programovaní html stránok sa už len tieto vzťahy (viac…)

XHTML + CSS – 25 lekcia – selectory – rovnaké CSS pre viac html elementov

V prípade, že potrebujete, alebo skôr chcete aplikovať rovnaké CSS pre viaceré html elementy na stránke je veľmi neefektívne používať  kopírovanie tých istých CSS príkazov pre tieto elementy. Kopírovanie CSS zbytočne zvyšuje veľkosť CSS súboru a následne robí kód horšie modifikovateľným v budúcnosti. (viac…)

XHTML + CSS – 24 lekcia – z-index

Pre rozšírenie polohovania elementov nie len do smerov osi X a Y slúži príkaz z-index, ktorý umožňuje nastaviť polohu elementu v smere osi Z. Os Z si môžeme predstaviť jednoducho, ako os ktorá pretína náš monitor v smere od našich očí. Čiže elementy sú akože bližšie k nám (pred monitorom) a ďalej od nás (za monitorom). Keď si povieme že obrazovka nášho monitora bude mať (viac…)

XHTML + CSS – 23 lekcia – position: fixed

Použitím CSS príkazu:

position: fixed;

dosiahneme na stránke úplné ukotvenie elementu na danej pozícii. Pozícia je fixne spätá s veľkosťou okna prehliadača. Pomocou CSS polohovacích príkazov top, right, bottom, left upravujeme polohu elementu v okne prehliadača. Veľkou výhodou (viac…)

XHTML + CSS – 22 lekcia – position: absolute

Spôsob absolútneho polohovania je možné nastaviť použitím CSS príkazu

position: absolute;

pri konkrétnom elemente. Spôsob vypočítavania polohy elementu sa oproti relatívnemu polohovaniu zásadne zmení. Zatiaľ čo pri relatívnom polohovaní bola poloha polohovaných elementov vypočítavaná automaticky, tak pri absolútnom polohovaní je to naopak.  Užívateľ pri tomto type striktne definuje polohu elementu pomocou príkazov top, right, bottom a left. Takto polohované elementy majú kotviaci bod umiestnený (viac…)