Nech sa páči...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Příklad sloupcového designu pozicováním</title>
<style>
#obsah { position: absolute; width: 500px; top: 120px; left: 150px }
#patka { width: 100% }
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 120px }
#levy { position: absolute; width: 150px; top: 120px; left: 0px }
#pravy { position: absolute; width: 110px; top: 120px; left: 650px }
#levy { background-color: green; color: white; border-style: none; border-width:
medium }
#levy h3 { color: black }
#levy a:link { color: yellow }
#levy a:visited { color: silver }
#levy a:hover { color: red }
#pravy { background-color: green; color: white; border-style: none; border-width:
medium }
#hlavicka, #patka { background-color: navy; color: yellow; border-style: none; border-width:
medium }
#vtipek { position: absolute; width: 100px; top: 90px; left: 570px; height: 100px;
text-align: center; background-color: yellow; z-index: 1;
border-style: none; border-width: medium; }
#vtipek { filter: Alpha(opacity=90, style=3); -moz-opacity: 0.9; opacity: 0.9; }
div { padding: 6px }
* {moz-box-sizing: border-box;} /* pocitani marginu a paddingu jako v Exploreru */
</style>
</head>
<body>
<p> </p>
<div id="obsah">
<h1>Příklad pozicování</h1>
<p>Sloupce na této stránce jsou postaveny pomocí CSS pozicování. Dá se to
udělat i tabulkami, ale ty mají nevýhodu, µe se pomalu zobrazují. Oddíly
pozicované pomocí CSS se na rozdíl od tabulek zobrazují hned, jak se
načítají.</p>
<p>Dal±í perfektní věcí je moµnost načítání vlastního obsahu (tohoto textu)
jako prvního. Teprve aµ se načte vnitřek prostředního sloupce s
důleµitým obsahem, začne se načítat grafická hlavička a levý sloupec s
odkazy.</p>
<p>Toto je pouze nedokonalá ukázka toho, co lze s pozicováním vykouzlit. Pro
praktické pouµití je potřeba lépe ji odladit podle aktuálních potřeb.</p>
<p>Popis stavby a HTML syntaxe je v textu o <a href="../css/css-design-position.html">
sloupcích pomocí pozicování</a>. Pro detailní pochopení příkladu si
zobrazte zdroj.</p>
<p id="patka">Toto je patka.</div>
<div id="hlavicka">
<h3>Hlavička s libovolným obsahem</h3>
<p>Pro Nestcape je dobré mít vý±ku obsahu přibliµně stejnou jako vý±ka
objektu, aby vykreslil pozadí.</p>
<p> </div>
<div id="levy">
Levý sloupec
<p>Zde se obvykle vyskytuje hodně odkazů</p>
<p><a href="../css/css-design-position.html">Jak postavit tuhle stránku</a></p>
<p><a href="overflow-layout.html">Dal±í příklad pozicovaného layoutu</a></p>
<p><a href="http://www.gawain.pc-slany.cz">Gawain</a></p>
<p><a href="http://dusan.pc-slany.cz">Yuhů</a></p>
<p><a href="http://dusan.pc-slany.cz/rebusy/">Rébusy</a></p>
<h3>Nadpis jinou barvou</h3>
</div>
<div id="pravy">
Pravý sloupec
<p>Zde obvykle bývají jiné odkazy.</p>
<p>Odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz</p>
<p>odkaz jinam
</div>
<div id="vtipek">
Objekt ilustrující moµnosti překrývání
</div>
</body>
