Třísloupcový layout s pevnou šířkou sloupců
Podívejme se na výsledek v prohlížeči.
Uvedený třísloupcový layout jsou vlastně dva layouty dvousloupcové. Ačkoli 2 × 2 jsou sice 4, my dostaneme layout třísloupcový. Nejprve #obal rozdělíme na dva sloupce: #sloupec-levy a #sloupec-prostredni-pravy, který poté ještě rozdělíme na #sloupec-l a #sloupec-p.
Součet šířek dvojic sloupců je o 2 pixely nižší než šířka sloupce nadřazeného. Je to rezerva, aby se v některém prohlížeči layout náhodou nerozhodil. V moderních prohlížečích by však neměl s přesnou šířkou být problém.
CSS
html {height: 100%; font-size: 62.5%;}
body {
height: 100%;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
min-width: 980px;
margin: 0; padding: 0;
}
.cleaner {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
#hlavicka {
padding: 10px;
border-bottom: 1px solid green;
background: #F0FBDF;
}
h1 {margin: 0; padding: 0;}
p {line-height: 1.8; margin-bottom: 16px;}
/* =============== Trisloupcovy layout =============== */
#obal {
width: 980px;
margin: 50px auto 0 auto;
text-align: left;
border: 1px solid green;
}
#sloupec-levy {
float: left;
width: 220px;
}
#sloupec-prostredni-pravy {
float: right;
width: 758px;
}
#sloupec-prostredni-pravy #sloupec-l {
float: left;
width: 536px;
}
#sloupec-prostredni-pravy #sloupec-p {
float: right;
width: 220px;
}
.obsah {margin: 1em;}
/* =============== Trisloupcovy layout konec =============== */
#paticka {
padding: 10px;
border-top: 1px solid green;
background: #F0FBDF;
}
V HTML kódu je pak #sloupec-levy na konci layoutu, jelikož se do něj je nejčastěji umístěno menu. Vlastní obsah stránek je tak umístěn v kódu dříve, což je dobré z hlediska SEO (Search Engine Optimization). Pokud byste chtěli jiné pořadí sloupců, stačí layout mírně upravit…
Přestože jsem u dvousloupcového layoutu psal, že názvy identifikátorů sloupců je vhodné volit neutrální, tak zde jsem uváděl názvy sloupců podle jejich umístění pro rychlejší zorientování se v layoutu.
XHTML
<div id="obal">
<div id="hlavicka">
<h1>Název webu</h1>
</div>
<div id="sloupec-prostredni-pravy">
<div id="sloupec-l">
<div class="obsah">
<h2>Nadpis druhé úrovně</h2>
<p></p>
<p></p>
</div>
</div> <!-- Konec prostredniho sloupce -->
<div id="sloupec-p">
<div class="obsah">
<h3>Nadpis třetí úrovně</h3>
<p></p>
</div>
</div> <!-- Konec praveho sloupce -->
<div class="cleaner"> </div>
</div> <!-- Konec sloupce obalujiciho prostredni a pravy sloupec -->
<div id="sloupec-levy">
<div class="obsah">
<h3>Nadpis třetí úrovně</h3>
<p></p>
</div>
</div> <!-- Konec leveho sloupce -->
<div class="cleaner"> </div>
<div id="paticka">Text v patičce</div>
</div> <!-- Konec obaloveho divu -->
Testováno v prohlížečích IE 5.5+, Firefox, Opera, Safari, Google Chrome.
Stáhnout uvedené řešení ↓
(ZIP, staženo 5253×)