Transcript Centrování, box model, plovoucí galerie

Centrování, Box model, Plovoucí fotogalerie
Ing. Jiří Štěpánek



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
#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
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):
div.obal {
width: 300px;
margin: 25px;
padding: 0;
border: 0;
}
div.box {
padding: 20px;
border: 10px;
}
HTML kód pro řešení pomocí Matrjošky:
<div id="obal"><div id="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



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.
#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;
}
Technologie pro publikování na webu 1, Ing. Jiří Štěpánek



Č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
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
MENU
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