Zarovnání prezentace na střed pomocí CSS

4. března 2002

•

Věrní čtenáři Interval.cz si možná pamatují můj starší článek o různých tipech při používání tabulek. V tomto článku byl také tip, jak zarovnat prezentaci na střed okna prohlížeče pomocí dvou tabulek. Tento tip má ovšem své mouchy – využívá nestandardního atributu „height“ v tabulce. Záporem je také použití tabulek samotných. Ovšem, proč v době CSS nevyužít CSS?

Ještě předtím, než začnete číst tento článek, prostudujte si ukázku a vyzkoušejte si, jak funguje, změňte si velikost okna prohlížeče. Příklad je samozřejmě funkční pouze v Internet Exploreru, Mozile a Opeře. V zastaralém prohlížeči Netscape 4.xx pochopitelně nefunguje.

1. Vytvořte začátek struktury HTML dokumentu – definujte typ dokumentu a použitou verzi jazyka HTML (!Doctype), dále uvoďte začátek HTML dokumentu (<html>) a začátek hlavičky dokumentu:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>

2. Za párovou značku <title> doplňte titulek stránky Prezentace uprostřed, který se bude objevovat v horní liště prohlížeče a za tento text vložte uzavírací značku </title> pro ukončení titulku. Nesmí chybět informace ve značce <meta> o použitém kódování textu (windows-1250) a nakonec ukončete hlavičku dokumentu pomocí uzavírací značky </head>:

<title>Prezentace uprostřed</title>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
</head>

3. Vložte párovou značku <body>, která uvozuje samotné tělo HTML dokumentu:

<body>

4. Vložte značku <style>, která říká prohlížeči, že nyní budou následovat jednotlivé definice stylů. Za touto značkou nezapomeňte vložit komentář <!- –, který definici stylu skryje před prohlížeči bez podpory kaskádových stylů:

5. Pro selektor body nadefinujte pravidlo obsahující vlastnost background-color s hodnotou #d8d8d8, které zajistí šedý podklad stránky:

body {
background-color:#d8d8d8;
}

6. Dále si vytvořte třídu, kterou pojmenujete jako main a ve které postupně nadefinujete všechny potřebné vlastnosti CSS k tomu, abyste zarovnali prezentaci na střed okna prohlížeče. V tomto kroku si konkrétně stanovíte rozměry prezentace. Využijete tedy vlastnosti width a height, pomocí kterých určíte rozměr prezentace na 400 x 150 pixelů:

.main {
width: 400px;
height: 150px;

7. Pokračujte v definici vlastností pro třídu main. Vlastnost position s hodnotou absolute zajistí absolutní pozicování prvku na stránce vůči okrajům stránky. Pomocí dalších dvou vlastností top a left určíte absolutní pozice prvku na stránce a použitím hodnoty 50 % pro oba tyto prvky docílíte toho, že levý horní okraj prezentace bude umístněn přesně ve středu okna prohlížeče:

position: absolute;
top: 50%;
left: 50%;

8. Protože znáte přesně rozměry prezentace (400 x 150 px) a také víte, že nyní je levý horní roh prezentace umístněn přesně ve středu okna prohlížeče, stačí pomocí zastřešující vlastnosti margin posunout horní a levý roh o polovinu rozměru prezentace, aby byla celá prezentace přesně ve středu:

margin: -75px 0px 0px -200px;

9. Nyní vyřešíte problém s větší délkou obsahu prezentace. Pokud totiž bude například text delší, než oněch definovaných 150 pixelů, nebudou vám sedět jednotlivé rozměry a prezentace nebude umístněna na střed okna prohlížeče ve vertikálním směru. Proto použijete vlastnost overflow s hodnotou auto, která zajistí, že v takovém případě bude možné prezentací rolovat a rozměry tak zůstanou zachovány:

overflow: auto;

10. Nyní ještě přidejte vlastnost background-color s hodnotou #ffffff, která zajistí, že obsah prezentace bude zobrazen bílou barvou:

background-color:#ffffff;
}

11. Ještě je potřeba ošetřit pro Internet Explorer problematické určování šířky a výšky boxu. O co se jedná, se zmiňuje můj předchozí článek na adrese www.interval.cz/r-article.asp?id=800, takže jej nemá smysl znovu duplikovat. V podstatě jde o to, že pokud jsou v boxu použity vlastnosti padding a border (a padding obvykle použit je, protože odsazuje obsah od orámování), tak Internet Explorer hodnoty těchto dvou vlastností zahrne do hodnoty ve width, místo toho, aby je správně k hodnotě definované ve width přičetl. Výsledkem jsou odlišné rozměry boxu. Řešení je jednoduché, samotný obsah se vloží do dalšího, vnořeného prvku <div>. Vytvoříte tedy třídu nazvanou jako content a vložíte do ní vlastnosti padding a border:

.content {
padding: 10px;
border: 1px solid black;
}

12. Uzavřete poznámku a ukončete celou definici stylu:

–>
</style>

13. Do stránky vložte párovou značku <div>, a do ní vložte atribut class s hodnotou stred. Definice třídy střed se tak použije pro tento <div>. Dále vložíte nějaký obsah stránky (náš neutrální text) a vložíte ukončovací značku </div>: