Praktické použitie CSS a najbežnejšie layouty. František Haško, Lukáš Navrátil

Size: px

Start display at page:

Download "Praktické použitie CSS a najbežnejšie layouty. František Haško, Lukáš Navrátil"

Tamsyn Rodgers
5 years ago
Views:

1 Praktické použitie CSS a najbežnejšie layouty František Haško, Lukáš Navrátil

2 Pred tým, než začneme Všetky ukážky kódu predpokladajú standard mód pri zobrazovaní html a css. Rôzne veci nemusia v quirk móde fungovať. box model margin: auto a iné

3 Čo je to layout? Page layout is the part of graphic design that deals in the arrangement and style treatment of elements (content). wikipedia - základný rozdiel oproti tlači - niektoré elementy na stránke môžu mať premenlivú veľkosť Dôsledok: každý layout webovej stránky je pohyblivý - nemôžeme vedieť ako stránka bude vyzerať, no musíme ju pripraviť na maximum možností

4 Druhy layoutov Dva základné druhy layoutov: pevný a voľný Pevný layout: Pevne zadaná šírku (width) svojich elementov. Voľný layout: Šírka niektorých elementov záleží od veľkosti okna prehliadača. Pozor! Aj pevný layout je pohyblivý - veľkosť písma, rôzne mierky pri grafických elementoch (obrázky, videa).

5 Pevný layout Ciele: trojstĺpcový layout, všetky stĺpce majú pevnú šírku usporiadanie na stránke nezáleží na poradí v kóde , rovnako dlhé stĺpce

6 1-2-3: HTML Stĺpce sú v rovnakom poradí na stránke ako v kóde. <div id="container"> <div id="head"></div> <div id="content"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> <div id="foot"></div> </div>

7 1-2-3: CSS #container { width: 960px; margin: 0 auto; #content div { float: left; #center { width: 560px; #left, #right { width: 200px; background-color: #ccc; #foot,#head,#content { clear:both;

8 clear: both; VŽDY, keď máme nejaké elementy, ktoré majú nastavené float, tak musíme zabezpečiť, aby nejaký element, ktorý nasleduje neobtekal tieto predchádzajúce elementy. To zabezpečí clear:both, v našom prípade nastavený pre #foot. Často sa na tento účel používa trieda, ktorej nastavíme "neviditeľnosť" - nulové marginy, výšku a pod. a má práve clear:both. Ak chceme byť sémantický, použijeme ako tento oddeľovací prvok tag <hr /> s touto triedou.

9 Výsledok

10 2-1-3: HTML Obsah je na v kóde prvý. <div id="container"> <div id="head"></div> <div id="content"> <div id="left-cont"> <div id="center"></div> <div id="left"></div> </div> <div id="right"></div> </div> <div id="foot"></div> </div>

11 2-1-3: CSS K pôvodnému kódu pridáme ešte jednú definíciu (na koniec). #content div div { float: right; Poznámka: Aj na tomto môžeme vidieť výhody využívania netriviálnych selektorov v CSS.

12 Výsledok...to isté

13 Na čo je to potom dobré? Toto usporiadanie sa hodí "užívateľom", ktorí nepozerajú na grafické usporiadanie, ale na obsah. A pre nich platí, že čo je na stránke "skôr" (myslí sa v obsahu), tak to je dôležitejšie. Príklady: jednoduchšie prehliadače (mobil, tlačiareň, TV, ovládač na TV...) hlasové čítačky vyhľadávače, programové spracovanie

14 Výška stĺpcov Layout je na webe pohyblivý a výšku nevieme nastaviť elementom nejako "dynamicky", teda podľa výšky iných ako vnútorných elementov. height: 100% je problém - k čomu tých 100% referuje? Jednoduché riešenie: faux columns

15 Faux columns Čo to znamená, že sú stĺpce rovnako vysoké?...ak im dáme background-color, tak výška zafarbených elementov bude rovnaká... Tak im to zafarbenie dajme! Zjavne chceme, aby všetky tri stĺpce mali výšku spoločného nadradeného elementu - v našom prípade #content. Preto dáme #content vlastnosť background-image, o malej výške (stačí aj 1px) a potom zafarbený podľa šírky stĺpcov. Stĺpce teda nebudú rovnako dlhé, avšak budú vyzerať, že sú, čo je skoro vždy dostatočné riešenie.

