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ů:

<style type=“text/css“>
<!–

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>:

<div class=“main“>
<div class=“content“>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>

14. Ukončete tělo HTML dokumentu pomocí uzavírací značky </body> a pomocí uzavírací značky </html> ukončete celý HTML dokument:

</body>
</html>

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Předchozí článek Fragmentované písmo
Další článek MySQL a rozhraní ODBC

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Michal Pospiech

    Říj 17, 2009 v 22:40

    Není toto trošku brutální řešení? Co třeba margin: 0 auto;?

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *