Centrovn Box model Plovouc fotogalerie Technologie pro publikovn

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

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

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

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 Vlastnost width ř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

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

Interpretace box modelu #box { width: 300 px; padding: 20 px; border: 10 px; margin: 25 px } #box { width: 300 px; padding: 20 px; border: 10 px; margin: 25 px; _width: 360 px; 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

Interpretace box modelu Řešení pomocí tzv. Matrjošky (autorem je P. Staníček - PIXY): div. obal { width: 300 px; margin: 25 px; padding: 0; border: 0; } div. box { padding: 20 px; border: 10 px; } HTML kód pro řešení pomocí Matrjošky: <div id="obal"><div id="box">Obsah bloku</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

3 px bug ve starších verzích IE 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. � #floating. Box { float: left; width: 100 px; } #content. Box { margin-left: 100 px; } /* nasledujici definice jsou pouze pro IE-win */ * html #floating. Box { margin-right: -3 px; } * html #content. Box { height: 1%; margin-left: 0; } Technologie pro publikování na webu 1, Ing. Jiří Štěpánek

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

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

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

Ř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

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