Centrování, Box model, Plovoucí fotogalerie Ing. Jiří Štěpánek

 Počáteční problém: vycentrovat blokový element zadané šířky.  V XHTML není 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

#obal #centrovanybox #obal { text-align: center; } #centrovanybox { margin: 20px auto 20px auto; text-align: left; }

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

 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 #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; }

 Č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

Foto Popisek fotky Odkaz na detail Obalový kontejner obrázek Obyčejný text, span, odstavec…

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

Ř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