16 Konečný výsledok

17 Mriežka V súčasnosti populárnou aplikáciou pevného layoutu je mriežka (v angličtine grid ). Ide o rozdelenie stránky na mriežku s pevnou šírkou jedného poľa, do ktorej sú vsádzané jednotlivé elementy. Najčastejšie sa používa šírka mriežky 960px (mnoho deliteľov). Vhodný web gs. Mriežku možno vytvoriť pomocou mnohých CSS frameworkov, napr. blueprintcss.

18 Príklad na mriežku

19 Voľný layout Rozdiely oproti pevnému: šírka nastavená v percentách - prispôsobenie sa veľkosti okna ťažšie vyladenie, viac kódu viac problémov, menej jednoduchých riešení box model Ciele: nastavenie pre maximum možností, či je šírka okna 400px, 800px alebo 1900px usporiadanie pevné okraje holy grail?

20 Čo potrebujeme naviac oproti pevnému min-width určí minimálnu šírku elementu max-width podobne maximálna šírka záporný margin

21 Záporný margin Záporny margin je jeden z najsilnejších nástrojov CSS, ktorý dokáže vyriešiť množstvo problémov - nad rámec tejto prednášky. Ako funguje: Margin je okraj okolo blokového elementu, na ktorý sa môžu prilížiť ostatné elementy. Z tejto definície vyplýva, že negatívny margin umožní, aby sa okolité elementy priblížili na zápornú hodnotu, t.j. tieto elementy sa budú prekrývať: <div style="float:left;">black</div> <div style="margin:5px px;">blue</div>

22 Záporný margin 2 Teraz si predstavme, že dáme záporný margin rovnajúci sa šírke elementu. Čo sa stane? Šírka elementu, ktorá je potrebná na výpočet, či tento element môže obtekať (alebo byť obtekaný) je 0. => to znamená, že obteká vždy Preto ak použijeme konštrukciu: <div style="width:70%;margin:0 auto;"> <div style="float:left; padding-right:150px"></div> <div style="width:150px; margin-right:-150px;"></div> </div> Tak získame voľný layout o 2 stĺpcoch, z toho dokopy budú zaberať 70% stránky a ten druhý bude mať 150px.

23 Voľný layout: HTML Splňuje 2-1-3, #left a #right sú pevné, #container má šírku v %. <div id="container"> <div id="head"></div> <div id="content"> <div id="center"></div> <div id="left"></div> </div> <div id="right"></div> <div id="foot"></div> </div>

24 Voľný layout: CSS #container { width: 70%; min-width: 550px; max-width: 960px; margin: 0 auto; #container div { float: left; #content { padding-right: 150px; #content div { float: right; #center { padding-left: 200px; #left{ width: 200px; margin-left: -200px; #right{ width: 150px; margin-left: -150px; #foot,#head { width: 100%; clear: both;

25 Problémy max/min-width nefunuje v <= IE6 min-width: dá sa vyriešiť cez záporny margin a border so šírkou rovnou min-width faux columns - s trochou hrania sa s pomermi a poziciovaním pozadia sa to občas dá, no nie vždy (pri dvoch stĺpcoch vždy). Existuje aj riešenie s naozaj rovnako dlhými stĺpcami - v zásade všetkým stĺpcom nastavíme maximálny paddingbottom a potom margin-bottom na záporné maximum. box-model - ak chceme v pevnom layoute padding, tak jednoducho odpočítame od width. Tu musíme použiť nový div. Táto metóda "obchádzania" box-modelu sa volá matrioška. div-ný kód - skôr technická výstraha: každý div musí mať opodstatnenie

26 Holy grail Súvisí s poslednou pripomienkou - ide o voľný layout s dvoma pevnými okrajovými stĺpcami na minimum div-ov v poradí a mal by to byť ultimate layout. Teda v skratke ide o CSS kód ku konštrukcii: <div id="container"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> Jediný problém je, že nájsť ten istý pre všetky relevantné prehliadače je skutočne porovnateľné s hľadaním holy grail. Spraviť ho pre najnovšie verzie súčasných prehliadačov je však celkom jednoduché (ten má problém v IE7).

27 Taby Najprv HTML - štandardné menu <ul id="menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>

28 Základ CSS Vypneme odrážky, nastavíme rozloženie položiek do riadku a odkazy zobrazíme ako block. ul#menu { list-style-type:none; ul#menu li { list-style-type:none; float:left; ul#menu li a { display:block;

29 Sliding doors (SD) Technika na vytvorenie pozadí elementov, ktoré majú rôznu šírku, no rovnaké okraje. Spočíva v použití dvoch obrázkov - dverí: Veľké "dvere" zabezpečia dostatočnú veľkosť pozadia a menšie dokreslia pozadie do úplnosti.

30 Implementácia SD v CSS Predpoklad: menšie "dvere" majú šírku 15px, veľké sú dosť dlhé. HTML CSS <div id="outer"> <div id="inner"> Text </div> </div> Výsledok Text #outer { background: transparent url("left.png") left top no-repeat; margin-right: 15px; #inner { background: transparent url("right.png") right top no-repeat; margin-right: -15px;

31 Rozšírenie CSS pre taby ul#menu li { list-style-type:none; float:left; background: transparent url("left.png") left top no-repeat; margin-right: 15px; ul#menu li a { display:block; background: transparent url("right.png") right top no-repeat; margin-right: -15px; Teraz doplníme :hover štýly. Potrebujeme doplniť príslušné obrázky, kvôli čomu trošku odbočíme.

32 CSS Sprites Technika, pri ktorej umiestnime viac grafických prvkov do jedného súboru. Dobré na rýchlejšie načítavanie (kopa malých sa často načíta pomalšie) a istota, že máme naraz načítané všetky stavy elementu (napr. rollover, active a pod.). Potom už pri vložení pozadia iba zadáme záporné súradnice časti obrázka (nezadávame súradnice grafického prvku, ale kde bod kde má "začať" pozadie). Príklady: Na taby Facebook CSS Sprite

33 Rollover štýly Chceme aby sa menilo aj pozadie <li>, preto selektory: ul#menu li:hover { background-position: left -40px; ul#menu li:hover a { background-position: right -40px; Výsledok...a tým sme hotoví...skoro.

34 Problémy a poznámky 1 IE7 a IE6 negative margin bug Ak vnútorný element vystúpi mimo elementu pomocou záporného marginu, tak presahujúca časť je odrezaná. Vyriešime to podmienkovými komentármi - bežný spôsob opravy bugov pre IE.  Zoom mu pridá haslayout, čo je konečne v IE8 vynechaná "vlastnosť" a position zaručí, že sa prečnievajúci obsah neodreže.

35 Problémy a poznámky 2 Veľkosť dverí Pozor na to, aby veľké "dvere" boli dostatočne veľké a to na šírku, aj na výšku (ako spomínané na začiatku, pohyblivý layout). Jeden kb, čo na to pôjde je zanedbateľný oproti hlúpej chybe spôsobenej dlhou položkou v menu. li:hover V IE6 samozrejme bez pomocného Javascriptu nefunguje hover na iné veci ako na <a>. Keďže v oboch naších vlastnostiach je hover na li, tak v IE6 to nebude veľmi vadiť. Ak chceme podporu aj na IE6, tak musíme vložiť do <a> element <span> a príslušne upraviť CSS.

36 Nahradenie textu obrázkom Toto je problém, ktorý má veľa zlých riešení a mnoho ich je takých, že človeka hneď napadnú. Prečo nie display: none a visibility: hidden? Ak vypneme obrázky, alebo ich nemáme zobrazené vôbec (čítačky), tak ani text nebude zobrazený. Podobne nie position:relative;left:-2000px;

37 Pixyho riešenie HTML <h1>praktické použití CSS<span></span></h1> CSS (bez rozmerov nahradzujúceho obrázka - obe elementy by bolo treba nastaviť na tieto rozmery) h1 { position: relative; overflow: hidden; h1 span { display: block;position:absolute; top:0;left:0; background-image: url("obrazok.gif"); z-index:1;

Databázové systémy. SQL Window functions

Databázové systémy. SQL Window functions Databázové systémy SQL Window functions Scores Tabuľka s bodmi pre jednotlivých študentov id, name, score Chceme ku každému doplniť rozdiel voči priemeru 2 Demo data SELECT * FROM scores ORDER BY score