Sám jsem sice zastáncem toho, že okno prohlížeče nebá být bráno jako celková pracovní plocha stránek, nicméně občas narazíte na požadavek, případně sami uznáte za vhodné umístit obsah doprostřed obrazovky. Může jít například o případ, kdy pracujete s poměrně malým textovým obsahem a zobrazení stránek klasicky, tzn. odshora obrazovky dolů by na větších monitorech nevypadalo příliš dobře.
Na podobný problém jsem před relativně nedávnou dobou narazil. Tvořil jsem stránky Kadeřnictví LaVida a potýkal jsem se s problémem, že sice disponuji poměrně dost velkým množstvím nejrůznějších ilustračních obrázků, ale se skoro žádným textem. Z toho důvodu jsem se rozhodl pro toto kontroverzní (i když poměrně efektní) řešení.
Problém nabízených řešení
Možná Vás to překvapí, ale nikde jsem nenarazil na řešení, které by stoprocentně fungovalo. Našel jsem sice několik řešení, které se jako funkční tvářily, ale problém nastal v okamžiku, kdy jste začali zmenšovat okno.
Všechna řešení, která jsem objevil totiž počítají s tím, že okno prohlížeče je větší, než box, který se má centrovat. To je sice ve většině případů pravda, ale není to jisté. Pokud se okno zmenší pod velikost boxu, přestane být přístupný levý horní roh (viz např. řešení Marka Prokopa ze Sovy v síti)
Mé níže uvedené řešení tento problém řeší pomocí několika vnořených boxů:
<div id="container">
<div id="container-horizontal">
<div id="container-in">
<div id="content"> ... vlastní obsah ...</div>
</div>
</div>
</div>
Výpis XHTML kódu je poměrně jednoduchý
Dá se říct, že container se stará o to, aby byl vždy viditelný i levý horní roh, container-horizontal umístí levý horní roh boxu doprostřed obrazovky a container-in posune levý horní roh o poloviční šířku a výšku nahoru a doleva, tozn. že provede vlastní vycentrování. Div content už nemá pro náš příklad význam, stará se jen o dodatečné zformátování.
CSS kód potom vypadá následovně. Méně zkušení kodéři nechť si laskavě povšimnou berličky, která simuluje vlastnosti min-width a min-height, které MSIE nezná.
body, html {
height:100%;
border:0;
padding:0;
margin:0;
text-align:center;
}
#container {
min-width:600px;
min-height:400px;
width:100%;
height:100%;
width:expression(document.body.clientWidth < 600?
"600px": "100%" ); /* pro IE */
height:expression(document.body.clientHeight < 400?
"400px": "100%" ); /* pro IE */
position:absolute;
top:0;
left:0;
}
#container-horizontal {
text-align:left;
margin:auto;
position:absolute;
top:50%;
left:50%;
}
#container-in {
position:absolute;
top:-200px;
left:-300px;
width:600px;
height:400px;
background:black;
overflow:auto;
}
CSS kód, který se postará o rozložení stránky
A je to...
Na závěr snad zbývá dodat jen odkaz na funkční příklad. Můžete libovolně měnit velikost okna, celý obsah boxu bude stále přístupný. Testováno v prohlížečích MSIE, Mozilla Firefox a Opera.
Samozřejmě doporučuji se nejraději blokům centrovaným na střed stránky vyhýbat. Možná ale budete řešit stejné dilema jako já a toto řešení Vám snad ušetří několik perných chvilek, které budete moci věnovat příjemnější zábavě. Pozdravujte ji ode mě.
