Technologie pro publikování na webu 1

1. Centrování, Box model, Plovoucí fotogalerie Technologie pro publikování na webu 1 Ing. Jiří Štěpánek

2. Centrování boxu • Počáteční problém: vycentrovat blokový element zadané šířky. • V XHTML není <center> povoleno (v HTML ano) • Řešení: použití vlastnosti text-align: center • Obalový box musí mít text-alig:center • Centrovaný box musí mít nastaven levý a pravý margin na hodnotu auto Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

3. Centrování boxu #obal #centrovanybox #obal { text-align: center; } #centrovanybox { margin: 20pxauto20pxauto; text-align: left; } Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

4. Box model • Označuje způsob výpočtu místa, které zabírá určitý blokový element • = součet hodnot width + padding + border + margin • Ve starších verzích IE ( <=5) dochází k odlišnému výpočtu místa Vlastnostwidthředstavuje pouze šířku obsahu daného bloku Vlastnost width se v IE Počítá se jako width + padding + border Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

5. Box model Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

6. Interpretace box modelu #box { width: 300px; padding:20px; border: 10px; margin: 25px } #box { width: 300px; padding:20px; border: 10px; margin: 25px; _width: 360px; } První deklarace boxu je správná, ovšem v IE do verze 6 se zobrazí box jinak veliký, než by měl správně být. Řešení může nabídnout takzvaný podtržítkovýhack – IE totiž vlastnost s prefixem podtržítka formátuje prioritně. Vzniká tak ovšem nevalidní CSS. Nefunguje v IE 7 Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

7. Interpretace box modelu Řešení pomocí tzv. Matrjošky (autorem je P. Staníček - PIXY): HTML kódpro řešení pomocí Matrjošky: div.obal { width: 300px; margin: 25px; padding: 0; border: 0; } div.box { padding: 20px; border: 10px; } <divid="obal"><divid="box">Obsah bloku</div></div> Uvedené techniky není třeba v nových verzích prohlížečů používat Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

8. 3px bug ve starších verzích IE #floatingBox { float: left; width: 100px; } #contentBox { margin-left: 100px; } /* nasledujici definice jsou pouze pro IE-win */ *html#floatingBox { margin-right: -3px; } *html#contentBox { height: 1%; margin-left: 0; } • Ve starších verzích IE se při použití plovoucího boxu obtékaný text automaticky odsazuje o 3 px. • Řešením může být použití formátování naznačené v ukázce – využívá špatné interpretece IE • Často se také problém řeší podmíněným stylováním (podle druhu a verze prohlížeče) ať už na straně klienta nebo serveru. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

9. Plovoucí fotogalerie • Často opakujícím se návrhem je fotogalerie, ve které jednotlivé fotky mají svůj popis, odkaz na detail apod. • Snahou je maximálně využít obsahové části stránky • Při změně šířky obsahové části by se měly boxy s fotografiemi přeuspořádat automaticky Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

10. Plovoucí fotogalerie - box obrázek Foto Obalový kontejner Obyčejný text, span, odstavec… Popisek fotky Odkaz na detail <a> Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

11. Požadované chování MENU MENU Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

12. Řešení Řešení: • Vytvoříme obsahový kontejner pro jednotlivé boxy • V rámci boxů provedeme standardní nastavení CSS dle potřeby. • Každý box bude mít definované pevné rozměry (řeší problém zobrazení fotky na výšku nebo na šířku) • Každý box bude mít vlastnost float: left; Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

13. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek