Toto je nejjednodušší příklad centrování celé stránky pomocí CSS. Vnitřní část stránky (kde se nachází tento text) se plynule rozšiřuje spolu s šířkou okna prohlížeče a současně se rozšiřují i oba svislé okraje. Je to způsobeno tím, že okraje mají stanovenou šířku 15% z šířky okna prohlížeče a na vnitřní část tedy vždy zbývá 70%.
Zdrojový kód je plně v souladu s normou XHTML 1.0 a CSS 2 a měl by fungovat ve všech prohlížečích s alespoň částečnou podporou CSS 1. Příklad byl testován v Opeře 5.12 a IE 5.0. V obou prhlížečích je funkční, nicméně v IE 5.0 chybí spodní okraj (analogický hornímu).
Poznatky z dalších prohlížečů uvítáme na adrese redakce@sovavsiti.cz.
Celý obsah této stránky je "zabalen" do prvku <div>
s unikátním atributem id
. Kód vypadá nějak takto:
<div id="page"> ... zde je obsah stránky ... </div>
V definici CSS pak jsou definována pravidla pro <body>
dokumentu a pro <div>
s atributem id = page
. Vypadá to takto:
body { margin: 0; padding: 0; color: #000; background : #ffc none; } #page { margin: 20px 15%; padding: 1em; border: 2px solid #cc9; color: #000; background : #fff none; }
Nevyhovuje vám plovoucí šířka vnitřního obsahu stránky? Zde je řešení s pevnou šířkou.