XHTML kod (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 vlozte vas obsah…</div> <div class='main-right'></div> </div> </body> </html> Cela struktura stranky je vytvorena pomocou styroch elementov <div>. Kazdy ma definovanu jednu triedu: div.main Pomocou tejto triedy mozeme nastavovat sirku a vysku stranky + si mozeme pridat akekolvek pozadie (napriklad vodotlac). div.main-left a div.main-right Tieto dve vytvaraju efekt tiena. Jedna vlavo a druha vpravo. Obe maju 100% vysku, aby boli pretiahnute az po spodok stranky. div.main-center Tu sa zobrazuje obsah stranky a zalezi uz len na vas aky kod sem napisete. Ma 100% vysku a automaticku sirku. Urcite nezabudnite napisat aj XML deklaraciu na zaciatku stranky. Tym ponechate Internet Explorer 6 v quirks mode. CSS kod (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 maju spolocne zadane vlastnosti. Najdolezitejsou z nich je height:100%. Tymto sme dosiahli, ze potomkovia body, teda vsetky viditelne elementy budu moct pouzivat 100% vysku. div.main Tu si mozeme zvolit lubovolnu sirku stranky. Je dolezite nastavit minimalnu vysku elementu na 100%. Pre Internet Explorer 6 budeme musiet pouzit CSS hack _height. Kvoli bugu v tomto prehliadaci (posunutie o 1px, ktore sa bude prejavovat v div.main-right) je pouzity este jeden CSS hack, ktory ukryje vsetko, co bude opustat okraj obrazovky v horizontalnom smere _overflow-x. div.main-left Tu je definovana sirka laveho tiena, ktora by sa mala zhodovat so sirkou obrazku. Nastavena je opat aj 100% vyska, aby sa tien tiahol az na spodok stranky. div.main-right Tu plati to iste co pri div.main-left, akurat je tu pouzity posledny CSS hack _right, ktory je nastaveny na -1px, kvoli 1px bugu v Internet Explorere. div.main-center Tento posledny element ma automaticku sirku a 100% vysku. Odsadenie margin bude nastavene zlava a zprava na rovnaku sirku aku mali div.main-left a div.main-right. Minimalne poziadavky Kompletne riesenie layoutu bolo testovane v nasledovnych prehiladacoch. Opera 9 Mozilla Firefox 2 Internet Explorer 6 Internet Explorer 7 nebol testovany! Download CSS Layout [9,69 kB] Pretoze Internet Explorer nepodporuje XHTML, ponechal som hlavnemu suboru priponu .html. Pokial chcete zasielat spravny Content-Type – application/xhtml+xml, musite tak ucinit pomocou skriptovacich jazykov, nastavenim servera alebo premenovanim suboru index.html na index.xhtml. Ostatne Vysledok si mozete prezriet tu. Obrazky tienov su pouzite z layoutu pre redakcny system phpRS, ktory je vydavany pod GNU/GPL licenciou.

Dynamicky tieňovaný CSS layout Návrat

Dynamicky tieňovaný CSS layout

Speak introduction
Speak full