Dynamicky tieňovaný CSS layout

Dynamicky tieňovaný CSS layout Dynamické tieňovanie CSS layoutu znamená, že môžete ľubovolne meniť šírku stránky a nemusíte zmeniť obrázok, ktorý vytvára tieňový efekt. Väčšina webdesignérov používa pre tieňový efekt „jeden” dlhý obrázok, čo im znemožní zväčšenie šírky, a tak sú nutení používať fixnú šírku. Takýto layout musí podporovať aj 100% výšku, čo zabezpečuje predĺženie tieňa až na absolútny spodok stránky.

XHTML kód (index.xhtml)

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='sk'>
	<head>
		<meta http-equiv='Content-Type' content='application/xhtml+xml; charset=utf-8' />
		<meta http-equiv='Cache' content='no-cache, must-revalidate' />
		<link rel='stylesheet' href='style.css' type='text/css' media='screen' />
		<title>Untitled</title>
	</head>
	<body>
	<div class='main'>
		<div class='main-left'></div>
		<div class='main-center'>sem vložte váš obsah&hellip;</div>
		<div class='main-right'></div>
	</div>
	</body>
</html>

Celá štruktúra stránky je vytvorená pomocou štyroch elementov <div>. Každý má definovanú jednu triedu:

div.main: Pomocou tejto triedy môžeme nastavovať šírku a výšku stránky + si môžeme pridať akékoľvek pozadie (napríklad vodotlač).
div.main-left a div.main-right: Tieto dve vytvárajú efekt tieňa. Jedna vľavo a druhá vpravo. Obe majú 100% výšku, aby boli pretiahnuté až po spodok stránky.
div.main-center: Tu sa zobrazuje obsah stránky a záleží už len na vás aký kód sem napíšete. Má 100% výšku a automatickú šírku.

Určite nezabudnite napísať aj XML deklaráciu na začiatku stránky. Tým ponecháte Internet Explorer 6 v quirks mode.

CSS kód (style.css)

* { margin:0; padding:0; }
html, body {
	font-family: sans-serif;
	font-size: 12px;
	background: #a0afce;
	text-align: center;
	height: 100%;
}

div.main {
	width: 75%;
	min-height: 100%;
	_height: 100%;
	_overflow-x: hidden;
	background: white url('bg.gif') center center;
	text-align: left;
	margin: auto;
	position: relative;
}

div.main-left {
	width: 105px;
	height: 100%;
	background: url('left.png') repeat-y;
	top: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}

div.main-right {
	width: 105px;
	height: 100%;
	background: url('right.png') repeat-y;
	top: 0;
	bottom: 0;
	right: 0;
	_right: -1;
	position: absolute;
}

div.main-center {
	width: auto;
	height: 100%;
	margin: 0 105px 0 105px;
	padding: 10px;
}

html, body: Tagy html a body majú spoločne zadané vlastnosti. Najdôležitejšou z nich je height:100%. Týmto sme dosiahli, že potomkovia body, teda všetky viditeľné elementy budú môcť používať 100% výšku.
div.main: Tu si môžeme zvoliť ľubovolnú šírku stránky. Je dôležité nastaviť minimálnu výšku elementu na 100%. Pre Internet Explorer 6 budeme musieť použiť CSS hack _height. Kvôli bugu v tomto prehliadači (posunutie o 1px, ktoré sa bude prejavovať v div.main-right) je použitý ešte jeden CSS hack, ktorý ukryje všetko, čo bude opúšťať okraj obrazovky v horizontálnom smere _overflow-x.
div.main-left: Tu je definovaná šírka ľavého tieňa, ktorá by sa mala zhodovať so šírkou obrázku. Nastavená je opäť aj 100% výška, aby sa tieň tiahol až na spodok stránky.
div.main-right: Tu platí to isté čo pri div.main-left, akurát je tu použitý posledný CSS hack _right, ktorý je nastavený na -1px, kvôli 1px bugu v Internet Explorere.
div.main-center: Tento posledný element má automatickú šírku a 100% výšku. Odsadenie margin bude nastavené zľava a zprava na rovnakú šírku akú mali div.main-left a div.main-right.

Minimálne požiadavky

Kompletné riešenie layoutu bolo testované v nasledovných prehiladačoch.

Opera 9
Mozilla Firefox 2
Internet Explorer 6
Internet Explorer 7 nebol testovaný!

Download

CSS Layout [9,69 kB]

Pretože Internet Explorer nepodporuje XHTML, ponechal som hlavnému súboru príponu .html. Pokiaľ chcete zasielať správny Content-Type – application/xhtml+xml, musíte tak učiniť pomocou skriptovacích jazykov, nastavením servera alebo premenovaním súboru index.html na index.xhtml.