Přeskočit hlavičku [accesskey=1]
Dvousloupcová šablona s pevnou šířkou
Nacházíte se zde: Novinky » Články » Dvousloupcová šablona s pevnou šířkou
Ukázka jednoduché, vycentrované dvousloupcové šablony s hlavičkou a patičkou. Podívejte se na výsledek.
Testování prohlížečů
Šablona byla odzkoušena na prohlížečích Internet Explorer 6, Mozilla 1.6b a Opera 7.21
— všude fungovala naprosto bez problémů. Starší prohlížeče, se špatnou podporou
CSS (Internet Explorer 4.x, Netscape Navigator 4.x), budou od stylů „odříznuty“
direktivou media="all"
— v těchto prohlížečích se zobrazí strukturovaný obsah.
Technické zpracování
Šablona je napsána v XHTML 1.1 (formátování plně obstarává CSS), je dvousloupcová (obsahuje levý a pravý panel), přičemž panel vpravo je hlavní (obsahový), užší levý panel může sloužit např. pro menu. Z důvodu optimalizace stránky pro vyhledavače je důležité, aby byl v kódu fyzicky pravý panel před levým — obsah by totiž měl být co nejvýš, proto stránku tvoří bloky v pořadí:
- hlavička
- pravý panel
- levý panel
- patička
CSS
body { text-align: center; } #main { width: 700px; margin-left: auto; margin-right: auto; text-align: left; } #hlavicka-null { width: 100%; padding: 0; border: 0; } #hlavicka { padding: 10px; border: 1px solid #ccc; background: #eee; } #vpravo-null { width: 500px; float: right; padding: 0; border: 0; } #vpravo { padding: 10px; border: 1px solid #ccc; } #vlevo-null { width: 200px; float: left; padding: 0; border: 0; } #vlevo { padding: 10px; border: 1px solid #ccc; } #paticka-null { clear: both; width: 100%; padding: 0; border: 0; } #paticka { padding: 10px; border: 1px solid #ccc; background: #eee; } hr { display: none }
XHTML
<div id="main"> <div id="hlavicka-null"> <div id="hlavicka"> Hlavička </div> </div> <hr /> <div id="vpravo-null"> <div id="vpravo"> Pravý panel </div> </div> <hr /> <div id="vlevo-null"> <div id="vlevo"> Levý panel </div> </div> <hr /> <div id="paticka-null"> <div id="paticka"> Patička </div> </div> </div>
Použité triky
Centrování v Internet Exploreru
Pokud chcete určitý blok umístit horizontálně přesně doprostřed,
použijte odsazení od levého a pravého okraje: margin-left:auto; margin-right:auto
.
Vycentrování se provede v Mozille a Opeře (viz schéma III.). Internet Explorer bohužel
tento příkaz nezná. Je proto nutné použít malý trik,
využívající jiné chyby (zarovnávání blokových elementů pomocí text-align
):
Nadřazenému prvku (rodiči) nastavte text-align:center
(v našem případě je rodičem sám tag body
).
Vnořeným blokům zadejte text-align:left
.
Co se stane? Zápis text-align:center
se bude aplikovat na
potomka, blok se sice posune doprostřed, ale
všechny texty ve sloupcích se rovněž vycentrují (viz schéma II.), proto u potomků
nastavte ještě text-align:left
(viz schéma III.).
Schéma I., II., III.
Další možnosti centrování shrnuje v článku Centrování s CSS Marek Prokop.
Box-model
Chybnou implementaci tzv. „box-modelu“
v Internet Exploreru jsem ošetřil pomocí triku
Petra Staníčka. Každý div
, kterému nastavuji nenulový padding
nebo border
obalím dalším div
em, který má nastavenu požadovanou šířku a
border:0; padding:0
, vnořená tabulka (potomek) pak šířku přejímá jako width:auto
(netřeba psát, jedná se o implicitní hodnotu). Vše vysvětlí příklad:
#box-null {width:100px; border:0; padding:0} #box {padding:10px; border:1px solid #000} <div id="box-null"> <div id="box"> … </div> </div>
Řešení box-modelů je celá řada, tento postup se mi však zdá nejelegantnější (nejedná se totiž o „hack“, tak jako v případě Tanteka Çelika — Box Model Hack).
Přehlednost bez stylů
V kódu často používám dělení logických celků tagem hr
.
Přidám jej pod hlavičku, na konec levého i pravého panelu. V CSS
ho pak pomocí hr {display:none}
„zneviditelním“.
Význam tohoto počínání se projeví při vypnutí CSS - logické celky jsou odděleny
vodorovnou čarou — i bez stylů tak lze udržet stránku přehlednou.
Vloženo: 1.1.2004