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í:

  1. hlavička
  2. pravý panel
  3. levý panel
  4. 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.).

Blok je u levého okraje Blok je vycentrován i s textem Blok je vycentrován, text je u levého okraje bloku
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 divem, 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 ÇelikaBox Model Hack).

Objasnění box-modelu

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.

Stáhnout šablonu

Vloženo: 1.1.2004


Copyright © 2004 Vít Dlouhý, Všechna práva vyhrazena ®
XHTML 1.1, CSS 2.1, Dogma W4