Vychytaný třísloupcový fluidní layout se stejnou délkou panelů

1. listopadu 2005

•

Tento třísloupcový layout se zobrazuje ve všech prohlížečích stejně, navíc je určena minimální a maximální šířka (pro MSIE pomocí expressions), takže se při vysokém rozlišení z textu netvoří dlouhé „nudle“ a naopak při zmenšování viewportu se layout „nerozsype“.

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: auto;
min-width: 600px;
max-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

#strankaobal
{
width: 600px;
width: expression(document.body.clientWidth<604 ? „600px“ : (document.body.clientWidth>900 ? „900px“ : „auto“ ) );
}
#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>