Třísloupcový fixní layout se stejnou délkou panelů
28. 11. 2005 | Redakce Interval.cz | Pro CSS | Komentáře: 0
Tento třísloupcový layout se zobrazuje ve všech prohlížečích stejně, jeho hlavní výhodou je, že znáte přesnou šírku a na základě toho můžete stanovit absolutně šířku elementů použitých v obsahu. V součastnosti je to jeden z nejpoužívanějších layoutů, většina kodérů již rezignovala na fluidní layouty díky množství problémů, které přinášely při dynamicky generovaném obsahu.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Petr Sládek. Bližší popis najdete v článku Perfect web µpage ;-).
CSS
body, html
{
border: 0px none;
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif !important;
font-size: small !important;
}
.resetovac
{
border: 0px none;
margin: 0px;
padding: 0px;
float: none;
clear: both;
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
}
p, img, table, tr, th, td, h1, h2, h3, h4, h5
{
border: 0px none;
margin: 0px;
padding: 0px;
}
#bodyhlavicka
{
background-color: #ffffcc;
}
#bodypaticka
{
background-color: #ffffcc;
}
#strankahlavicka
{
background-color: #dddddd;
}
#strankapaticka
{
background-color: #dddddd;
}
#strankaobal
{
width: 900px;
margin: 0px auto 0px auto;
}
#strankaobal1
{
background: url('left.gif') top left repeat-y;
}
#strankaobal2
{
background: url('right.gif') top right repeat-y;
}
#levypanelobal
{
float: left;
width: 170px;
margin: 5px 0px 5px 5px;
padding: 2px 2px 2px 2px;
font-size: 90%;
}
#pravypanelobal
{
float: right;
width: 130px;
margin: 5px 5px 5px 0px;
padding: 2px 2px 2px 2px;
font-size: 85%;
}
#hlavnipanelobal
{
padding: 5px 150px 5px 190px;
}
#hlavnipanelhlavicka
{
background-color: #dddddd;
}
#hlavnipanelpaticka
{
background-color: #dddddd;
}
CSS pro MSIE
#levypanelobal
{
margin-left: 2px;
}
#pravypanelobal
{
margin-right: 2px;
}
XHTML
<html>
<body>
<div id="strankaobal">
<div id="strankaobal1">
<div id="strankaobal2">
<div id="strankahlavicka">
<h1>Hlavička</h1>
</div>
<div id="strankavnitrek">
<div id="strankavnitrek2">
<div id="levypanelobal">
<div id="levypanelvnitrek">
<h1>Levý panel</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<div id="pravypanelobal">
<div id="pravypanelvnitrek">
<h1>Pravý panel</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
<div id="hlavnipanelobal">
<div id="hlavnipanelvnitrek">
<div id="hlavnipanelhlavicka">
<h1>Hlavička obsahu</h1>
</div>
<h1>Nadpis 1</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<hr />
<div id="hlavnipanelpaticka">
<h1>Patička obsahu</h1>
</div>
</div>
</div>
<div class="resetovac"> </div>
</div>
</div>
<div id="strankapaticka">
<h1>Patička stránky</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Další aktuální články na interval.cz
- Jak pracovat s "retina" obrázky na vašem webu?
- Zpětné odkazy: jak je nikdy nezískávat
- Budování webu 100+1 na Drupalu: tipy a postřehy
- 7 tipů, které pochopí i laici, když migrujete stránky
- Zoner FOTOden "Dobrý fotograf může být každý"
Tematicky související články
- Vychytaný třísloupcový fluidní layout se stejnou délkou panelů
- Třísloupcový layout se stejnou délkou všech panelů
- Hrátky s okrajem textu
- Třísloupcový fluidní layout
- Dvousloupcový layout s plovoucí šířkou obou panelů
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
